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

The component architecture is shared across UI stacks. Components are styled using a utility-first approach and work with both NativeWind and the alternative uniWind setup.

The default stack uses NativeWind, while the uniWind version provides the same component structure adapted for Tailwind CSS v4–powered uniWind.

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.

In the default setup, these components are styled with NativeWind. In the alternative UI stack, they follow the same API but are styled using uniWind, keeping the component usage consistent across stacks.

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 TypeScript support and compatibility with both NativeWind and uniWind.

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
• All components support className in both NativeWind and uniWind
• Themes are powered by shared design tokens