React Native Reusables

https://reactnativereusables.com/docs
Admin
React Native Reusables is a framework that brings the shadcn/ui experience to React Native,...
Tokens:14,184
Snippets:204
Trust Score:5.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Select Component CLI

Source: https://reactnativereusables.com/docs/components/select

Use the CLI to add the Select component to your project. This is the recommended installation method.

```bash
npx @react-native-reusables/cli@latest add select
```

--------------------------------

### Install project dependencies

Source: https://reactnativereusables.com/docs/installation/manual

Install the required animation, utility, and primitive packages using npx.

```bash
npx expo install tailwindcss-animate class-variance-authority clsx tailwind-merge @rn-primitives/portal
```

--------------------------------

### Install Switch Component

Source: https://reactnativereusables.com/docs/components/switch

Use the CLI to add the Switch component to your project.

```bash
npx @react-native-reusables/cli@latest add switch
```

--------------------------------

### Install Text Component

Source: https://reactnativereusables.com/docs/components/text

Use the CLI to add the Text component to your project.

```bash
npx @react-native-reusables/cli@latest add text
```

--------------------------------

### Install Menubar component

Source: https://reactnativereusables.com/docs/components/menubar

Use the CLI to add the Menubar component to your project.

```bash
npx @react-native-reusables/cli@latest add menubar
```

--------------------------------

### Install New Icon Component

Source: https://reactnativereusables.com/docs/changelog

Install the new, unified Icon component using the CLI. This replaces older icon implementations.

```bash
npx @react-native-reusables/cli@latest add icon
```

--------------------------------

### Install Progress Component

Source: https://reactnativereusables.com/docs/components/progress

Use the CLI to add the Progress component to your project.

```bash
npx @react-native-reusables/cli@latest add progress
```

--------------------------------

### Install Alert Component

Source: https://reactnativereusables.com/docs/components/alert

Use the CLI to add the Alert component to your project.

```bash
npx @react-native-reusables/cli@latest add alert
```

--------------------------------

### Install Badge Component

Source: https://reactnativereusables.com/docs/components/badge

Use the CLI to add the Badge component to your project.

```bash
npx @react-native-reusables/cli@latest add badge
```

--------------------------------

### Install Aspect Ratio Component

Source: https://reactnativereusables.com/docs/components/aspect-ratio

Use this command to add the Aspect Ratio component to your project. Ensure you have npx, bun, pnpm, or yarn installed.

```bash
npx @react-native-reusables/cli@latest add aspect-ratio
```

--------------------------------

### Install Collapsible Component CLI

Source: https://reactnativereusables.com/docs/components/collapsible

Use the CLI to add the collapsible component to your project. Ensure you have npx, npm, or yarn installed.

```bash
npx @react-native-reusables/cli@latest add collapsible
```

--------------------------------

### Install Dialog Component

Source: https://reactnativereusables.com/docs/components/dialog

Use the CLI to add the Dialog component to your project.

```bash
npx @react-native-reusables/cli@latest add dialog
```

--------------------------------

### Install Input Component

Source: https://reactnativereusables.com/docs/components/input

Use this command to add the Input component to your project. Ensure you have the React Native Reusables CLI installed.

```bash
npx @react-native-reusables/cli@latest add input
```

--------------------------------

### Install Button Component

Source: https://reactnativereusables.com/docs/components/button

Use the React Native Reusables CLI to add the button component to your project. This command handles the necessary setup.

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

--------------------------------

### Install Tabs Component

Source: https://reactnativereusables.com/docs/components/tabs

Use the CLI to add the Tabs component to your project.

```bash
npx @react-native-reusables/cli@latest add tabs
```

--------------------------------

### Install Sign In Form via CLI

Source: https://reactnativereusables.com/docs/blocks/authentication/sign-in-form

Use the CLI to add the sign-in form component to your project.

```bash
npx @react-native-reusables/cli@latest add sign-in-form
```

--------------------------------

### Install Card Component via CLI

Source: https://reactnativereusables.com/docs/components/card

Use the CLI to add the Card component to your project.

```bash
npx @react-native-reusables/cli@latest add card
```

--------------------------------

### Install Label Component

Source: https://reactnativereusables.com/docs/components/label

Use the React Native Reusables CLI to add the label component to your project. This command handles the necessary setup for the component.

```bash
npx @react-native-reusables/cli@latest add label
```

--------------------------------

### Install Context Menu CLI

Source: https://reactnativereusables.com/docs/components/context-menu

Use this command to add the context-menu component to your project via the CLI.

```bash
npx @react-native-reusables/cli@latest add context-menu
```

--------------------------------

### Install Popover via CLI

Source: https://reactnativereusables.com/docs/components/popover

Use the CLI to add the Popover component to your project.

```bash
npx @react-native-reusables/cli@latest add popover
```

--------------------------------

### Install React Native Reusables CLI

Source: https://reactnativereusables.com/docs/create-your-own-registry

Use this command to install React Native Reusables components from your custom registry. Ensure you replace the localhost URL with your registry's actual URL.

```bash
npx @react-native-reusables/cli@latest add http://localhost:3000/r/hello-world.json
```

