Components

NativeLaunch includes a structured set of UI components grouped into three main categories:

• Reusables — components from react-native-reusables, organized in the shared/ui folder
• UI primitives — reusable low-level components
• Widgets — high-level, logic-rich UI blocks

All components are designed to work with Tailwind CSS via NativeWind and follow consistent styling via theme.ts.

Folders overview

widgets/             ← Custom animated and logic-based components
shared/
├── ui/              ← Components from react-native-reusables
├── ui-primitives/   ← Custom layout and interaction components

1. Reusable UI components

The shared/ui folder contains prebuilt components from react-native-reusables. These include common UI elements like Button, Card, Switch, TextField, Checkbox, Tabs, and more — all styled with Tailwind and ready for drop-in use.

import {Button} from '@/shared/ui'

<Button className="bg-primary text-white">
  Continue
</Button>

Adding new reusable components

If a component you need is not included in shared/ui, you can quickly scaffold it using the React Native Reusables CLI:

npx @react-native-reusables/cli@latest add button

This command automatically installs the component, generates its files, and makes it available in shared/ui with full NativeWind + TypeScript support.

2. UI Primitives

Located in shared/ui-primitives, these are small building blocks used throughout the app:

• Sheet — modal bottom sheet (@gorhom/bottom-sheet)
• Skeleton — loading placeholder
• ConfirmationDialog — modal with confirm/cancel
• ExternalLink — consistent styled external anchor
• ColorPicker, DatePicker, MonthYearPicker
• TextTicker, GenericIcon, MenuItem, etc.

import {ConfirmationDialog} from '@/shared/ui-primitives'

<ConfirmationDialog
  title="Are you sure?"
  description="This action cannot be undone."
  onConfirm={() => doSomething()}
/>

3. Widgets

In shared/widgets, you'll find more advanced, logic-based components:

• AnimatedNumber — number counting animation using Reanimated
• LoadingModal — full-screen modal with spinner and status
• DonutChart, CircularProgressBar — data visualizations
• ScreenContent — page layout wrapper
• NumericPad — custom number input for money, PINs, etc.

import {AnimatedNumber} from '@/shared/widgets'

<AnimatedNumber value={4523} />

Best practices

• Use shared/ui for standard elements like buttons and inputs
• Use ui-primitives for layout, control, and display logic
• Use widgets for animated or high-level interactive components
• Everything supports className via NativeWind
• Themes are powered by tokens in theme.ts