Conversation
- Added nativewind and react-native-css to dependencies - Updated postcss configuration for Tailwind CSS - Added nativewind-env.d.ts to TypeScript configuration - Specified Node.js engine version and added overrides for lightningcss
Implement initial app structure including sign-in and sign-up screens, tab-based navigation with home, insights, settings, and subscriptions pages, dynamic subscription details routing, onboarding screen, and extensive asset library with icons, images, fonts, and icon configurations. Update root layout to hide headers and extend global CSS with custom theme variables and component styles. Remove old index page and unused logo image.
Add constants for app tabs, subscriptions data, icons, images, and theme configuration. Include type definitions for subscriptions and UI components, utility functions for formatting currency and dates, and image module declarations. Update package.json to include dayjs dependency for date handling.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Pull request overview
This PR introduces NativeWind/Tailwind styling infrastructure and scaffolds initial app screens, shared theme/data/constants, and utility helpers for a subscriptions-focused Expo Router app.
Changes:
- Add NativeWind/Tailwind + PostCSS + Metro configuration and global CSS theme/component classes.
- Introduce shared constants (icons/images/theme/data) and formatting utilities (currency/date/status).
- Scaffold initial Expo Router routes for auth, tabs, and subscription details, plus add required image/icon assets.
Reviewed changes
Copilot reviewed 21 out of 71 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| type.d.ts | Adds globally-available TS interfaces for tabs/subscriptions UI types. |
| tsconfig.json | Includes NativeWind env typings in the TS project. |
| postcss.config.mjs | Configures PostCSS to run Tailwind’s PostCSS plugin. |
| package.json | Adds Tailwind/NativeWind/dayjs + tooling deps and engine/override config. |
| nativewind-env.d.ts | Adds generated typing references for react-native-css. |
| metro.config.js | Enables NativeWind integration in Metro bundler config. |
| lib/utils.ts | Adds formatting helpers for currency, dates, and status labels. |
| image.d.ts | Declares module typings for imported image assets. |
| global.css | Defines Tailwind/NativeWind imports plus theme variables and component utility classes. |
| constants/theme.ts | Introduces centralized theme tokens (colors/spacing/components). |
| constants/images.ts | Exposes shared image assets via a central export. |
| constants/icons.ts | Exposes shared icon assets + IconKey type. |
| constants/data.ts | Provides initial mock data for tabs, user, and subscription lists. |
| assets/images/tabIcons/home@3x.png | Adds tab icon asset. |
| assets/images/tabIcons/home@2x.png | Adds tab icon asset. |
| assets/images/tabIcons/home.png | Adds tab icon asset. |
| assets/images/tabIcons/explore@3x.png | Adds tab icon asset. |
| assets/images/tabIcons/explore@2x.png | Adds tab icon asset. |
| assets/images/tabIcons/explore.png | Adds tab icon asset. |
| assets/images/splash-icon.png | Adds splash image asset. |
| assets/images/expo-logo.png | Adds Expo logo image asset. |
| assets/images/expo-badge.png | Adds Expo badge image asset. |
| assets/images/expo-badge-white.png | Adds Expo badge (white) image asset. |
| assets/icons/wallet.png | Adds icon asset. |
| assets/icons/spotify.png | Adds icon asset. |
| assets/icons/setting.png | Adds icon asset. |
| assets/icons/plus.png | Adds icon asset. |
| assets/icons/openai.png | Adds icon asset. |
| assets/icons/notion.png | Adds icon asset. |
| assets/icons/netflix.png | Adds icon asset. |
| assets/icons/menu.png | Adds icon asset. |
| assets/icons/medium.png | Adds icon asset. |
| assets/icons/logo.png | Adds icon asset. |
| assets/icons/home.png | Adds icon asset. |
| assets/icons/github.png | Adds icon asset. |
| assets/icons/figma.png | Adds icon asset. |
| assets/icons/dropbox.png | Adds icon asset. |
| assets/icons/claude.png | Adds icon asset. |
| assets/icons/canva.png | Adds icon asset. |
| assets/icons/back.png | Adds icon asset. |
| assets/icons/adobe.png | Adds icon asset. |
| assets/icons/add.png | Adds icon asset. |
| assets/icons/activity.png | Adds icon asset. |
| assets/expo.icon/icon.json | Adds Expo icon asset metadata. |
| assets/expo.icon/Assets/expo-symbol 2.svg | Adds Expo symbol SVG asset. |
| app/onboarding.tsx | Adds onboarding screen route. |
| app/index.tsx | Removes the initial starter home screen route. |
| app/_layout.tsx | Imports global styles and hides headers via Stack screen options. |
| app/(tabs)/subscriptions/[id].tsx | Adds subscription details dynamic route. |
| app/(tabs)/subscriptions.tsx | Adds subscriptions screen route. |
| app/(tabs)/settings.tsx | Adds settings screen route. |
| app/(tabs)/insights.tsx | Adds insights screen route. |
| app/(tabs)/index.tsx | Adds a styled demo/home route with navigation links. |
| app/(auth)/sign-up.tsx | Adds sign-up screen route. |
| app/(auth)/sign-in.tsx | Adds sign-in screen route. |
| app/(auth)/_layout.tsx | Adds auth group layout stack and imports global styles. |
| .env.example | Adds environment example file placeholder. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,46 @@ | |||
| import "@/global.css"; | |||
There was a problem hiding this comment.
global.css is already imported in app/_layout.tsx, so importing it again in this route is redundant and may cause duplicated style injection/processing. Prefer keeping the CSS import in the root layout only.
| import "@/global.css"; |
| const onboarding = () => { | ||
| return ( | ||
| <View> | ||
| <Text>onboarding</Text> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default onboarding; |
There was a problem hiding this comment.
Component is declared with a lowercase identifier (onboarding). For React components/screens, use PascalCase (e.g., Onboarding) to follow standard conventions and improve stack traces/DevTools readability.
| @@ -0,0 +1,6 @@ | |||
| import { Stack } from "expo-router"; | |||
| import "@/global.css"; | |||
There was a problem hiding this comment.
global.css is already imported at the app root (app/_layout.tsx). Importing it again here is redundant and can cause duplicate style injection/processing. Consider removing this import and relying on the root layout import only.
| import "@/global.css"; |
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughThis pull request introduces a complete authentication and tab-based navigation system for an Expo React Native app. It establishes auth routes (sign-in/sign-up), tab navigation with multiple screens, adds NativeWind styling with Tailwind CSS integration, and defines shared type definitions, constants, theme tokens, and utility functions for data formatting. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 47 minutes and 37 seconds.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (16)
package.json (1)
55-57: Document whylightningcssis pinned viaoverrides.The
overrides.lightningcss = "1.30.1"pin is opaque to future maintainers. If this is a workaround for a known incompatibility (e.g. with Tailwind v4 /@tailwindcss/postcssor Metro/Expo), add a brief comment above the entry (or in a NOTES file) explaining the reason and a link to the tracking issue. Otherwise it risks being bumped back unintentionally and regressing.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` around lines 55 - 57, Add documentation explaining why the package override "overrides.lightningcss" is pinned to "1.30.1": update package.json by adding a short comment above the "overrides" entry (or create/append a NOTES or DEPENDENCIES.md file) that states the root cause (e.g. compatibility issue with Tailwind v4 / `@tailwindcss/postcss` or Metro/Expo), the workaround chosen (pinning lightningcss), a link to the upstream or internal tracking issue, and the date and author who added it so future maintainers know not to bump "lightningcss" blindly; reference the "overrides" object and the "lightningcss" key when making the note.image.d.ts (1)
1-20: Consider stronger typing thananyfor image imports.The
image.d.tsdeclarations are actively used throughout the project (constants/images.ts, constants/icons.ts import many PNG files) and are necessary sinceexpo-env.d.tsdoesn't exist. However, typing them asanyweakens type safety forImageSourcePropTypeinference.Replace
anywithnumber(the standard Expo resource ID type):declare module "*.png" { - const value: any; + const value: number; export default value; }SVG declarations can be removed — no SVG imports exist in the codebase.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@image.d.ts` around lines 1 - 20, Update the image module declarations to use the Expo resource ID type instead of any: replace const value: any with const value: number so imports infer ImageSourcePropType correctly (affects image.d.ts and imports in constants/images.ts and constants/icons.ts); also remove the unused "*.svg" module declaration since no SVGs are imported in the codebase. Ensure the declarations remain in the same module blocks (e.g., declare module "*.png" / "*.jpg" / "*.jpeg" / "*.gif") and export default the number-typed value.lib/utils.ts (1)
16-22: Consider strict parsing forformatSubscriptionDateTime.
dayjs(value)without a format/strict flag falls back toDateparsing, which is implementation-defined for non-ISO strings and can silently accept unexpected inputs. If you know the incoming shape (ISO 8601), pass it explicitly and enable strict mode to avoid surprising "valid" parses:import customParseFormat from "dayjs/plugin/customParseFormat"; dayjs.extend(customParseFormat); // dayjs(value, ["YYYY-MM-DDTHH:mm:ssZ", "YYYY-MM-DD"], true)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@lib/utils.ts` around lines 16 - 22, formatSubscriptionDateTime currently calls dayjs(value) which allows loose/implementation-defined Date parsing; change it to use dayjs strict parsing by importing and extending the customParseFormat plugin and then parsing with an explicit format list and strict=true (e.g., pass ISO formats like "YYYY-MM-DDTHH:mm:ssZ" and "YYYY-MM-DD") inside the formatSubscriptionDateTime function so invalid/non-ISO inputs are rejected and the isValid() check is reliable.app/(auth)/_layout.tsx (2)
4-6: RenameRootLayout→AuthLayout.This file is the
(auth)route group layout, not the app root. Naming itRootLayoutis confusing in stack traces and when another actual root layout (e.g.,app/_layout.tsx) uses the same name.♻️ Proposed rename
-export default function RootLayout() { +export default function AuthLayout() { return <Stack screenOptions={{ headerShown: false }} />; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(auth)/_layout.tsx around lines 4 - 6, The component is misnamed RootLayout; rename the default exported function RootLayout to AuthLayout and update the default export to export AuthLayout instead so stack traces and imports reflect the (auth) route group; update any internal references or tests that import or reference RootLayout to use AuthLayout (look for the symbol RootLayout and replace with AuthLayout).
2-2: Importingglobal.cssin each layout is redundant.Tailwind/NativeWind only needs the stylesheet imported once (typically in the top-level
app/_layout.tsx). Importing it again here is harmless but adds noise; remove unless(auth)is entered as a standalone entry point bypassing the root layout.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(auth)/_layout.tsx at line 2, Remove the redundant top-level stylesheet import from the (auth) layout: delete the import "@/global.css" statement in the _layout.tsx for (auth) because global.css should only be imported once at the root app layout; if this auth layout must ever act as a standalone entry point, add a short comment explaining why the import is retained, otherwise remove it to avoid duplicate imports/noise.global.css (1)
229-239: Duplicated classes:auth-safe-areaandauth-screen.Both resolve to
flex-1 bg-background. Consider dropping one (or aliasing) to avoid drift as the theme evolves.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@global.css` around lines 229 - 239, .auth-safe-area and .auth-screen are duplicated (both apply flex-1 bg-background); remove the duplication by keeping one canonical class (e.g., .auth-screen) and either delete the other (.auth-safe-area) or convert it to an explicit alias that forwards to the canonical class; update all uses of the removed class to the canonical name (search for auth-safe-area and auth-screen in templates/components) so styling remains consistent and to prevent drift as the theme evolves.constants/theme.ts (1)
1-52: Two sources of truth for design tokens — guard against drift.These values duplicate the CSS variables declared in
global.css(--color-*,--spacing-*). Any future palette/spacing tweak must be kept in sync manually, which is easy to forget. Two common mitigations:
- Generate one from the other (e.g., export a JSON tokens file and have both the CSS
@themeand this TS module pull from it), or- At minimum add a comment cross-referencing
global.cssand a simple test that asserts equality.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@constants/theme.ts` around lines 1 - 52, The theme constants (colors, spacing, components, theme) duplicate CSS variables in global.css, risking drift; fix by making a single source of truth: either extract tokens into a shared JSON (e.g., tokens.json) and update this module to import from that JSON (and update global.css generation to read the same JSON), or if migration is too large, add a clear top-of-file comment referencing global.css and implement a unit test that reads the CSS variables (or the generated tokens file) and asserts equality with the exported colors and spacing objects (use the identifiers colors, spacing, theme, components to locate the code). Ensure the chosen approach is wired into CI so mismatches fail the build.constants/images.ts (1)
4-4: Consider naming the default export.Default-exporting an anonymous object literal triggers
import/no-anonymous-default-exportunder many ESLint configs and makes debugging/stack traces less descriptive. Assign to a named constant first.♻️ Proposed refactor
-export default { splashPattern, avatar }; +const images = { splashPattern, avatar }; +export default images;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@constants/images.ts` at line 4, The default-exported anonymous object should be given a name to avoid anonymous-default-export lint errors and improve stack traces; create a named constant (e.g., Images or IMAGE_CONSTANTS) that combines splashPattern and avatar, e.g., const Images = { splashPattern, avatar }, and then export default Images; update any imports if necessary to reflect the clearer name while keeping the exported shape identical (referencing splashPattern and avatar in this file).app/(auth)/sign-in.tsx (1)
4-16: Optional: near-duplicate withsign-up.tsx.
sign-in.tsxandsign-up.tsxshare the same layout/classNames and only differ in label and href. If these remain placeholders for long, consider a small shared presentational component (e.g.AuthPlaceholder) to avoid drift. Safe to defer until real auth UI lands.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(auth)/sign-in.tsx around lines 4 - 16, SignIn currently duplicates layout/classNames used in sign-up.tsx; extract a small presentational component (e.g., AuthPlaceholder) that accepts props for title and CTA props (label and href) and use it inside the SignIn component and sign-up.tsx to render shared View/Text/Link structure; update SignIn to call AuthPlaceholder with title="SignIn" and CTA {label:"Create Account", href:"/(auth)/sign-up"} and adjust sign-up to pass its corresponding title and href so the shared structure lives in one place (refer to SignIn component and sign-up.tsx for locations).app/(tabs)/subscriptions/[id].tsx (1)
6-6: Minor:useLocalSearchParamsreturn type.
useLocalSearchParamscan returnstring | string[]for a given param (e.g. when the same key appears multiple times). Casting to{ id: string }hides that. Not a bug for this scaffold, but if you later pass arrays or deep-link with duplicate keys, you'll want to narrow defensively (e.g.Array.isArray(id) ? id[0] : id).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(tabs)/subscriptions/[id].tsx at line 6, The call to useLocalSearchParams currently assumes id is a string; update the handling around useLocalSearchParams so you defensively narrow the returned id (which can be string | string[]) before use — for example, after const { id } = useLocalSearchParams(), compute a safeId by checking Array.isArray(id) ? id[0] : id (or otherwise validate/throw) and use safeId in the component; reference useLocalSearchParams and the id variable to locate where to apply this change.app/(tabs)/index.tsx (1)
1-1:global.cssimport likely belongs in the root layout, not here.NativeWind/Tailwind's global stylesheet is typically imported once from the root
_layout.tsxso all routes (auth, tabs, onboarding) share it. Importing it here in(tabs)/index.tsxmeans the classes on/onboarding,/(auth)/*etc. depend on whichever layout/file happens to import it first. Based on the summary,(auth)/_layout.tsxalready imports it; consolidating in the root layout (and removing it from leaf screens) is more reliable.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(tabs)/index.tsx at line 1, Remove the "@/global.css" import from (tabs)/index.tsx and instead ensure the global stylesheet is imported once in the app’s root layout (e.g., app/layout.tsx or the root _layout component) so Tailwind/NativeWind classes are available for all routes; also remove any duplicate imports from leaf layouts such as (auth)/_layout.tsx to avoid race/ordering issues.type.d.ts (3)
15-29: Tightenstatusandbillingto literal unions.These fields only take a small fixed set of values in
constants/data.ts(status: "active" | "paused" | "cancelled",billing: "Monthly" | "Yearly"). Typing them as barestringloses compile-time checking for typos and prevents exhaustiveswitchhandling in UI code.Proposed fix
- status?: string; + status?: "active" | "paused" | "cancelled"; startDate?: string; price: number; currency?: string; - billing: string; + billing: "Monthly" | "Yearly";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@type.d.ts` around lines 15 - 29, The Subscription interface defines status and billing as plain strings which loses type safety; update the Subscription interface (interface Subscription) to tighten status to the literal union "active" | "paused" | "cancelled" and billing to the literal union "Monthly" | "Yearly" so callers get compile-time checks and exhaustive switch support; locate the Subscription declaration and replace the status?: string and billing: string entries with the specified unions, and update any downstream code that relied on other string values to use these literals (or adjust to optional/undefined if needed).
3-53: Global interfaces pollute the global namespace — consider explicit imports.Declaring
Subscription,AppTab,TabIconProps, etc. globally means any file in the project (and some third-party typings) can accidentally shadow or collide with them —Subscriptionin particular is a very common name (e.g. RxJS). Exporting these from a module (e.g.types/index.ts) and importing where needed is more refactor-friendly and easier to trace with go-to-definition. Safe to defer, but worth considering before the type surface grows.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@type.d.ts` around lines 3 - 53, The current declare global block in type.d.ts is polluting the global namespace (interfaces like Subscription, AppTab, TabIconProps), so extract and export each interface from a module file (e.g., create types/index.ts) rather than using declare global; export interfaces Subscription, SubscriptionCardProps, UpcomingSubscription, UpcomingSubscriptionCardProps, AppTab, TabIconProps, ListHeadingProps and replace global usage sites with explicit imports of these symbols; optionally rename or namespace the common Subscription type (e.g., AppSubscription) if you want to avoid collisions with libs like RxJS and update all references to the new exported names.
47-48: Empty interface extends — prefer a type alias.interface UpcomingSubscriptionCardProps extends Omit<UpcomingSubscription, "id"> {}Most TS lint configs (including
@typescript-eslint/no-empty-object-type/no-empty-interface) flag this. A type alias is equivalent and lint-clean:Proposed fix
- interface UpcomingSubscriptionCardProps - extends Omit<UpcomingSubscription, "id"> {} + type UpcomingSubscriptionCardProps = Omit<UpcomingSubscription, "id">;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@type.d.ts` around lines 47 - 48, The empty interface UpcomingSubscriptionCardProps that extends Omit<UpcomingSubscription, "id"> should be replaced with a type alias to satisfy lint rules; change the declaration of UpcomingSubscriptionCardProps to a type alias using Omit (i.e., make UpcomingSubscriptionCardProps = Omit<UpcomingSubscription, "id">) so you remove the empty interface while preserving the same shape.constants/data.ts (1)
46-107: Consider tighteningstatus/billingto literal unions.
Subscription.statusis typed asstringintype.d.ts, but this file only ever uses"active" | "paused" | "cancelled". Same forbilling("Monthly" | "Yearly"). Narrowing those intype.d.tswould let the compiler catch typos here and give downstream components (status pills, renewal math) exhaustiveness checking.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@constants/data.ts` around lines 46 - 107, The Subscription type is too permissive: update the Subscription declaration in type.d.ts to narrow the status and billing fields to string literal unions (e.g., status: "active" | "paused" | "cancelled" and billing: "Monthly" | "Yearly") so the compiler can catch typos and enable exhaustiveness checking; then run TypeScript build/typecheck to ensure HOME_SUBSCRIPTIONS and any components (status pills, renewal math) conform to the new types and fix any resulting type errors.app/(tabs)/subscriptions.tsx (1)
1-12: Optional: Consolidate subscriptions route structure for consistency.You have
app/(tabs)/subscriptions.tsx(serving/subscriptions) andapp/(tabs)/subscriptions/[id].tsx(serving/subscriptions/:id). This pattern is fully supported by Expo Router and creates no routing conflicts. However, if you prefer grouping all subscriptions routes in a single folder, movesubscriptions.tsxtosubscriptions/index.tsxfor a more uniform file structure.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(tabs)/subscriptions.tsx around lines 1 - 12, The Subscriptions component file (Subscriptions in app/(tabs)/subscriptions.tsx) should be moved into a subscriptions folder as index.tsx for a consistent route structure; create app/(tabs)/subscriptions/index.tsx, move the current Subscriptions component code into that file (keeping the component name Subscriptions and default export), delete the original subscriptions.tsx, and ensure any imports or references (if any) still point to the route (no code changes needed for Expo Router since index.tsx will serve /subscriptions).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/onboarding.tsx`:
- Around line 4-12: Rename the React component function and its default export
from onboarding to PascalCase Onboarding: change the function identifier
onboarding => Onboarding and update export default onboarding => export default
Onboarding; also update any imports/usages that reference the old name (e.g.,
JSX usages or route registrations) so they import/use Onboarding to avoid React
treating it as a host element.
In `@global.css`:
- Around line 48-420: global.css contains ~93 unused component classes (e.g.,
.tabs-icon, .home-header, .sub-card, .auth-card, .modal-overlay, .picker-option,
.category-chip) that bloat the bundle; either delete these unused definitions or
move them into a clearly named file (e.g., planned-components.css) and add a top
comment documenting intent and where/when they will be used, then update your
build/imports accordingly; to implement, search for usages of the listed class
name prefixes (tabs- / home- / sub- / list- / upcoming- / auth- / modal- /
picker- / category-) to confirm none are referenced, remove or extract the
corresponding rule blocks from global.css, and add a short header comment in the
new file explaining purpose and a reference to the related ticket/feature for
future activation.
- Line 86: The utility min-h-50 in the `@apply` rule (the line containing "@apply
my-2.5 min-h-50 justify-between gap-5 rounded-bl-4xl rounded-tr-4xl bg-accent
p-6;") is invalid and resolves to nothing at runtime; replace it with a valid
token such as min-h-30 (matches the defined spacing tokens) or use an arbitrary
value like min-h-[50px] if you need exactly 50px, keeping the other utilities
(rounded-bl-4xl, rounded-tr-4xl) unchanged.
In `@package.json`:
- Line 31: Update the package.json dependency for NativeWind to pin the preview
release to an exact version: replace the semver caret specifier "nativewind":
"^5.0.0-preview.3" with an exact specifier "nativewind": "5.0.0-preview.3" so
the preview API cannot be inadvertently upgraded; leave stable packages like
"react-native-css" using caret (e.g., "^3.0.6") as-is.
---
Nitpick comments:
In `@app/`(auth)/_layout.tsx:
- Around line 4-6: The component is misnamed RootLayout; rename the default
exported function RootLayout to AuthLayout and update the default export to
export AuthLayout instead so stack traces and imports reflect the (auth) route
group; update any internal references or tests that import or reference
RootLayout to use AuthLayout (look for the symbol RootLayout and replace with
AuthLayout).
- Line 2: Remove the redundant top-level stylesheet import from the (auth)
layout: delete the import "@/global.css" statement in the _layout.tsx for (auth)
because global.css should only be imported once at the root app layout; if this
auth layout must ever act as a standalone entry point, add a short comment
explaining why the import is retained, otherwise remove it to avoid duplicate
imports/noise.
In `@app/`(auth)/sign-in.tsx:
- Around line 4-16: SignIn currently duplicates layout/classNames used in
sign-up.tsx; extract a small presentational component (e.g., AuthPlaceholder)
that accepts props for title and CTA props (label and href) and use it inside
the SignIn component and sign-up.tsx to render shared View/Text/Link structure;
update SignIn to call AuthPlaceholder with title="SignIn" and CTA {label:"Create
Account", href:"/(auth)/sign-up"} and adjust sign-up to pass its corresponding
title and href so the shared structure lives in one place (refer to SignIn
component and sign-up.tsx for locations).
In `@app/`(tabs)/index.tsx:
- Line 1: Remove the "@/global.css" import from (tabs)/index.tsx and instead
ensure the global stylesheet is imported once in the app’s root layout (e.g.,
app/layout.tsx or the root _layout component) so Tailwind/NativeWind classes are
available for all routes; also remove any duplicate imports from leaf layouts
such as (auth)/_layout.tsx to avoid race/ordering issues.
In `@app/`(tabs)/subscriptions.tsx:
- Around line 1-12: The Subscriptions component file (Subscriptions in
app/(tabs)/subscriptions.tsx) should be moved into a subscriptions folder as
index.tsx for a consistent route structure; create
app/(tabs)/subscriptions/index.tsx, move the current Subscriptions component
code into that file (keeping the component name Subscriptions and default
export), delete the original subscriptions.tsx, and ensure any imports or
references (if any) still point to the route (no code changes needed for Expo
Router since index.tsx will serve /subscriptions).
In `@app/`(tabs)/subscriptions/[id].tsx:
- Line 6: The call to useLocalSearchParams currently assumes id is a string;
update the handling around useLocalSearchParams so you defensively narrow the
returned id (which can be string | string[]) before use — for example, after
const { id } = useLocalSearchParams(), compute a safeId by checking
Array.isArray(id) ? id[0] : id (or otherwise validate/throw) and use safeId in
the component; reference useLocalSearchParams and the id variable to locate
where to apply this change.
In `@constants/data.ts`:
- Around line 46-107: The Subscription type is too permissive: update the
Subscription declaration in type.d.ts to narrow the status and billing fields to
string literal unions (e.g., status: "active" | "paused" | "cancelled" and
billing: "Monthly" | "Yearly") so the compiler can catch typos and enable
exhaustiveness checking; then run TypeScript build/typecheck to ensure
HOME_SUBSCRIPTIONS and any components (status pills, renewal math) conform to
the new types and fix any resulting type errors.
In `@constants/images.ts`:
- Line 4: The default-exported anonymous object should be given a name to avoid
anonymous-default-export lint errors and improve stack traces; create a named
constant (e.g., Images or IMAGE_CONSTANTS) that combines splashPattern and
avatar, e.g., const Images = { splashPattern, avatar }, and then export default
Images; update any imports if necessary to reflect the clearer name while
keeping the exported shape identical (referencing splashPattern and avatar in
this file).
In `@constants/theme.ts`:
- Around line 1-52: The theme constants (colors, spacing, components, theme)
duplicate CSS variables in global.css, risking drift; fix by making a single
source of truth: either extract tokens into a shared JSON (e.g., tokens.json)
and update this module to import from that JSON (and update global.css
generation to read the same JSON), or if migration is too large, add a clear
top-of-file comment referencing global.css and implement a unit test that reads
the CSS variables (or the generated tokens file) and asserts equality with the
exported colors and spacing objects (use the identifiers colors, spacing, theme,
components to locate the code). Ensure the chosen approach is wired into CI so
mismatches fail the build.
In `@global.css`:
- Around line 229-239: .auth-safe-area and .auth-screen are duplicated (both
apply flex-1 bg-background); remove the duplication by keeping one canonical
class (e.g., .auth-screen) and either delete the other (.auth-safe-area) or
convert it to an explicit alias that forwards to the canonical class; update all
uses of the removed class to the canonical name (search for auth-safe-area and
auth-screen in templates/components) so styling remains consistent and to
prevent drift as the theme evolves.
In `@image.d.ts`:
- Around line 1-20: Update the image module declarations to use the Expo
resource ID type instead of any: replace const value: any with const value:
number so imports infer ImageSourcePropType correctly (affects image.d.ts and
imports in constants/images.ts and constants/icons.ts); also remove the unused
"*.svg" module declaration since no SVGs are imported in the codebase. Ensure
the declarations remain in the same module blocks (e.g., declare module "*.png"
/ "*.jpg" / "*.jpeg" / "*.gif") and export default the number-typed value.
In `@lib/utils.ts`:
- Around line 16-22: formatSubscriptionDateTime currently calls dayjs(value)
which allows loose/implementation-defined Date parsing; change it to use dayjs
strict parsing by importing and extending the customParseFormat plugin and then
parsing with an explicit format list and strict=true (e.g., pass ISO formats
like "YYYY-MM-DDTHH:mm:ssZ" and "YYYY-MM-DD") inside the
formatSubscriptionDateTime function so invalid/non-ISO inputs are rejected and
the isValid() check is reliable.
In `@package.json`:
- Around line 55-57: Add documentation explaining why the package override
"overrides.lightningcss" is pinned to "1.30.1": update package.json by adding a
short comment above the "overrides" entry (or create/append a NOTES or
DEPENDENCIES.md file) that states the root cause (e.g. compatibility issue with
Tailwind v4 / `@tailwindcss/postcss` or Metro/Expo), the workaround chosen
(pinning lightningcss), a link to the upstream or internal tracking issue, and
the date and author who added it so future maintainers know not to bump
"lightningcss" blindly; reference the "overrides" object and the "lightningcss"
key when making the note.
In `@type.d.ts`:
- Around line 15-29: The Subscription interface defines status and billing as
plain strings which loses type safety; update the Subscription interface
(interface Subscription) to tighten status to the literal union "active" |
"paused" | "cancelled" and billing to the literal union "Monthly" | "Yearly" so
callers get compile-time checks and exhaustive switch support; locate the
Subscription declaration and replace the status?: string and billing: string
entries with the specified unions, and update any downstream code that relied on
other string values to use these literals (or adjust to optional/undefined if
needed).
- Around line 3-53: The current declare global block in type.d.ts is polluting
the global namespace (interfaces like Subscription, AppTab, TabIconProps), so
extract and export each interface from a module file (e.g., create
types/index.ts) rather than using declare global; export interfaces
Subscription, SubscriptionCardProps, UpcomingSubscription,
UpcomingSubscriptionCardProps, AppTab, TabIconProps, ListHeadingProps and
replace global usage sites with explicit imports of these symbols; optionally
rename or namespace the common Subscription type (e.g., AppSubscription) if you
want to avoid collisions with libs like RxJS and update all references to the
new exported names.
- Around line 47-48: The empty interface UpcomingSubscriptionCardProps that
extends Omit<UpcomingSubscription, "id"> should be replaced with a type alias to
satisfy lint rules; change the declaration of UpcomingSubscriptionCardProps to a
type alias using Omit (i.e., make UpcomingSubscriptionCardProps =
Omit<UpcomingSubscription, "id">) so you remove the empty interface while
preserving the same shape.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 510044c9-14d2-4243-a345-2bf1250df6b4
⛔ Files ignored due to path filters (45)
assets/expo.icon/Assets/expo-symbol 2.svgis excluded by!**/*.svgassets/expo.icon/Assets/grid.pngis excluded by!**/*.pngassets/fonts/PlusJakartaSans-Bold.ttfis excluded by!**/*.ttfassets/fonts/PlusJakartaSans-ExtraBold.ttfis excluded by!**/*.ttfassets/fonts/PlusJakartaSans-Light.ttfis excluded by!**/*.ttfassets/fonts/PlusJakartaSans-Medium.ttfis excluded by!**/*.ttfassets/fonts/PlusJakartaSans-Regular.ttfis excluded by!**/*.ttfassets/fonts/PlusJakartaSans-SemiBold.ttfis excluded by!**/*.ttfassets/icons/activity.pngis excluded by!**/*.pngassets/icons/add.pngis excluded by!**/*.pngassets/icons/adobe.pngis excluded by!**/*.pngassets/icons/back.pngis excluded by!**/*.pngassets/icons/canva.pngis excluded by!**/*.pngassets/icons/claude.pngis excluded by!**/*.pngassets/icons/dropbox.pngis excluded by!**/*.pngassets/icons/figma.pngis excluded by!**/*.pngassets/icons/github.pngis excluded by!**/*.pngassets/icons/home.pngis excluded by!**/*.pngassets/icons/logo.pngis excluded by!**/*.pngassets/icons/medium.pngis excluded by!**/*.pngassets/icons/menu.pngis excluded by!**/*.pngassets/icons/netflix.pngis excluded by!**/*.pngassets/icons/notion.pngis excluded by!**/*.pngassets/icons/openai.pngis excluded by!**/*.pngassets/icons/plus.pngis excluded by!**/*.pngassets/icons/setting.pngis excluded by!**/*.pngassets/icons/spotify.pngis excluded by!**/*.pngassets/icons/wallet.pngis excluded by!**/*.pngassets/images/avatar.pngis excluded by!**/*.pngassets/images/expo-badge-white.pngis excluded by!**/*.pngassets/images/expo-badge.pngis excluded by!**/*.pngassets/images/expo-logo.pngis excluded by!**/*.pngassets/images/icon.pngis excluded by!**/*.pngassets/images/logo-glow.pngis excluded by!**/*.pngassets/images/partial-react-logo.pngis excluded by!**/*.pngassets/images/splash-icon.pngis excluded by!**/*.pngassets/images/splash-pattern.pngis excluded by!**/*.pngassets/images/tabIcons/explore.pngis excluded by!**/*.pngassets/images/tabIcons/explore@2x.pngis excluded by!**/*.pngassets/images/tabIcons/explore@3x.pngis excluded by!**/*.pngassets/images/tabIcons/home.pngis excluded by!**/*.pngassets/images/tabIcons/home@2x.pngis excluded by!**/*.pngassets/images/tabIcons/home@3x.pngis excluded by!**/*.pngassets/images/tutorial-web.pngis excluded by!**/*.pngpackage-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (26)
.env.exampleapp/(auth)/_layout.tsxapp/(auth)/sign-in.tsxapp/(auth)/sign-up.tsxapp/(tabs)/index.tsxapp/(tabs)/insights.tsxapp/(tabs)/settings.tsxapp/(tabs)/subscriptions.tsxapp/(tabs)/subscriptions/[id].tsxapp/_layout.tsxapp/index.tsxapp/onboarding.tsxassets/expo.icon/icon.jsonconstants/data.tsconstants/icons.tsconstants/images.tsconstants/theme.tsglobal.cssimage.d.tslib/utils.tsmetro.config.jsnativewind-env.d.tspackage.jsonpostcss.config.mjstsconfig.jsontype.d.ts
💤 Files with no reviewable changes (1)
- app/index.tsx
| @layer components { | ||
| .tabs-icon { | ||
| @apply size-12 items-center justify-center; | ||
| } | ||
|
|
||
| .tabs-pill { | ||
| @apply size-12 items-center justify-center rounded-full bg-transparent; | ||
| } | ||
|
|
||
| .tabs-active { | ||
| @apply bg-accent; | ||
| } | ||
|
|
||
| .tabs-glyph { | ||
| @apply size-6; | ||
| } | ||
|
|
||
| .home-header { | ||
| @apply mb-2.5 flex-row items-center justify-between; | ||
| } | ||
|
|
||
| .home-user { | ||
| @apply flex-row items-center; | ||
| } | ||
|
|
||
| .home-avatar { | ||
| @apply size-16 rounded-full; | ||
| } | ||
|
|
||
| .home-user-name { | ||
| @apply ml-4 text-2xl font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .home-add-icon { | ||
| @apply size-12; | ||
| } | ||
|
|
||
| .home-balance-card { | ||
| @apply my-2.5 min-h-50 justify-between gap-5 rounded-bl-4xl rounded-tr-4xl bg-accent p-6; | ||
| } | ||
|
|
||
| .home-balance-label { | ||
| @apply text-xl font-sans-semibold text-white/80; | ||
| } | ||
|
|
||
| .home-balance-row { | ||
| @apply flex-row items-center justify-between; | ||
| } | ||
|
|
||
| .home-balance-amount { | ||
| @apply text-4xl font-sans-extrabold text-white; | ||
| } | ||
|
|
||
| .home-balance-date { | ||
| @apply text-xl font-sans-medium text-white; | ||
| } | ||
|
|
||
| .list-head { | ||
| @apply my-5 flex-row items-center justify-between; | ||
| } | ||
|
|
||
| .list-title { | ||
| @apply text-2xl font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .list-action { | ||
| @apply rounded-full border border-black/20 px-4 py-1; | ||
| } | ||
|
|
||
| .list-action-text { | ||
| @apply text-lg font-sans-semibold text-primary; | ||
| } | ||
|
|
||
| .upcoming-card { | ||
| @apply mr-4 w-44 rounded-2xl border border-black/10 bg-background p-4; | ||
| } | ||
|
|
||
| .upcoming-row { | ||
| @apply flex-row items-center gap-3; | ||
| } | ||
|
|
||
| .upcoming-icon { | ||
| @apply size-14; | ||
| } | ||
|
|
||
| .upcoming-price { | ||
| @apply text-lg font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .upcoming-meta { | ||
| @apply text-sm font-sans-semibold text-muted-foreground; | ||
| } | ||
|
|
||
| .upcoming-name { | ||
| @apply mt-2 text-lg font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .sub-card { | ||
| @apply rounded-2xl border border-border p-4; | ||
| } | ||
|
|
||
| .sub-card-expanded { | ||
| @apply bg-subscription; | ||
| } | ||
|
|
||
| .sub-head { | ||
| @apply flex-row items-center py-2; | ||
| } | ||
|
|
||
| .sub-main { | ||
| @apply min-w-0 flex-1 flex-row items-center gap-3; | ||
| } | ||
|
|
||
| .sub-icon { | ||
| @apply size-16 rounded-lg; | ||
| } | ||
|
|
||
| .sub-copy { | ||
| @apply min-w-0 flex-1; | ||
| } | ||
|
|
||
| .sub-title { | ||
| @apply mb-1 text-lg font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .sub-meta { | ||
| @apply text-sm font-sans-semibold text-muted-foreground; | ||
| } | ||
|
|
||
| .sub-price-box { | ||
| @apply ml-3 shrink-0 items-end; | ||
| } | ||
|
|
||
| .sub-price { | ||
| @apply mb-1 text-lg font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .sub-billing { | ||
| @apply text-sm font-sans-medium text-muted-foreground; | ||
| } | ||
|
|
||
| .sub-body { | ||
| @apply mt-6 gap-4; | ||
| } | ||
|
|
||
| .sub-details { | ||
| @apply gap-6; | ||
| } | ||
|
|
||
| .sub-row { | ||
| @apply flex-row items-center justify-between gap-3; | ||
| } | ||
|
|
||
| .sub-row-copy { | ||
| @apply min-w-0 flex-1 flex-row items-center gap-2; | ||
| } | ||
|
|
||
| .sub-label { | ||
| @apply shrink-0 text-base font-sans-medium text-muted-foreground; | ||
| } | ||
|
|
||
| .sub-value { | ||
| @apply flex-1 font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .sub-cancel { | ||
| @apply mt-2 items-center rounded-full bg-primary py-4; | ||
| } | ||
|
|
||
| .sub-cancel-disabled { | ||
| @apply bg-primary/35; | ||
| } | ||
|
|
||
| .sub-cancel-text { | ||
| @apply font-sans-bold text-background; | ||
| } | ||
|
|
||
| .home-empty-state { | ||
| @apply py-4 text-sm font-sans-medium text-black/60; | ||
| } | ||
|
|
||
| .auth-safe-area { | ||
| @apply flex-1 bg-background; | ||
| } | ||
|
|
||
| .auth-screen { | ||
| @apply flex-1 bg-background; | ||
| } | ||
|
|
||
| .auth-scroll { | ||
| @apply flex-1; | ||
| } | ||
|
|
||
| .auth-content { | ||
| @apply grow px-5 pb-10 pt-8; | ||
| } | ||
|
|
||
| .auth-brand-block { | ||
| @apply mt-2 items-center; | ||
| } | ||
|
|
||
| .auth-logo-wrap { | ||
| @apply mb-7 flex-row items-center gap-3; | ||
| } | ||
|
|
||
| .auth-logo-mark { | ||
| @apply relative size-14 items-center justify-center rounded-2xl bg-accent; | ||
| } | ||
|
|
||
| .auth-logo-mark-text { | ||
| @apply text-2xl font-sans-extrabold text-background; | ||
| } | ||
|
|
||
| .auth-wordmark { | ||
| @apply text-3xl font-sans-extrabold text-primary; | ||
| } | ||
|
|
||
| .auth-wordmark-sub { | ||
| @apply -mt-1 text-xs font-sans-semibold uppercase tracking-[1px] text-muted-foreground; | ||
| } | ||
|
|
||
| .auth-title { | ||
| @apply text-3xl font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .auth-subtitle { | ||
| @apply mt-2 max-w-[320px] text-center text-base font-sans-medium text-muted-foreground; | ||
| } | ||
|
|
||
| .auth-card { | ||
| @apply mt-8 rounded-3xl border border-border bg-card p-5; | ||
| } | ||
|
|
||
| .auth-form { | ||
| @apply gap-4; | ||
| } | ||
|
|
||
| .auth-field { | ||
| @apply gap-2; | ||
| } | ||
|
|
||
| .auth-label { | ||
| @apply text-sm font-sans-semibold text-primary; | ||
| } | ||
|
|
||
| .auth-input { | ||
| @apply rounded-2xl border border-border bg-background px-4 py-4 text-base font-sans-medium text-primary; | ||
| } | ||
|
|
||
| .auth-input-error { | ||
| @apply border-destructive; | ||
| } | ||
|
|
||
| .auth-error { | ||
| @apply text-xs font-sans-medium text-destructive; | ||
| } | ||
|
|
||
| .auth-helper { | ||
| @apply text-sm font-sans-medium text-muted-foreground; | ||
| } | ||
|
|
||
| .auth-button { | ||
| @apply mt-1 items-center rounded-2xl bg-accent py-4; | ||
| } | ||
|
|
||
| .auth-button-disabled { | ||
| @apply bg-accent/45; | ||
| } | ||
|
|
||
| .auth-button-text { | ||
| @apply text-base font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .auth-secondary-button { | ||
| @apply items-center rounded-2xl border border-accent/30 bg-accent/10 py-3; | ||
| } | ||
|
|
||
| .auth-secondary-button-text { | ||
| @apply text-sm font-sans-semibold text-accent; | ||
| } | ||
|
|
||
| .auth-divider-row { | ||
| @apply my-4 flex-row items-center gap-3; | ||
| } | ||
|
|
||
| .auth-divider-line { | ||
| @apply h-px flex-1 bg-border; | ||
| } | ||
|
|
||
| .auth-divider-text { | ||
| @apply text-[11px] font-sans-semibold uppercase tracking-[1px] text-muted-foreground; | ||
| } | ||
|
|
||
| .auth-link-row { | ||
| @apply mt-5 flex-row items-center justify-center gap-1; | ||
| } | ||
|
|
||
| .auth-link-copy { | ||
| @apply text-sm font-sans-medium text-muted-foreground; | ||
| } | ||
|
|
||
| .auth-link { | ||
| @apply text-sm font-sans-bold text-accent; | ||
| } | ||
|
|
||
| .modal-overlay { | ||
| @apply flex-1 bg-black/50; | ||
| } | ||
|
|
||
| .modal-container { | ||
| @apply mt-auto max-h-[85%] rounded-t-3xl bg-background; | ||
| } | ||
|
|
||
| .modal-header { | ||
| @apply flex-row items-center justify-between border-b border-border px-5 py-4; | ||
| } | ||
|
|
||
| .modal-title { | ||
| @apply text-xl font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .modal-close { | ||
| @apply size-8 items-center justify-center rounded-full bg-muted; | ||
| } | ||
|
|
||
| .modal-close-text { | ||
| @apply text-lg font-sans-bold text-primary; | ||
| } | ||
|
|
||
| .modal-body { | ||
| @apply gap-5 p-5; | ||
| } | ||
|
|
||
| .picker-row { | ||
| @apply flex-row gap-3; | ||
| } | ||
|
|
||
| .picker-option { | ||
| @apply flex-1 items-center rounded-2xl border border-border bg-background py-3; | ||
| } | ||
|
|
||
| .picker-option-active { | ||
| @apply border-accent bg-accent/10; | ||
| } | ||
|
|
||
| .picker-option-text { | ||
| @apply text-sm font-sans-semibold text-muted-foreground; | ||
| } | ||
|
|
||
| .picker-option-text-active { | ||
| @apply text-accent; | ||
| } | ||
|
|
||
| .category-scroll { | ||
| @apply flex-row flex-wrap gap-2; | ||
| } | ||
|
|
||
| .category-chip { | ||
| @apply rounded-full border border-border bg-background px-4 py-2; | ||
| } | ||
|
|
||
| .category-chip-active { | ||
| @apply border-accent bg-accent/10; | ||
| } | ||
|
|
||
| .category-chip-text { | ||
| @apply text-sm font-sans-semibold text-muted-foreground; | ||
| } | ||
|
|
||
| .category-chip-text-active { | ||
| @apply text-accent; | ||
| } | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find which custom component classes defined in global.css are actually referenced.
set -e
classes=$(rg -nP '^\s*\.([a-z][a-z0-9-]+)\s*\{' global.css -or '$1' | sort -u)
echo "Defined classes: $(echo "$classes" | wc -l)"
unused=0
for c in $classes; do
if ! rg -q --type=ts --type=tsx --type=js --type=jsx -g '!global.css' -- "\\b$c\\b" . 2>/dev/null; then
echo "UNUSED: $c"
unused=$((unused+1))
fi
done
echo "Total unused: $unused"Repository: Ericokim/react_native_recurrly
Length of output: 2532
Remove all unused component classes from global.css or document intent for future use.
The defined component classes in this file are completely unused across the codebase—all 93 classes (tabs-*, home-*, sub-*, list-*, upcoming-*, auth-*, modal-*, picker-*, category-*) have no references in .ts, .tsx, .js, or .jsx files. This represents ~370 lines of dead CSS being compiled into the bundle. Either remove these classes or, if they are intended for future screens/components, document that intention and move them to a planned-components section or separate file.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@global.css` around lines 48 - 420, global.css contains ~93 unused component
classes (e.g., .tabs-icon, .home-header, .sub-card, .auth-card, .modal-overlay,
.picker-option, .category-chip) that bloat the bundle; either delete these
unused definitions or move them into a clearly named file (e.g.,
planned-components.css) and add a top comment documenting intent and where/when
they will be used, then update your build/imports accordingly; to implement,
search for usages of the listed class name prefixes (tabs- / home- / sub- /
list- / upcoming- / auth- / modal- / picker- / category-) to confirm none are
referenced, remove or extract the corresponding rule blocks from global.css, and
add a short header comment in the new file explaining purpose and a reference to
the related ticket/feature for future activation.
| } | ||
|
|
||
| .home-balance-card { | ||
| @apply my-2.5 min-h-50 justify-between gap-5 rounded-bl-4xl rounded-tr-4xl bg-accent p-6; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -name "global.css" -type fRepository: Ericokim/react_native_recurrly
Length of output: 87
🏁 Script executed:
cat -n ./global.cssRepository: Ericokim/react_native_recurrly
Length of output: 10978
🌐 Web query:
Tailwind CSS v4 default border-radius scale 4xl
💡 Result:
Tailwind CSS v4: rounded-4xl uses the radius token var(--radius-4xl), which is 2rem (32px) by default. In Tailwind v4, border-radius utilities are driven by theme CSS variables (for example --radius-4xl). The border-radius docs map rounded-4xl to “var(--radius-4xl); /* 2rem (32px) */”.
Citations:
🌐 Web query:
Tailwind CSS v4 default spacing scale min-h utilities
💡 Result:
In Tailwind CSS v4, the default spacing scale is a multiplier system based on the --spacing CSS variable, which defaults to 0.25rem (4px at the browser's default font size). Spacing and sizing utilities like min-h-, h-, w-, p-, m-* etc. use calc(var(--spacing) * N), where N is the numeric value in the class name. For example: - min-h-0: min-height: calc(var(--spacing) * 0) → 0 - min-h-1: min-height: calc(var(--spacing) * 1) → 0.25rem - min-h-4: min-height: calc(var(--spacing) * 4) → 1rem - min-h-96: min-height: calc(var(--spacing) * 96) → 24rem This applies to all spacing/sizing utilities, including min-h-. Unlike v3's fixed scale, v4 supports any numeric multiplier (including decimals like 1.5), not just predefined steps. The full traditional scale equivalents (where available in v3) map proportionally: - 0: 0 - px: 1px (special case, not multiplier-based) - 0.5: 0.125rem - 1: 0.25rem - 1.5: 0.375rem - 2: 0.5rem - ... - 96: 24rem To customize, override --spacing in @theme { --spacing: 1px; } or define explicit --spacing- variables that take precedence for named scales.
Citations:
- 1: https://tailwindcss.com/docs/min-block-size
- 2: https://tailwindcss.com/docs/height
- 3: https://tailwindcss.com/docs/min-height
- 4: https://tailwindcss.com/docs/theme
- 5: Replace default explicit spacing scale with multiplier system tailwindlabs/tailwindcss#14857
- 6: https://tailwindcss.com/blog/tailwindcss-v4
- 7: https://tailwindcss.com/docs/space
- 8: https://tailwindcss.com/docs/functions-and-directives
🌐 Web query:
Tailwind CSS v4 custom spacing tokens @theme with utilities like min-h
💡 Result:
In Tailwind CSS v4, custom spacing tokens are defined using the @theme directive in your CSS file by setting CSS custom properties with the --spacing-* namespace. These tokens automatically generate corresponding utility classes for spacing, sizing, padding, margin, height, min-height, etc. Example: @import "tailwindcss"; @theme { --spacing-xs: 0.25rem; --spacing-custom: 1.75rem; --spacing-42: 10.5rem; } This enables utilities like: - p-xs, m-xs, h-xs, min-h-xs (padding/margin/height/min-height of 0.25rem) - p-custom, min-h-custom (1.75rem) - gap-42, min-h-42 (10.5rem) The min-h utility specifically uses min-height: var(--spacing-), as confirmed in official docs. By default, Tailwind uses a dynamic scale with --spacing: 0.25rem, making any integer like min-h-7 work as calc(var(--spacing) * 7). Custom named or additional numeric tokens extend this. Note: Width utilities (w-) may fallback to --container-* if no --spacing-* match exists, but --spacing-* takes precedence where defined (fixed in v4 updates). Official sources confirm --spacing-* drives "spacing and sizing utilities like px-4, max-h-16, and many more", explicitly including min-h utilities.
Citations:
- 1: https://tailwindcss.com/docs/theme
- 2: https://tailwindcss.com/docs/min-height
- 3: https://tailwindcss.com/docs/customizing-spacing
- 4: https://tailwindcss.com/blog/tailwindcss-v4
🏁 Script executed:
# Search for usage of the .home-balance-card class in the codebase
rg "home-balance-card" --type js --type jsx --type ts --type tsx -nRepository: Ericokim/react_native_recurrly
Length of output: 102
🏁 Script executed:
# Search for usage of the .home-balance-card class in the codebase
rg "home-balance-card" -nRepository: Ericokim/react_native_recurrly
Length of output: 111
min-h-50 is not a valid utility.
The --spacing-* tokens defined in @theme only include 0-12, 14, 16, 18, 20, 24, and 30 — there is no 50. This class will resolve to nothing at runtime, leaving the balance card without a minimum height.
However, rounded-bl-4xl and rounded-tr-4xl are valid in Tailwind v4 (the default theme includes --radius-4xl as 2rem), so they should not be changed.
🛠️ Proposed fix
- `@apply` my-2.5 min-h-50 justify-between gap-5 rounded-bl-4xl rounded-tr-4xl bg-accent p-6;
+ `@apply` my-2.5 min-h-[200px] justify-between gap-5 rounded-bl-4xl rounded-tr-4xl bg-accent p-6;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @apply my-2.5 min-h-50 justify-between gap-5 rounded-bl-4xl rounded-tr-4xl bg-accent p-6; | |
| `@apply` my-2.5 min-h-[200px] justify-between gap-5 rounded-bl-4xl rounded-tr-4xl bg-accent p-6; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@global.css` at line 86, The utility min-h-50 in the `@apply` rule (the line
containing "@apply my-2.5 min-h-50 justify-between gap-5 rounded-bl-4xl
rounded-tr-4xl bg-accent p-6;") is invalid and resolves to nothing at runtime;
replace it with a valid token such as min-h-30 (matches the defined spacing
tokens) or use an arbitrary value like min-h-[50px] if you need exactly 50px,
keeping the other utilities (rounded-bl-4xl, rounded-tr-4xl) unchanged.
| "expo-symbols": "~1.0.8", | ||
| "expo-system-ui": "~6.0.9", | ||
| "expo-web-browser": "~15.0.10", | ||
| "nativewind": "^5.0.0-preview.3", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Is NativeWind v5 stable released, or is the latest still a preview/beta?
💡 Result:
No, NativeWind v5 stable has not been released as of 2026-04-24. The latest version is still a preview/beta (5.0.0-preview.3, released March 15, 2026). The stable latest release is v4.2.3.
Citations:
- 1: https://github.com/nativewind/nativewind/releases
- 2: https://www.nativewind.dev/blog/v5-migration-guide
- 3: https://www.nativewind.dev/v5
- 4: https://github.com/nativewind/nativewind/releases/tag/5.0.0-preview.3
- 5: https://www.nativewind.dev/v5/getting-started/installation
- 6: https://github.com/nativewind/nativewind
- 7: https://www.npmjs.com/package/nativewind
🏁 Script executed:
head -n 40 package.json | tail -n 15Repository: Ericokim/react_native_recurrly
Length of output: 605
🌐 Web query:
react-native-css version 3.0.6 release status stable or preview
💡 Result:
react-native-css version 3.0.6 is a stable release (not a preview). Evidence: The upstream repository’s changelog lists 3.0.6 as a normal version entry with a release date (3.0.6 (2026-03-20)), and the GitHub “Releases” page shows 3.0.6 published as a standard release (alongside 3.0.7). There is no indication that 3.0.6 was marked as a pre-release/preview; preview language in this project’s release workflow is used for separately-created preview releases (e.g., tagged as “preview” in CI), while 3.0.6 appears in the normal releases list.
Citations:
- 1: https://github.com/nativewind/react-native-css/blob/main/CHANGELOG.md
- 2: https://github.com/nativewind/react-native-css/releases
- 3: nativewind/nativewind@7b805185
Pin exact version for NativeWind preview release; caret is appropriate for react-native-css.
nativewind@^5.0.0-preview.3 is a preview-stage API with risky caret pinning: npm will not automatically pick up later prereleases (e.g., preview.4), yet any resolution change between lockfiles can introduce breaking changes since preview APIs aren't stable. Pin to exact version until NativeWind v5 ships a stable release.
However, react-native-css@^3.0.6 is a stable release (3.0.6 from March 20, 2026), so caret pinning is appropriate and allows safe patch updates.
🔧 Proposed fix
- "nativewind": "^5.0.0-preview.3",
+ "nativewind": "5.0.0-preview.3",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "nativewind": "^5.0.0-preview.3", | |
| "nativewind": "5.0.0-preview.3", |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` at line 31, Update the package.json dependency for NativeWind
to pin the preview release to an exact version: replace the semver caret
specifier "nativewind": "^5.0.0-preview.3" with an exact specifier "nativewind":
"5.0.0-preview.3" so the preview API cannot be inadvertently upgraded; leave
stable packages like "react-native-css" using caret (e.g., "^3.0.6") as-is.
- Implement `TabLayout` using `expo-router` with custom styled tab bar - Configure `RootLayout` with explicit stack screens for tabs, auth, onboarding, and subscription details - Refactor tab screens to use styled `SafeAreaView` from `nativewind` - Add `subscriptions/[id]` dynamic route - Update `package.json` with new dependencies including `@clerk/expo`, `clsx`, `expo-secure-store`, and `posthog-react-native` - Update constants and component entry points
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Summary by CodeRabbit
New Features
Style