--------------------------------

### Install User Menu via CLI

Source: https://reactnativereusables.com/docs/blocks/authentication/user-menu

Use the CLI to add the UserMenu component to your project.

```bash
npx @react-native-reusables/cli@latest add user-menu
```

--------------------------------

### Install Social Connections CLI

Source: https://reactnativereusables.com/docs/blocks/authentication/social-connections

Use this command to add the social-connections component to your project.

```bash
npx @react-native-reusables/cli@latest add social-connections
```

--------------------------------

### Install Hover Card via CLI

Source: https://reactnativereusables.com/docs/components/hover-card

Use the CLI to add the Hover Card component to your project.

```bash
npx @react-native-reusables/cli@latest add hover-card
```

--------------------------------

### Check Project Setup with Doctor

Source: https://reactnativereusables.com/docs/cli

Use the doctor command to check your project setup and diagnose potential issues. It helps ensure everything is configured correctly for React Native Reusables.

```bash
npx @react-native-reusables/cli@latest doctor
```

--------------------------------

### Example Usage of Icon Component

Source: https://reactnativereusables.com/docs/changelog

Demonstrates how to use the new Icon component with a specific Lucide icon and styling.

```javascript
// Example usage
import { Icon } from '@/components/ui/icon';
import { HeartIcon } from 'lucide-react-native';

<Icon as={HeartIcon} className="size-4 text-red-500" />

```

--------------------------------

### Install Textarea via CLI

Source: https://reactnativereusables.com/docs/components/textarea

Use the CLI to automatically add the Textarea component to your project.

```bash
npx @react-native-reusables/cli@latest add textarea
```

--------------------------------

### Install Verify Email Form

Source: https://reactnativereusables.com/docs/blocks/authentication/verify-email-form

Use this command to add the verify-email-form component to your project.

```bash
npx @react-native-reusables/cli@latest add verify-email-form
```

--------------------------------

### Initialize New Expo Project with CLI

Source: https://reactnativereusables.com/docs/cli

Use this command to scaffold a new Expo project using a specified template. Ensure you have npm, bun, pnpm, or yarn installed.

```bash
npx @react-native-reusables/cli@latest init
```

--------------------------------

### Install Tooltip Component CLI

Source: https://reactnativereusables.com/docs/components/tooltip

Use the CLI to add the tooltip component to your project. Ensure you are using the latest version.

```bash
npx @react-native-reusables/cli@latest add tooltip
```

--------------------------------

### Install Accordion Component

Source: https://reactnativereusables.com/docs/components/accordion

Use this command to add the accordion component to your project via the CLI.

```bash
npx @react-native-reusables/cli@latest add accordion
```

--------------------------------

### Install Toggle Group Component

Source: https://reactnativereusables.com/docs/components/toggle-group

Use this command to add the Toggle Group component to your project.

```bash
npx @react-native-reusables/cli@latest add toggle-group
```

--------------------------------

### Install Checkbox Component

Source: https://reactnativereusables.com/docs/components/checkbox

Use the React Native Reusables CLI to add the checkbox component to your project. This command-line installation is the recommended approach.

```bash
npx @react-native-reusables/cli@latest add checkbox
```

--------------------------------

### Install Skeleton Component

Source: https://reactnativereusables.com/docs/components/skeleton

Use the React Native Reusables CLI to add the Skeleton component to your project. This command installs the necessary package and configures it for your project.

```bash
npx @react-native-reusables/cli@latest add skeleton
```

--------------------------------

### Install Avatar Component

Source: https://reactnativereusables.com/docs/components/avatar

Use the React Native Reusables CLI to add the Avatar component to your project. This command handles necessary installations and configurations.

```bash
npx @react-native-reusables/cli@latest add avatar
```

--------------------------------

### Initialize New Project with Uniwind Template

Source: https://reactnativereusables.com/docs/changelog

Use this command to start a new React Native Reusables project with the minimal-uniwind template.

```bash
npx @react-native-reusables/cli@latest init -t minimal-uniwind
```

--------------------------------

### Install Reset Password Form

Source: https://reactnativereusables.com/docs/blocks/authentication/reset-password-form

Use this command to add the reset password form to your project.

```bash
npx @react-native-reusables/cli@latest add reset-password-form
```

--------------------------------

### Install Separator Component

Source: https://reactnativereusables.com/docs/components/separator

Use the React Native Reusables CLI to add the Separator component to your project. This command installs the necessary package and integrates it into your codebase.

```bash
npx @react-native-reusables/cli@latest add separator
```

--------------------------------

### Verify installation with doctor command

Source: https://reactnativereusables.com/docs/installation/manual

Runs a diagnostic check to ensure the project environment is correctly configured.

```bash
npx @react-native-reusables/cli@latest doctor
```

--------------------------------

### Install Radio Group via CLI

Source: https://reactnativereusables.com/docs/components/radio-group

Use the CLI to add the Radio Group component to your project.

```bash
npx @react-native-reusables/cli@latest add radio-group
```

--------------------------------

### Install Sign Up Form Component

Source: https://reactnativereusables.com/docs/blocks/authentication/sign-up-form

Use this command to add the sign-up form component to your React Native project.

```bash
npx @react-native-reusables/cli@latest add sign-up-form
```

--------------------------------

### Install Dropdown Menu CLI

Source: https://reactnativereusables.com/docs/components/dropdown-menu

Use the React Native Reusables CLI to add the dropdown-menu component to your project.

```bash
npx @react-native-reusables/cli@latest add dropdown-menu
```

--------------------------------

### Install Toggle Component

Source: https://reactnativereusables.com/docs/components/toggle

Use the React Native Reusables CLI to add the Toggle component to your project.

```bash
npx @react-native-reusables/cli@latest add toggle
```

--------------------------------

### Basic Alert Dialog Example

Source: https://reactnativereusables.com/docs/components/alert-dialog

A standard implementation of the Alert Dialog component, including title, description, cancel, and action buttons.

```typescript
<AlertDialog>
  <AlertDialogTrigger>
    <Text>Show Alert Dialog</Text>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account and remove
        your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>
        <Text>Cancel</Text>
      </AlertDialogCancel>
      <AlertDialogAction>
        <Text>Continue</Text>
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

--------------------------------

### Install Forgot Password Form

Source: https://reactnativereusables.com/docs/blocks/authentication/forgot-password-form

Use the CLI to add the Forgot Password form component to your project.

```bash
npx @react-native-reusables/cli@latest add forgot-password-form
```

--------------------------------

### Install Alert Dialog CLI

Source: https://reactnativereusables.com/docs/components/alert-dialog

Use the React Native Reusables CLI to add the alert-dialog component to your project.

```bash
npx @react-native-reusables/cli@latest add alert-dialog
```

--------------------------------

### Basic Dropdown Menu Usage

Source: https://reactnativereusables.com/docs/components/dropdown-menu

A simple example of a Dropdown Menu with a trigger, label, separator, and menu items. This component relies on a PortalHost for correct rendering on native platforms.

```typescript
<DropdownMenu>
  <DropdownMenuTrigger>
    <Text>Open</Text>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>
      <Text>My Account</Text>
    </DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <Text>Profile</Text>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Text>Team</Text>
    </DropdownMenuItem> 
  </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Enable Debugging with Log Level

Source: https://reactnativereusables.com/docs/cli

Run any CLI command with the `--log-level all` flag to get detailed information for debugging and creating bug reports. This is useful for diagnosing complex issues.

```bash
npx @react-native-reusables/cli@latest --log-level all [command] [options] [...args]
```

--------------------------------

### Basic Accordion Usage

Source: https://reactnativereusables.com/docs/components/accordion

Render a basic collapsible accordion with a single item. This example demonstrates how to structure the Accordion, AccordionItem, AccordionTrigger, and AccordionContent components.

```jsx
<Accordion type='single' collapsible>
  <AccordionItem value='item-1'>
    <AccordionTrigger>
      <Text>Is it accessible?</Text>
    </AccordionTrigger>
    <AccordionContent>
      <Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

--------------------------------

### Basic Input Component Usage

Source: https://reactnativereusables.com/docs/components/input

Render the Input component in your React Native application. This is a basic example without any props.

```javascript
<Input />
```

--------------------------------

### Initialize project with Clerk authentication

Source: https://reactnativereusables.com/docs/blocks/authentication

Use the CLI to scaffold a new project with pre-configured Clerk authentication blocks.

```bash
npx @react-native-reusables/cli@latest init -t clerk-auth
```

--------------------------------

### Usage Example: Multi-Select Toggle Group

Source: https://reactnativereusables.com/docs/components/toggle-group

Demonstrates how to use the ToggleGroup component with multiple selections enabled. Requires React's useState hook for managing the selected values.

```javascript
  const [value, setValue] = React.useState<string[]>([]);
  return (
    <ToggleGroup value={value} onValueChange={setValue} variant='outline' type='multiple'>
      <ToggleGroupItem isFirst value='bold' aria-label='Toggle bold'>
        <ToggleGroupIcon as={Bold} />
      </ToggleGroupItem>
      <ToggleGroupItem value='italic' aria-label='Toggle italic'>
        <ToggleGroupIcon as={Italic} />
      </ToggleGroupItem>
      <ToggleGroupItem isLast value='strikethrough' aria-label='Toggle strikethrough'>
        <ToggleGroupIcon as={Underline} />
      </ToggleGroupItem>
    </ToggleGroup>
  );
```

--------------------------------

### Render Skeleton Component

Source: https://reactnativereusables.com/docs/components/skeleton

Use the Skeleton component to display a placeholder. Apply Tailwind CSS classes for styling, such as height, width, and border-radius. This example shows a rounded full-width skeleton.

```javascript
<Skeleton className="h-[20px] w-[100px] rounded-full" />

```

--------------------------------

### Render Checkbox Component

Source: https://reactnativereusables.com/docs/components/checkbox

Render the Checkbox component in your React Native application. This is a basic usage example without any additional props.

```javascript
<Checkbox />

```

--------------------------------

### Scrollable Select Component (Native)

Source: https://reactnativereusables.com/docs/components/select

Implement a scrollable Select component for native platforms using `react-native-gesture-handler`. This example shows how to conditionally render the ScrollView.

```typescript
import { ScrollView } from 'react-native-gesture-handler';
/**
 * @platform Native only
 * Returns the children on the web
 */
function NativeSelectScrollView({ className, ...props }: React.ComponentProps<typeof ScrollView>) {
  if (Platform.OS === 'web') {
    return <>{props.children}</>;
  }
  return <ScrollView className={cn('max-h-52', className)} {...props} />;
}

```

--------------------------------

### Create components.json configuration

Source: https://reactnativereusables.com/docs/installation/manual

Defines the project structure, styling preferences, and path aliases for the CLI.

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "global.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}
```

--------------------------------

### Add Components (Interactive Prompt)

Source: https://reactnativereusables.com/docs/changelog

When no component name is provided, the CLI prompts for a multi-select list of components to add. This is a streamlined way to add multiple components at once.

```bash
npx @react-native-reusables/cli@latest add
```

--------------------------------

### Import Tooltip Components

Source: https://reactnativereusables.com/docs/components/tooltip

Import the necessary Tooltip components and Text from the UI library. A PortalHost is required for native rendering.

```javascript
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { Text } from "@/components/ui/text"
```

--------------------------------

### Import Context Menu Components

Source: https://reactnativereusables.com/docs/components/context-menu

Import the necessary components for the Context Menu. Ensure a PortalHost is set up at the root of your app for native platforms.

```javascript
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from '@/components/ui/context-menu';
import { Text } from '@/components/ui/text';
```

--------------------------------

### Import Menubar components

Source: https://reactnativereusables.com/docs/components/menubar

Import the necessary sub-components from the UI library.

```typescript
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"
import { Text } from '@/components/ui/text';
```

--------------------------------

### Import Dropdown Menu Components

Source: https://reactnativereusables.com/docs/components/dropdown-menu

Import necessary components for the Dropdown Menu from the UI library. Ensure a PortalHost is set up at the root of your app for native rendering.

```typescript
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Text } from '@/components/ui/text';
```

--------------------------------

### Implement Menubar component

Source: https://reactnativereusables.com/docs/components/menubar

Structure the Menubar with triggers, content, and items.

```jsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>
      <Text>File</Text>
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <Text>New Tab</Text> <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        <Text>New Window</Text>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        <Text>Share</Text>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        <Text>Print</Text>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

--------------------------------

### Add Components with CLI

Source: https://reactnativereusables.com/docs/changelog

Add components to your project using the CLI. The CLI automatically detects and adds Uniwind versions if a `uniwind-types.d.ts` file is present.

```bash
npx @react-native-reusables/cli@latest add [...components]
```

--------------------------------

### Basic Context Menu Usage

Source: https://reactnativereusables.com/docs/components/context-menu

Render a basic context menu with a trigger and several menu items. This component relies on a PortalHost for rendering on native platforms.

```javascript
<ContextMenu>
  <ContextMenuTrigger>
    <Text>Right click</Text>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      <Text>Profile</Text>
    </ContextMenuItem>
    <ContextMenuItem>
      <Text>Billing</Text>
    </ContextMenuItem>
    <ContextMenuItem>
      <Text>Team</Text>
    </ContextMenuItem>
    <ContextMenuItem>
      <Text>Subscription</Text>
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

--------------------------------

### Import Aspect Ratio Component

Source: https://reactnativereusables.com/docs/components/aspect-ratio

Import the AspectRatio and Text components from the '@/components/ui' directory before using them in your application.

```javascript
import { AspectRatio } from '@/components/ui/aspect-ratio';
import { Text } from '@/components/ui/text';
```

--------------------------------

### Basic Button Usage

Source: https://reactnativereusables.com/docs/components/button

Import and use the Button and Text components to render a standard button. Ensure both components are imported from '@/components/ui/button' and '@/components/ui/text' respectively.

```jsx
import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';
```

```jsx
<Button>
  <Text>Button</Text>
</Button>
```

--------------------------------

### Import Select Components

Source: https://reactnativereusables.com/docs/components/select

Import the necessary components for the Select element. Ensure a PortalHost is set up at the root of your app for native platforms.

```typescript
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

```

--------------------------------

### Import Badge Components

Source: https://reactnativereusables.com/docs/components/badge

Import the Badge and Text components to begin using them in your application.

```typescript
import { Badge } from '@/components/ui/badge';
import { Text } from '@/components/ui/text';
```

--------------------------------

### Import and Use SignInForm

Source: https://reactnativereusables.com/docs/blocks/authentication/sign-in-form

Import the component and integrate it into a screen within a ScrollView for proper keyboard handling.

```tsx
import { SignInForm } from '@/components/sign-in-form';
import { ScrollView, View } from 'react-native';
 
export default function SignInScreen() {
  return (
    <ScrollView
      keyboardShouldPersistTaps="handled"
      contentContainerClassName="sm:flex-1 items-center justify-center p-4 py-8 sm:py-4 sm:p-6 mt-safe"
      keyboardDismissMode="interactive">
      <View className="w-full max-w-sm">
        <SignInForm />
      </View>
    </ScrollView>
  );
}
```

--------------------------------

### Import Progress Component

Source: https://reactnativereusables.com/docs/components/progress

Import the component from your local UI directory.

```typescript
import { Progress } from "@/components/ui/progress"
```

--------------------------------

### Import Alert Dialog Components

Source: https://reactnativereusables.com/docs/components/alert-dialog

Import necessary components for the Alert Dialog. A PortalHost is required for native platforms.

```typescript
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Text } from '@/components/ui/text';
```

--------------------------------

### Implement Alert Component

Source: https://reactnativereusables.com/docs/components/alert

Basic implementation of the Alert component with an icon, title, and description.

```jsx
<Alert icon={Terminal}>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can use a terminal to run commands on your computer.
  </AlertDescription>
</Alert>
```

--------------------------------

### Import Avatar Components

Source: https://reactnativereusables.com/docs/components/avatar

Import the necessary Avatar components and the Text component from the '@/components/ui' directory to use the Avatar component.

```javascript
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Text } from '@/components/ui/text';
```

--------------------------------

### Import and Use SignUpForm in React Native

Source: https://reactnativereusables.com/docs/blocks/authentication/sign-up-form

Import the `SignUpForm` component and render it within a `ScrollView` for a mobile-friendly experience. Ensure `keyboardShouldPersistTaps` is set to 'handled' and `keyboardDismissMode` to 'interactive' for optimal keyboard behavior.

```typescript
import { SignUpForm } from '@/components/sign-up-form';
import { ScrollView, View } from 'react-native';
 
export default function SignUpScreen() {
  return (
    <ScrollView
      keyboardShouldPersistTaps="handled"
      contentContainerClassName="sm:flex-1 items-center justify-center p-4 py-8 sm:py-4 sm:p-6 mt-safe"
      keyboardDismissMode="interactive">
      <View className="w-full max-w-sm">
        <SignUpForm />
      </View>
    </ScrollView>
  );
}
```

--------------------------------

### Import Switch Component

Source: https://reactnativereusables.com/docs/components/switch

Import the Switch component from the local UI components directory.

```typescript
import { Switch } from "@/components/ui/switch"
```

--------------------------------

### Import Hover Card Components

Source: https://reactnativereusables.com/docs/components/hover-card

Import the necessary Hover Card components from the UI library.

```typescript
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
import { Text } from '@/components/ui/text';
```

--------------------------------

### Basic Tooltip Usage

Source: https://reactnativereusables.com/docs/components/tooltip

Render a Tooltip with a trigger element and content. The content appears when the trigger receives focus or hover.

```javascript
<Tooltip>
  <TooltipTrigger><Text>Hover</Text></TooltipTrigger>
  <TooltipContent>
    <Text>Add to library</Text>
  </TooltipContent>
</Tooltip>
```

--------------------------------

### Import Popover Components

Source: https://reactnativereusables.com/docs/components/popover

Import the necessary components from the UI library to use the Popover.

```typescript
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Text } from '@/components/ui/text';
```

--------------------------------

### Import Dialog Components

Source: https://reactnativereusables.com/docs/components/dialog

Import the necessary sub-components from the UI library to construct a dialog.

```typescript
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
```

--------------------------------

### Import Alert Components

Source: https://reactnativereusables.com/docs/components/alert

Import the necessary Alert components and icons for usage.

```typescript
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Terminal } from '@/lib/icons/Terminal';
```

--------------------------------

### Import Toggle Component

Source: https://reactnativereusables.com/docs/components/toggle

Import the Toggle component from the '@/components/ui/toggle' path.

```javascript
import { Toggle } from "@/components/ui/toggle"
```

--------------------------------

### Import and Use VerifyEmailForm Component

Source: https://reactnativereusables.com/docs/blocks/authentication/verify-email-form

Import the VerifyEmailForm component and include it within your screen structure. Ensure to wrap it in a ScrollView for proper keyboard handling and layout.

```typescript
import { VerifyEmailForm } from '@/components/verify-email-form';
import { ScrollView, View } from 'react-native';
 
export default function VerifyEmailScreen() {
  return (
    <ScrollView
      keyboardShouldPersistTaps="handled"
      contentContainerClassName="sm:flex-1 items-center justify-center p-4 py-8 sm:py-4 sm:p-6 mt-safe"
      keyboardDismissMode="interactive">
      <View className="w-full max-w-sm">
        <VerifyEmailForm />
      </View>
    </ScrollView>
  );
}
```

--------------------------------

### Import Accordion Components

Source: https://reactnativereusables.com/docs/components/accordion

Import the necessary Accordion components and the Text component from the UI library. These are required to render the Accordion structure.

```javascript
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { Text } from '@/components/ui/text';
```

--------------------------------

### Import Text Component

Source: https://reactnativereusables.com/docs/components/text

Import the Text component from the local components directory.

```typescript
import { Text } from "@/components/ui/text"
```

--------------------------------

### Import Collapsible Components

Source: https://reactnativereusables.com/docs/components/collapsible

Import the necessary Collapsible components and Text component from the UI library. These are required to render the collapsible element.

```javascript
import { Collapsible } from "@/components/ui/collapsible"
import { Text } from "@/components/ui/text"
```

--------------------------------

### Basic Text Usage

Source: https://reactnativereusables.com/docs/components/text

Render a simple text element.

```jsx
<Text>Hello, world!</Text>
```

--------------------------------

### Import Textarea Component

Source: https://reactnativereusables.com/docs/components/textarea

Import the Textarea component from the local UI components directory.

```typescript
import { Textarea } from "@/components/ui/textarea"
```

--------------------------------

### Implement Card Component

Source: https://reactnativereusables.com/docs/components/card

Structure the Card using its header, content, and footer sub-components.

```jsx
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <Text>Card Content</Text>
  </CardContent>
  <CardFooter>
    <Text>Card Footer</Text>
  </CardFooter>
</Card>
```

--------------------------------

### Use Aspect Ratio Component

Source: https://reactnativereusables.com/docs/components/aspect-ratio

Render the AspectRatio component with a specified ratio and apply styling for height, width, and alignment. The content, in this case, a Text component, will be displayed within the defined aspect ratio.

```javascript
<AspectRatio ratio={16 / 9} className='h-full w-full justify-center items-center'>
  <Text>16:9</Text>
</AspectRatio>
```

--------------------------------

### Add PortalHost to root layout

Source: https://reactnativereusables.com/docs/installation/manual

Render the PortalHost component in the root layout to support components like DropdownMenu and Tooltip.

```tsx
 <ThemeProvider value={NAV_THEME[colorScheme]}>
   <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
   <Stack />
+  <PortalHost />
 </ThemeProvider>
```

--------------------------------

### Render Switch Component

Source: https://reactnativereusables.com/docs/components/switch

Basic implementation of the Switch component.

```jsx
<Switch />
```

--------------------------------

### Import Card Components

Source: https://reactnativereusables.com/docs/components/card

Import the necessary sub-components from the UI library.

```typescript
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Text } from '@/components/ui/text';
```

--------------------------------

### Configure path aliases

Source: https://reactnativereusables.com/docs/installation/manual

Define path aliases in tsconfig.json to simplify imports.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

--------------------------------

### Implement Popover Component

Source: https://reactnativereusables.com/docs/components/popover

Basic structure for implementing a Popover with a trigger and content.

```jsx
<Popover>
  <PopoverTrigger>
    <Text>Open</Text>
  </PopoverTrigger>
  <PopoverContent>
    <Text>Place content for the popover here.</Text>
  </PopoverContent>
</Popover>
```

--------------------------------

### Define global CSS variables

Source: https://reactnativereusables.com/docs/installation/manual

Configure Tailwind CSS base layers and theme variables in global.css.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 63%;
    --radius: 0.625rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }
 
  .dark:root {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 70.9% 59.4%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 300 0% 45%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}
```

--------------------------------

### Basic Select Component Usage

Source: https://reactnativereusables.com/docs/components/select

Render a basic Select component with a placeholder and a group of selectable items. Customize the trigger and content with Tailwind CSS classes.

```typescript
 <Select>
  <SelectTrigger className='w-[180px]'>
    <SelectValue placeholder='Select a fruit' />
  </SelectTrigger>
  <SelectContent insets={contentInsets} className='w-[180px]'>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem label='Apple' value='apple'>
        Apple
      </SelectItem>
      <SelectItem label='Banana' value='banana'>
        Banana
      </SelectItem>
      <SelectItem label='Blueberry' value='blueberry'>
        Blueberry
      </SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

```

--------------------------------

### Import Tabs Components

Source: https://reactnativereusables.com/docs/components/tabs

Import the necessary components and React hooks to implement the tabs functionality.

```typescript
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import * as React from 'react';
```

--------------------------------

### Basic Badge Usage

Source: https://reactnativereusables.com/docs/components/badge

Wrap a Text component inside a Badge component to display it.

```jsx
<Badge>
  <Text>Badge</Text>
</Badge>
```

--------------------------------

### Implement Hover Card

Source: https://reactnativereusables.com/docs/components/hover-card

Basic implementation of the Hover Card component with a trigger and content.

```jsx
<HoverCard>
  <HoverCardTrigger>
    <Text>Hover</Text>
  </HoverCardTrigger>
  <HoverCardContent>
    <Text>The React Framework – created and maintained by @vercel.</Text>
  </HoverCardContent>
</HoverCard>
```

--------------------------------

### Import Badge Variants

Source: https://reactnativereusables.com/docs/components/badge

Import the variant helpers to apply specific styles to components.

```typescript
import { badgeVariants, badgeTextVariants } from "@/components/ui/badge"
```

--------------------------------

### Import Checkbox Component

Source: https://reactnativereusables.com/docs/components/checkbox

Import the Checkbox component from the '@/components/ui/checkbox' path. Ensure your project is configured to resolve aliases correctly.

```javascript
import { Checkbox } from "@/components/ui/checkbox"

```

--------------------------------

### Render Textarea Component

Source: https://reactnativereusables.com/docs/components/textarea

Basic implementation of the Textarea component with a placeholder.

```tsx
<Textarea placeholder="Type your message here." />
```

--------------------------------

### Implement Dialog Usage

Source: https://reactnativereusables.com/docs/components/dialog

Structure the Dialog component using the imported sub-components to create an interactive modal.

```jsx
<Dialog>
  <DialogTrigger>
    <Text>Open</Text>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

--------------------------------

### Import Toggle Group Components

Source: https://reactnativereusables.com/docs/components/toggle-group

Import necessary components from 'lucide-react-native' and '@/components/ui/toggle-group'.

```javascript
import { Bold, Italic, Underline } from 'lucide-react-native';
import { ToggleGroup, ToggleGroupIcon, ToggleGroupItem } from '@/components/ui/toggle-group';
import * as React from 'react';
```

--------------------------------

### Basic Collapsible Usage

Source: https://reactnativereusables.com/docs/components/collapsible

Implement a basic collapsible UI element by wrapping content with CollapsibleTrigger and CollapsibleContent. The trigger displays a text, and the content reveals another text upon interaction.

```javascript
<Collapsible>
  <CollapsibleTrigger>
    <Text>Can I use this in my project?</Text>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <Text>Yes. Free to use for personal and commercial projects. No attribution required.</Text>
  </CollapsibleContent>
</Collapsible>
```

--------------------------------

### Define Theme Colors

Source: https://reactnativereusables.com/docs/installation/manual

Sets up light and dark theme color palettes and navigation theme integration for Expo Router.

```typescript
import { DarkTheme, DefaultTheme, type Theme } from 'expo-router/react-navigation';
 
export const THEME = {
  light: {
    background: 'hsl(0 0% 100%)',
    foreground: 'hsl(0 0% 3.9%)',
    card: 'hsl(0 0% 100%)',
    cardForeground: 'hsl(0 0% 3.9%)',
    popover: 'hsl(0 0% 100%)',
    popoverForeground: 'hsl(0 0% 3.9%)',
    primary: 'hsl(0 0% 9%)',
    primaryForeground: 'hsl(0 0% 98%)',
    secondary: 'hsl(0 0% 96.1%)',
    secondaryForeground: 'hsl(0 0% 9%)',
    muted: 'hsl(0 0% 96.1%)',
    mutedForeground: 'hsl(0 0% 45.1%)',
    accent: 'hsl(0 0% 96.1%)',
    accentForeground: 'hsl(0 0% 9%)',
    destructive: 'hsl(0 84.2% 60.2%)',
    border: 'hsl(0 0% 89.8%)',
    input: 'hsl(0 0% 89.8%)',
    ring: 'hsl(0 0% 63%)',
    radius: '0.625rem',
    chart1: 'hsl(12 76% 61%)',
    chart2: 'hsl(173 58% 39%)',
    chart3: 'hsl(197 37% 24%)',
    chart4: 'hsl(43 74% 66%)',
    chart5: 'hsl(27 87% 67%)',
  },
  dark: {
    background: 'hsl(0 0% 3.9%)',
    foreground: 'hsl(0 0% 98%)',
    card: 'hsl(0 0% 3.9%)',
    cardForeground: 'hsl(0 0% 98%)',
    popover: 'hsl(0 0% 3.9%)',
    popoverForeground: 'hsl(0 0% 98%)',
    primary: 'hsl(0 0% 98%)',
    primaryForeground: 'hsl(0 0% 9%)',
    secondary: 'hsl(0 0% 14.9%)',
    secondaryForeground: 'hsl(0 0% 98%)',
    muted: 'hsl(0 0% 14.9%)',
    mutedForeground: 'hsl(0 0% 63.9%)',
    accent: 'hsl(0 0% 14.9%)',
    accentForeground: 'hsl(0 0% 98%)',
    destructive: 'hsl(0 70.9% 59.4%)',
    border: 'hsl(0 0% 14.9%)',
    input: 'hsl(0 0% 14.9%)',
    ring: 'hsl(300 0% 45%)',
    radius: '0.625rem',
    chart1: 'hsl(220 70% 50%)',
    chart2: 'hsl(160 60% 45%)',
    chart3: 'hsl(30 80% 55%)',
    chart4: 'hsl(280 65% 60%)',
    chart5: 'hsl(340 75% 55%)',
  },
};
 
export const NAV_THEME: Record<'light' | 'dark', Theme> = {
  light: {
    ...DefaultTheme,
    colors: {
      background: THEME.light.background,
      border: THEME.light.border,
      card: THEME.light.card,
      notification: THEME.light.destructive,
      primary: THEME.light.primary,
      text: THEME.light.foreground,
    },
  },
  dark: {
    ...DarkTheme,
    colors: {
      background: THEME.dark.background,
      border: THEME.dark.border,
      card: THEME.dark.card,
      notification: THEME.dark.destructive,
      primary: THEME.dark.primary,
      text: THEME.dark.foreground,
    },
  },
};
```

--------------------------------

### Basic Avatar Usage

Source: https://reactnativereusables.com/docs/components/avatar

Render the Avatar component with an image source and fallback text. The 'alt' prop provides accessibility information.

```javascript
<Avatar alt="Zach Nugent's Avatar">
  <AvatarImage source={{ uri: 'https://github.com/mrzachnugent.png' }} />
  <AvatarFallback>
    <Text>ZN</Text>
  </AvatarFallback>
</Avatar>
```

--------------------------------

### Implement User Menu in Screen

Source: https://reactnativereusables.com/docs/blocks/authentication/user-menu

Import and render the UserMenu component within a React Native view.

```tsx
import { UserMenu } from '@/components/user-menu';
import { View } from 'react-native';
 
export default function UserMenuScreen() {
  return (
    <View className='flex-1 items-center justify-center'>
      <UserMenu />
    </View>
  );
}
```

--------------------------------

### Import Input Component

Source: https://reactnativereusables.com/docs/components/input

Import the Input component from the specified path in your React Native project.

```javascript
import { Input } from "@/components/ui/input"
```

--------------------------------

### Render Progress Component

Source: https://reactnativereusables.com/docs/components/progress

Display the progress bar by passing a value prop.

```jsx
<Progress value={33} />
```

--------------------------------

### Import and Use Reset Password Form

Source: https://reactnativereusables.com/docs/blocks/authentication/reset-password-form

Import the ResetPasswordForm component and include it in your screen. Ensure to wrap it in a ScrollView for proper layout and keyboard handling.

```typescript
import { ResetPasswordForm } from '@/components/reset-password-form';
import { ScrollView, View } from 'react-native';
 
export default function ResetPasswordScreen() {
  return (
    <ScrollView
      keyboardShouldPersistTaps="handled"
      contentContainerClassName="sm:flex-1 items-center justify-center p-4 py-8 sm:py-4 sm:p-6 mt-safe"
      keyboardDismissMode="interactive">
      <View className="w-full max-w-sm">
        <ResetPasswordForm />
      </View>
    </ScrollView>
  );
}
```

--------------------------------

### Implement Radio Group

Source: https://reactnativereusables.com/docs/components/radio-group

Basic implementation of a Radio Group with multiple selectable items.

```jsx
<RadioGroup defaultValue="comfortable">
  <View className="flex flex-row items-center gap-3">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </View>
  <View className="flex flex-row items-center gap-3">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </View>
  <View className="flex flex-row items-center gap-3">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </View>
</RadioGroup>
```

--------------------------------

### Basic Toggle Usage

Source: https://reactnativereusables.com/docs/components/toggle

Implement a basic Toggle component using React's useState hook to manage its pressed state.

```javascript
const [pressed, setPressed] = React.useState(false);

return (
  <Toggle pressed={pressed} onPressedChange={setPressed} />
)
```

--------------------------------

### Configure Tailwind CSS

Source: https://reactnativereusables.com/docs/installation/manual

Defines the Tailwind configuration including presets, custom colors, border radii, and animation keyframes.

```javascript
const { hairlineWidth } = require('nativewind/theme');
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      borderWidth: {
        hairline: hairlineWidth(),
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  future: {
    hoverOnlyWhenSupported: true,
  },
  plugins: [require('tailwindcss-animate')],
};
```

--------------------------------

### Import Radio Group Components

Source: https://reactnativereusables.com/docs/components/radio-group

Required imports for implementing the Radio Group and its associated label.

```typescript
import { View } from "react-native"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
```

--------------------------------

### Create Link-like Buttons

Source: https://reactnativereusables.com/docs/components/button

Utilize `buttonVariants` and `buttonTextVariants` to style a Link component to resemble a button. This is useful for creating clickable elements that fit the button's aesthetic.

```jsx
import { buttonVariants, buttonTextVariants } from "@/components/ui/button"

```

```jsx
<Link className={buttonVariants({ variant: 'outline' }) }>
  <Text className={buttonTextVariants({ variant: 'outline' })} >Click here</Text>
</Link>
```

--------------------------------

### Update Components with Add Command

Source: https://reactnativereusables.com/docs/changelog

Use this command to update your components after running the doctor command. The --overwrite flag ensures all components are updated. Always commit your changes before running this command and review the diff.

```bash
npx @react-native-reusables/cli@latest add --overwrite [...components]
```

--------------------------------

### Configure Tailwind CSS Animations

Source: https://reactnativereusables.com/docs/components/accordion

Add these keyframes and animations to your tailwind.config.js file to enable accordion transitions. Ensure your Tailwind CSS is configured to use these animations.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
}
```

--------------------------------

### Import Skeleton Component

Source: https://reactnativereusables.com/docs/components/skeleton

Import the Skeleton component from the '@/components/ui/skeleton' path in your React Native project. Ensure your project is set up to resolve aliases correctly.

```javascript
import { Skeleton } from "@/components/ui/skeleton"

```

--------------------------------

### Add React Native Reusables Components

Source: https://reactnativereusables.com/docs/cli

Add specific React Native Reusables components to your project. You can specify component names or use flags to add all components or overwrite existing ones.

```bash
npx @react-native-reusables/cli@latest add [components]
```
Tokens:
Raw