### Example: Add Input and Textarea Components

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/minimal-uniwind/README.md

Example of how to add specific components like 'input' and 'textarea' using the CLI.

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

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

### Development Commands

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/INDEX.md

Run these commands to start the development server, open simulators/emulators, or clean the project cache.

```bash
# All templates
npm run dev          # Start development server
npm run ios          # Open iOS simulator
npm run android      # Open Android emulator
npm run web          # Open web version
npm run clean        # Clear cache and modules
```

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

### Start Development Server

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/clerk-auth/README.md

Commands to start the development server for the React Native application. Ensure your .env.local file is configured with your Clerk publishable key.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

```bash
bun dev
```

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

### Input Return Key Type Examples

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Demonstrates different returnKeyType options for controlling the keyboard's return key action. Use to guide user input flow.

```tsx
<Input returnKeyType="next" onSubmitEditing={() => nextRef?.focus()} />
```

```tsx
<Input returnKeyType="send" onSubmitEditing={handleSubmit} />
```

```tsx
<Input returnKeyType="done" onSubmitEditing={() => Keyboard.dismiss()} />
```

```tsx
<Input returnKeyType="search" onSubmitEditing={handleSearch} />
```

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

### THEME Usage Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/types.md

Demonstrates how to import and use the THEME object to access light and dark theme colors.

```typescript
import { THEME } from '@/lib/theme';

const bgColor = THEME.light.background;
const textColor = THEME.dark.foreground;
```

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

### ClassValue Usage Examples

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/types.md

Demonstrates various ways to use the cn() utility function with different input types.

```typescript
cn('px-4')                           // string

```

```typescript
cn(12)                              // number

```

```typescript
cn(true, false)                     // booleans

```

```typescript
cn(undefined, null)                 // undefined/null

```

```typescript
cn({ 'px-4': true, 'py-2': false }) // conditional object

```

```typescript
cn(['px-4', 'py-2'])                // array

```

```typescript
cn('base', { 'variant': isActive }) // mixed

```

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

### Initialize Project with React Native Reusables CLI

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/README.md

Use this command to start a new project with a React Native Reusables template. If no template is specified, you will be prompted to select one interactively.

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

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

### Navigation Links on Home Screen

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Provides examples of creating navigation links to external documentation and the GitHub repository using the Link component.

```typescript
<Link href="https://reactnativereusables.com" asChild>
  <Button>
    <Text>Browse the Docs</Text>
  </Button>
</Link>

<Link href="https://github.com/founded-labs/react-native-reusables" asChild>
  <Button variant="ghost">
    <Text>Star the Repo</Text>
    <Icon as={StarIcon} />
  </Button>
</Link>
```

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

### Package.json Scripts for Expo

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Commonly used scripts for starting the Expo development server with cache clearing and managing project dependencies.

```json
{
  "scripts": {
    "dev": "expo start -c",
    "android": "expo start -c --android",
    "ios": "expo start -c --ios",
    "web": "expo start -c --web",
    "clean": "rm -rf .expo node_modules"
  }
}
```

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

### Card with Divider Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/card.md

Demonstrates using a Card component with a Separator to visually divide content sections, such as account details.

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

<Card>
  <CardHeader>
    <CardTitle>Account</CardTitle>
  </CardHeader>
  <CardContent className="gap-4">
    <View className="gap-2">
      <Text className="text-sm font-medium">Email</Text>
      <Text className="text-muted-foreground">user@example.com</Text>
    </View>
    <Separator />
    <View className="gap-2">
      <Text className="text-sm font-medium">Phone</Text>
      <Text className="text-muted-foreground">+1 (555) 000-0000</Text>
    </View>
  </CardContent>
</Card>
```

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

### Full Card Component Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/card.md

Demonstrates the complete structure of a Card with header, content, and footer, including input fields and buttons. Ensure all imported components are correctly set up in your project.

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Text } from '@/components/ui/text';
import { View } from 'react-native';

export function MyCard() {
  return (
    <Card>
      {/* Header with title and description */}
      <CardHeader>
        <CardTitle>Create Account</CardTitle>
        <CardDescription>Enter your details to get started</CardDescription>
      </CardHeader>

      {/* Main content area */}
      <CardContent className="gap-4">
        <View className="gap-1.5">
          <Label htmlFor="name">Name</Label>
          <Input id="name" placeholder="John Doe" />
        </View>
        <View className="gap-1.5">
          <Label htmlFor="email">Email</Label>
          <Input id="email" placeholder="john@example.com" />
        </View>
      </CardContent>

      {/* Footer with actions */}
      <CardFooter className="flex-row gap-2">
        <Button variant="outline" className="flex-1">
          <Text>Cancel</Text>
        </Button>
        <Button className="flex-1">
          <Text>Create</Text>
        </Button>
      </CardFooter>
    </Card>
  );
}
```

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

### NavTheme Usage Example with ThemeProvider

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/types.md

Shows how to integrate the NAV_THEME with React Navigation's ThemeProvider, dynamically selecting the theme based on the system's color scheme.

```typescript
import { NAV_THEME } from '@/lib/theme';
import { ThemeProvider } from '@react-navigation/native';
import { useColorScheme } from 'nativewind';

export default function RootLayout() {
  const { colorScheme } = useColorScheme();
  return (
    <ThemeProvider value={NAV_THEME[colorScheme ?? 'light']}> 
      {/* App routes */}
    </ThemeProvider>
  );
}
```

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

### Sign-In Card Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/card.md

Illustrates a Card component used to create a sign-in form, including input fields, labels, and a submit button.

```tsx
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Text } from '@/components/ui/text';

<Card>
  <CardHeader>
    <CardTitle className="text-center">Sign in</CardTitle>
    <CardDescription className="text-center">
      Enter your credentials to continue
    </CardDescription>
  </CardHeader>
  <CardContent className="gap-6">
    <View className="gap-4">
      <View className="gap-1.5">
        <Label htmlFor="email">Email</Label>
        <Input id="email" placeholder="m@example.com" />
      </View>
      <View className="gap-1.5">
        <Label htmlFor="password">Password</Label>
        <Input id="password" secureTextEntry />
      </View>
      <Button className="w-full">
        <Text>Sign In</Text>
      </Button>
    </View>
  </CardContent>
</Card>
```

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

### Input Keyboard Type Examples

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Shows various keyboardType props for customizing the on-screen keyboard. Use to optimize input for specific data types.

```tsx
<Input keyboardType="email-address" />
```

```tsx
<Input keyboardType="numeric" />
```

```tsx
<Input keyboardType="decimal-pad" />
```

```tsx
<Input keyboardType="default" />
```

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

### Complex Example: Status Card with Icon

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/icon.md

An example demonstrating a StatusCard component that uses an Icon to visually represent success or error states, with dynamic color and icon selection.

```tsx
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Icon } from '@/components/ui/icon';
import { Text } from '@/components/ui/text';
import { CheckCircle2Icon, AlertCircleIcon } from 'lucide-react-native';
import { View } from 'react-native';

function StatusCard({ status }: { status: 'success' | 'error' }) {
  const isSuccess = status === 'success';
  const IconComponent = isSuccess ? CheckCircle2Icon : AlertCircleIcon;
  const colorClass = isSuccess ? 'text-green-600' : 'text-red-600';

  return (
    <Card>
      <CardContent className="flex-row items-center gap-4">
        <Icon as={IconComponent} className={`size-6 ${colorClass}`} />
        <View>
          <Text className="font-semibold">
            {isSuccess ? 'Success' : 'Error'}
          </Text>
          <Text variant="muted">Operation completed</Text>
        </View>
      </CardContent>
    </Card>
  );
}
```

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

### Navigation Link to Sign Up Screen

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Example of creating a navigation link from the sign-in screen to the sign-up screen using the Link component. The `asChild` prop allows for custom button rendering.

```typescript
<Link href="/(auth)/sign-up" asChild>
  <Button>
    <Text>Create account</Text>
  </Button>
</Link>
```

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

### Input Auto Capitalize Examples

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Illustrates autoCapitalize props for controlling text capitalization. Use to enforce specific capitalization rules.

```tsx
<Input autoCapitalize="none" />
```

```tsx
<Input autoCapitalize="sentences" />
```

```tsx
<Input autoCapitalize="words" />
```

```tsx
<Input autoCapitalize="characters" />
```

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

### Development Commands for Expo Templates

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/PROJECT_OVERVIEW.md

Common npm scripts for running and building Expo applications. Use these to start the development server, launch simulators, or build for different platforms.

```bash
npm run dev          # Start Expo development server

```

```bash
npm run ios          # Launch iOS simulator

```

```bash
npm run android      # Launch Android emulator

```

```bash
npm run web          # Run web version

```

```bash
npm run clean        # Remove build artifacts

```

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

### Development Commands for React Native Reusables Templates

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/README.md

These commands are used to manage the development workflow, including starting the development server, building for different platforms, and cleaning the project cache.

```bash
npm run dev
npm run ios
npm run android
npm run web
npm run clean
```

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

### Tab-Based Navigation Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Implement tab navigation by using the `Tabs` component from `expo-router`. This is an alternative to the default stack navigation used in templates.

```typescript
import { Tabs } from 'expo-router';

<Tabs>
  <Tabs.Screen name="home" />
  <Tabs.Screen name="profile" />
  <Tabs.Screen name="settings" />
</Tabs>
```

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

### Navigating with Dynamic Route Segments

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Navigate to dynamic routes by constructing the URL with the segment values. This example shows navigation to a user profile page using a `userId`.

```typescript
<Link href={`/users/${userId}`} asChild>
  <Button>
    <Text>View User</Text>
  </Button>
</Link>
```

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

### Drawer Navigation Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Add drawer navigation to your Expo Router app using the `Drawer` component. This allows for a slide-out navigation menu.

```typescript
import { Drawer } from 'expo-router/drawer';

<Drawer>
  <Drawer.Screen name="home" />
  <Drawer.Screen name="profile" />
</Drawer>
```

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

### Babel Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Configure Babel presets and plugins for Expo projects. This setup includes Expo Router and Reanimated animations.

```javascript
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      require.resolve('expo-router/babel'),
      'react-native-reanimated/plugin',
    ],
  };
};
```

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

### Using NAV_THEME with React Navigation

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/theme.md

Example of integrating NAV_THEME with React Navigation using ThemeProvider. It dynamically selects the theme based on the system's color scheme.

```typescript
import { NAV_THEME } from '@/lib/theme';
import { ThemeProvider } from '@react-navigation/native';
import { useColorScheme } from 'nativewind';

export default function RootLayout() {
  const { colorScheme } = useColorScheme();

  return (
    <ThemeProvider value={NAV_THEME[colorScheme ?? 'light']}>
      <Stack />
    </ThemeProvider>
  );
}
```

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

### Initiate OAuth Flow with useSSO

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Use the useSSO hook to start an OAuth flow for single sign-on. This function requires a strategy (e.g., 'oauth_google') and handles the redirect URL. It returns createdSessionId and setActive to manage the user session.

```typescript
import { useSSO, type StartSSOFlowParams } from '@clerk/expo';
import * as AuthSession from 'expo-auth-session';

const { startSSOFlow } = useSSO();

async function handleOAuth(strategy: 'oauth_google' | 'oauth_github' | 'oauth_apple') {
  try {
    const { createdSessionId, setActive } = await startSSOFlow({
      strategy,
      redirectUrl: AuthSession.makeRedirectUri(),
    });

    if (createdSessionId && setActive) {
      await setActive({ session: createdSessionId });
    }
  } catch (err) {
    // Handle error
  }
}
```

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

### Controlled Input Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Shows how to manage the Input component's state using React's useState hook. The 'value' and 'onChangeText' props are essential for this.

```tsx
import { Input } from '@/components/ui/input';
import { useState } from 'react';

export function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <Input
      value={value}
      onChangeText={setValue}
      placeholder="Type something..."
    />
  );
}
```

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

### Input within a Form Context

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Illustrates integrating Input components within a form, managing state for multiple fields, and using refs to control focus flow between inputs. This example includes email and password fields with submission handling.

```tsx
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Text } from '@/components/ui/text';
import { useState, useRef } from 'react';
import { View } from 'react-native';

export function SignUpForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const passwordRef = useRef(null);

  function handleEmailSubmit() {
    passwordRef.current?.focus();
  }

  return (
    <View className="gap-4">
      <View className="gap-1.5">
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          placeholder="m@example.com"
          keyboardType="email-address"
          autoComplete="email"
          autoCapitalize="none"
          value={email}
          onChangeText={setEmail}
          returnKeyType="next"
          onSubmitEditing={handleEmailSubmit}
        />
      </View>
      <View className="gap-1.5">
        <Label htmlFor="password">Password</Label>
        <Input
          ref={passwordRef}
          id="password"
          placeholder="Enter password"
          secureTextEntry
          autoComplete="password"
          value={password}
          onChangeText={setPassword}
          returnKeyType="done"
        />
      </View>
      <Button>
        <Text>Sign Up</Text>
      </Button>
    </View>
  );
}
```

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

### Use Appropriate Keyboard Type

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Set the `keyboardType` prop to improve user experience by displaying the most suitable keyboard for the input's expected content. For example, use `email-address` for email inputs and `numeric` for numerical inputs.

```tsx
// ✅ Correct
<Input keyboardType="email-address" />
<Input keyboardType="numeric" />

// ❌ Avoid - generic keyboard
<Input />
```

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

### Navigation Link to Forgot Password Screen

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Example of creating a navigation link from the sign-in screen to the forgot password screen, passing the user's email as a query parameter. This facilitates password recovery flows.

```typescript
<Link href={`/(auth)/forgot-password?email=${email}`} asChild>
  <Button variant="link">
    <Text>Forgot your password?</Text>
  </Button>
</Link>
```

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

### useSSO Hook

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Enables Single Sign-On (SSO) flows, allowing users to sign in using third-party providers like Google, GitHub, or Apple. It provides a function to start the SSO flow.

```APIDOC
## useSSO Hook

### Description
Enables Single Sign-On (SSO) flows, allowing users to sign in using third-party providers like Google, GitHub, or Apple. It provides a function to start the SSO flow.

### Strategy Options

- `oauth_apple` - Sign in with Apple
- `oauth_google` - Sign in with Google
- `oauth_github` - Sign in with GitHub

### Usage

```typescript
import { useSSO, type StartSSOFlowParams } from '@clerk/expo';
import * as AuthSession from 'expo-auth-session';

const { startSSOFlow } = useSSO();

async function handleOAuth(strategy: 'oauth_google' | 'oauth_github' | 'oauth_apple') {
  try {
    const { createdSessionId, setActive } = await startSSOFlow({
      strategy,
      redirectUrl: AuthSession.makeRedirectUri(),
    });

    if (createdSessionId && setActive) {
      await setActive({ session: createdSessionId });
    }
  } catch (err) {
    // Handle error
  }
}
```
```

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

### Apply Theme Colors with Tailwind Utility Classes

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/theme.md

Use Tailwind utility classes to apply theme colors for backgrounds, text, and borders. A combined example shows how to style a complete UI component.

```tsx
// Background colors
className="bg-background"
className="bg-card"
className="bg-primary"

// Text colors
className="text-foreground"
className="text-muted-foreground"
className="text-primary-foreground"

// Border colors
className="border-border"
className="border-input"

```

```tsx
// Combined example
<View className="bg-card border border-border rounded-lg p-4">
  <Text className="text-foreground font-semibold">
    Card title
  </Text>
  <Text className="text-muted-foreground text-sm">
    Subtitle
  </Text>
</View>

```

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

### Manual Build Commands

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/INDEX.md

Alternative commands for manual builds of iOS, Android, and web platforms.

```bash
npx expo export
```

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

### Disabled Input Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Renders an Input component that is not editable. Set the 'editable' prop to 'false' to disable user interaction.

```tsx
import { Input } from '@/components/ui/input';

<Input
  placeholder="Cannot edit"
  editable={false}
/>
```

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

### Sign-Up Screen Options Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Configures the sign-up screen with modal presentation, an empty title, a transparent header, and disabled gestures. Use this for a modal sign-up flow with a clean interface.

```typescript
const SIGN_UP_SCREEN_OPTIONS = {
  presentation: 'modal',
  title: '',
  headerTransparent: true,
  gestureEnabled: false,
} as const;
```

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

### Initialize React Native Reusables Project

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/clerk-auth/README.md

Use this command to initialize a new React Native project with the React Native Reusables CLI. Select the 'Clerk auth (Nativewind)' template when prompted.

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

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

### Profile Card Display

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/card.md

An example of a Card component used to display user profile information, including an avatar and text details.

```tsx
import { Card, CardContent } from '@/components/ui/card';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Text } from '@/components/ui/text';
import { View } from 'react-native';

<Card>
  <CardContent className="flex-row items-center gap-4 pt-6">
    <Avatar>
      <AvatarImage source={{ uri: user.imageUrl }} />
      <AvatarFallback>
        <Text>{initials}</Text>
      </AvatarFallback>
    </Avatar>
    <View className="flex-1">
      <Text className="font-semibold">{user.fullName}</Text>
      <Text variant="muted">{user.email}</Text>
    </View>
  </CardContent>
</Card>
```

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

### React Native Reusables CLI Options

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/README.md

These are the available options for the React Native Reusables CLI initialization command. Use -c or --cwd to specify the working directory, and -t or --template to select a specific template.

```bash
  -c, --cwd <cwd>               the working directory. defaults to the current directory.
```

```bash
  -t, --template <template>     the template to use.
```

```bash
  -h, --help                    display help for command
```

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

### Basic Icon Usage

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/icon.md

Demonstrates the basic usage of the Icon component with an imported icon.

```tsx
import { Icon } from '@/components/ui/icon';
import { StarIcon } from 'lucide-react-native';

<Icon as={StarIcon} />
```

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

### Basic Input Usage

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Demonstrates the most basic usage of the Input component. Simply render it with a placeholder.

```tsx
import { Input } from '@/components/ui/input';
import { View } from 'react-native';

<View className="gap-1.5">
  <Input placeholder="Enter your name" />
</View>
```

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

### Avatar Group Example

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/avatar.md

Displays a group of avatars, with overlapping and a count for additional users. Use when showing multiple user profiles in a compact view.

```tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Text } from '@/components/ui/text';
import { View } from 'react-native';

export function AvatarGroup({ users }: { users: any[] }) {
  return (
    <View className="flex-row -space-x-3">
      {users.slice(0, 3).map((user) => (
        <Avatar key={user.id} className="size-8 border-2 border-background">
          <AvatarImage source={{ uri: user.imageUrl }} />
          <AvatarFallback>
            <Text className="text-xs">{user.initials}</Text>
          </AvatarFallback>
        </Avatar>
      ))}
      {users.length > 3 && (
        <Avatar className="size-8 border-2 border-background">
          <AvatarFallback>
            <Text className="text-xs">+{users.length - 3}</Text>
          </AvatarFallback>
        </Avatar>
      )}
    </View>
  );
}
```

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

### Theme Toggle with Icon

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/icon.md

A functional example of a theme toggle button that dynamically displays a Sun or Moon icon based on the current color scheme.

```tsx
import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import { MoonStarIcon, SunIcon } from 'lucide-react-native';
import { useColorScheme } from 'nativewind';

const THEME_ICONS = {
  light: SunIcon,
  dark: MoonStarIcon,
};

function ThemeToggle() {
  const { colorScheme, toggleColorScheme } = useColorScheme();

  return (
    <Button
      onPress={toggleColorScheme}
      size="icon"
      variant="ghost"
      className="rounded-full"
    >
      <Icon 
        as={THEME_ICONS[colorScheme ?? 'light']}
        className="size-5" 
      />
    </Button>
  );
}
```

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

### Button Variant Examples

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/button.md

Showcases various predefined variants for the Button component, including default, secondary, outline, ghost, destructive, and link styles.

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

// Primary button
<Button variant="default">
  <Text>Save Changes</Text>
</Button>

// Secondary button
<Button variant="secondary">
  <Text>Cancel</Text>
</Button>

// Outline button
<Button variant="outline">
  <Text>Edit</Text>
</Button>

// Ghost button
<Button variant="ghost">
  <Text>Learn more</Text>
</Button>

// Danger button
<Button variant="destructive">
  <Text>Delete</Text>
</Button>

// Link button
<Button variant="link">
  <Text>Open documentation</Text>
</Button>
```

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

### Sign-In Screen Options Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Defines options for the sign-in screen, including hiding the header and setting the title. Use this for a full-screen sign-in experience without a navigation header.

```typescript
const SIGN_IN_SCREEN_OPTIONS = {
  headerShown: false,
  title: 'Sign in',
};
```

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

### Minimal Expo Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

This is a basic configuration for an Expo project, including essential app details, splash screen, and asset handling.

```json
{
  "expo": {
    "name": "minimal",
    "slug": "minimal",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "minimal",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": ["expo-router"],
    "experiments": {
      "typedRoutes": true
    }
  }
}
```

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

### Input with Custom Styling

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Applies custom styles to the Input component using the 'className' prop for Tailwind CSS classes. This example centers text and rounds the input.

```tsx
import { Input } from '@/components/ui/input';

<Input
  placeholder="Search..."
  className="text-center rounded-full px-8"
/>
```

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

### EAS Build Commands

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/INDEX.md

Use EAS Build for recommended iOS, Android, and web deployments. Configuration is managed in app.json and eas.json.

```bash
eas build --platform ios
eas build --platform android
eas build --platform web
```

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

### Password Input Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Sets up the Input component for password entry. Use 'secureTextEntry' to mask input and 'password' for auto-complete.

```tsx
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { View } from 'react-native';

<View className="gap-1.5">
  <Label htmlFor="password">Password</Label>
  <Input
    id="password"
    secureTextEntry
    autoComplete="password"
    placeholder="Enter your password"
  />
</View>
```

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

### Responsive Card Width

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/card.md

Applies responsive width classes to a Card component to adjust its size on different screen breakpoints. This example uses Tailwind CSS classes for responsiveness.

```tsx
<Card className="sm:w-2/3 md:w-1/2">
  {/* Responsive width on larger screens */}
</Card>
```

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

### Custom Text Styling with Context

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/text.md

Demonstrates how to apply custom styling to Text components by providing a value to the TextClassContext.Provider.

```tsx
import { TextClassContext } from '@/components/ui/text';

<TextClassContext.Provider value="text-primary font-bold">
  <Text>This text is bold and primary colored</Text>
</TextClassContext.Provider>
```

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

### Tailwind CSS Color Type Definitions

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/types.md

Example of how Tailwind color variables are defined in `tailwind.config.js` for TypeScript type hinting. These definitions provide IDE support for Tailwind IntelliSense.

```typescript
// Generated from THEME
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))',
  },
  // ... additional colors
}
```

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

### Theme Toggle Button

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/button.md

Provides an example of a Theme Toggle Button that uses the Button component to switch between light and dark color schemes, incorporating icons for visual feedback.

```tsx
import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import { MoonStarIcon, SunIcon } from 'lucide-react-native';
import { useColorScheme } from 'nativewind';

const THEME_ICONS = {
  light: SunIcon,
  dark: MoonStarIcon,
};

function ThemeToggle() {
  const { colorScheme, toggleColorScheme } = useColorScheme();

  return (
    <Button
      onPress={toggleColorScheme}
      size="icon"
      variant="ghost"
      className="rounded-full"
    >
      <Icon as={THEME_ICONS[colorScheme ?? 'light']} className="size-5" />
    </Button>
  );
}
```

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

### Navigate Using Link Component

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Prefer using the `Link` component for navigation over manual `router.push()` calls for better integration and potential optimizations.

```typescript
// ✅ Better
<Link href="/profile" asChild>
  <Button><Text>Profile</Text></Button>
</Link>

// ⚠️ Works but less optimal
<Button onPress={() => router.push('/profile')} />
```

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

### cn Function Implementation

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/utilities.md

The core implementation of the `cn` function, utilizing `clsx` for class normalization and `twMerge` for resolving Tailwind utility conflicts. Ensure `clsx` and `tailwind-merge` are installed.

```typescript
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

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

### Modal Presentation for Auth Flows

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Configure a screen to present as a modal using `presentation: 'modal'` in its options, commonly used for authentication flows.

```typescript
<Stack.Screen name="sign-up" options={{ presentation: 'modal' }} />
```

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

### Handle Email and Password Sign-In

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Implement an asynchronous function to handle user sign-in using email and password. This involves calling the signIn.password method and then finalizing the sign-in process or handling potential errors and verification steps.

```typescript
const { signIn } = useSignIn();

async function handleSignIn(email: string, password: string) {
  try {
    const result = await signIn.password({
      identifier: email,
      password,
    });

    if (result.status === 'complete') {
      await signIn.finalize();
      // User is signed in
    } else if (result.status === 'needs_client_trust') {
      // Additional verification required
      setError('Device requires additional verification');
    }
  } catch (err) {
    // Handle error
  }
}
```

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

### Initialize useSignIn Hook

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Import and destructure the useSignIn hook to access the signIn method and fetchStatus. This hook is used to initiate sign-in processes.

```typescript
import { useSignIn } from '@clerk/expo';

const { signIn, fetchStatus } = useSignIn();
```

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

### Splash Screen Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Configures the splash screen appearance, including the image source, resize mode, and background color. Supports 'contain' and 'cover' resize modes.

```json
"splash": {
  "image": "./assets/images/splash.png",
  "resizeMode": "contain",
  "backgroundColor": "#ffffff"
}
```

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

### Web Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Web-specific build configuration for an Expo project, defining the bundler, output format, and favicon.

```json
"web": {
  "bundler": "metro",
  "output": "static",
  "favicon": "./assets/images/favicon.png"
}
```

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

### Handle Form Submission

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Configure form submission behavior using `returnKeyType` and `onSubmitEditing`. `returnKeyType` customizes the return key on the keyboard, and `onSubmitEditing` specifies the function to call when the user submits the input.

```tsx
// ✅ Correct
<Input
  returnKeyType="next"
  onSubmitEditing={() => passwordRef.current?.focus()}
/>

// ❌ Avoid - ignoring keyboard submission
```

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

### Basic Button Usage

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/button.md

Demonstrates the fundamental usage of the Button component with an onPress handler and child Text.

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

<Button onPress={() => alert('Pressed!')}>
  <Text>Click me</Text>
</Button>
```

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

### Button Component Integration with cn

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/utilities.md

Example of integrating the `cn` utility within a custom Button component to merge variant styles with any additional class names passed via props. Ensure `buttonVariants` is defined elsewhere.

```tsx
import { cn } from '@/lib/utils';

function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <Pressable
      className={cn(
        buttonVariants({ variant, size }),
        className
      )}
      {...props} />
  );
}
```

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

### ClerkProvider Configuration in Root Layout

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Set up the ClerkProvider in your root layout file (_layout.tsx) to wrap your application. Ensure the publishable key is loaded from environment variables and provide a token cache implementation.

```typescript
import { ClerkProvider, useAuth } from '@clerk/expo';
import { tokenCache } from '@clerk/expo/token-cache';

const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;

export default function RootLayout() {
  const { colorScheme } = useColorScheme();

  return (
    <ClerkProvider publishableKey={publishableKey} tokenCache={tokenCache}>
      <ThemeProvider value={NAV_THEME[colorScheme ?? 'light']}>
        <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
        <Routes />
        <PortalHost />
      </ThemeProvider>
    </ClerkProvider>
  );
}
```

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

### Placeholder Styling (Native)

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Styles the placeholder text on native platforms. Use for consistent placeholder feedback on mobile.

```css
placeholder:text-muted-foreground/50
```

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

### Default Authentication Screen Options

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Provides default options for authentication screens, featuring a transparent header with no shadow. Use this for a seamless visual flow across authentication-related screens.

```typescript
const DEFAULT_AUTH_SCREEN_OPTIONS = {
  title: '',
  headerShadowVisible: false,
  headerTransparent: true,
};
```

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

### returnKeyType

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Configures the label and action of the return key on the on-screen keyboard. This allows for custom actions like navigating to the next field, submitting a form, or performing a search.

```APIDOC
## returnKeyType

### Description
Determines the label/action of the return key.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Usage
```tsx
// Go to next field
<Input returnKeyType="next" onSubmitEditing={() => nextRef?.focus()} />

// Submit form
<Input returnKeyType="send" onSubmitEditing={handleSubmit} />

// Done
<Input returnKeyType="done" onSubmitEditing={() => Keyboard.dismiss()} />

// Search
<Input returnKeyType="search" onSubmitEditing={handleSearch} />
```
```

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

### EAS Build Preview Profile Command

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Command to build for the iOS platform using the 'preview' profile with EAS. This is used when utilizing a development client.

```bash
eas build --platform ios --profile preview
```

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

### Asset Directory Structure

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Defines the standard directory structure for assets including images and fonts. Specifies recommended image types and sizes for app icons, splash screens, and favicons.

```tree
assets/
├── images/
│   ├── icon.png              # App icon (1024x1024 or larger)
│   ├── adaptive-icon.png     # Android launcher icon
│   ├── splash.png            # Splash screen
│   ├── favicon.png           # Web favicon
│   └── react-native-reusables-*.png  # Branding images
└── fonts/                    # Custom fonts (if any)
```

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

### Authentication Screen Options Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Defines common screen options for authentication-related screens, including header visibility, presentation style, and header transparency. Adjust these options to customize the appearance of your auth screens.

```typescript
const SIGN_IN_SCREEN_OPTIONS = {
  headerShown: false,
  title: 'Sign in',
};

const SIGN_UP_SCREEN_OPTIONS = {
  presentation: 'modal',
  title: '',
  headerTransparent: true,
  gestureEnabled: false,
};

const DEFAULT_AUTH_SCREEN_OPTIONS = {
  title: '',
  headerShadowVisible: false,
  headerTransparent: true,
};
```

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

### Configure Stack Screen Options

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Customize screen behavior and appearance within a stack navigator using the 'options' prop. Common options include title, header visibility, transparency, presentation style, and custom header buttons.

```typescript
<Stack.Screen
  name="detail"
  options={{
    title: 'Detail',
    headerBackTitle: 'Back',
    headerTintColor: '#000',
    headerStyle: { backgroundColor: '#f5f5f5' },
    headerTitleStyle: { fontWeight: 'bold' },
    headerRight: () => <HeaderButton />,
  }}
/>
```

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

### Protect Routes with Stack.Protected

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Use `Stack.Protected` with a `guard` prop in your layout to protect routes, ensuring a user is authenticated before accessing them.

```typescript
<Stack.Protected guard={isSignedIn}>
  <Stack.Screen name="dashboard" />
</Stack.Protected>
```

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

### Icon Color Inheritance and Override

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/icon.md

Demonstrates how icons inherit text color from their parent context and how to explicitly override the icon's color using its className prop.

```tsx
<Text className="text-red-500">
  <Icon as={AlertIcon} />
  {/* Icon is red-500 */}
</Text>
```

```tsx
<Text className="text-red-500">
  <Icon as={AlertIcon} className="text-blue-500" />
  {/* Icon is blue-500, not red-500 */}
</Text>
```

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

### Handle Loading State with useAuth

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Check the `isLoaded` status from `useAuth` before rendering content to ensure authentication state is ready.

```typescript
const { isLoaded } = useAuth();
if (!isLoaded) return <LoadingSpinner />;
```

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

### Initialize useUser Hook

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Import and destructure the useUser hook to access the currently authenticated user's data. The user object contains profile information.

```typescript
import { useUser } from '@clerk/expo';

const { user } = useUser();
```

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

### Apply Base and User-Provided Classes

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/utilities.md

Use `cn` (which combines `clsx` and `tailwind-merge`) to apply base component styles and allow user-provided classes to override them.

```tsx
<Button className={cn(buttonBase, userProvidedClass)} />
```

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

### Integrating Icon with Button Component

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/icon.md

Demonstrates how to use the Icon component within a Button, showcasing automatic sizing, coloring, and horizontal arrangement with text.

```tsx
// Icon + Text in button - perfect alignment
<Button variant="outline">
  <Icon as={ExternalLinkIcon} />
  <Text>Open Link</Text>
</Button>
```

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

### Initialize useAuth Hook

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Import and destructure the useAuth hook to access authentication state and methods. This hook provides isSignedIn, isLoaded, and signOut.

```typescript
import { useAuth } from '@clerk/expo';

const { isSignedIn, isLoaded, signOut } = useAuth();
```

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

### List of Cards Rendering

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/card.md

Shows how to render a list of Card components dynamically from an array of data using ScrollView.

```tsx
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Text } from '@/components/ui/text';
import { ScrollView, View } from 'react-native';

const items = [
  { id: 1, title: 'Item 1', description: 'Description' },
  { id: 2, title: 'Item 2', description: 'Description' },
];

<ScrollView>
  {items.map((item) => (
    <Card key={item.id} className="mb-4">
      <CardHeader>
        <CardTitle>{item.title}</CardTitle>
        <CardDescription>{item.description}</CardDescription>
      </CardHeader>
    </Card>
  ))}
</ScrollView>
```

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

### Basic Card Usage

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/card.md

Demonstrates the fundamental structure of a Card component with header, content, title, and description.

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <Text>Card content</Text>
  </CardContent>
</Card>
```

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

### Placeholder Styling (Web)

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Styles the placeholder text and selection appearance on web. Use for consistent placeholder and selection feedback.

```css
placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
```

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

### Set AutoComplete and AutoCapitalize

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/input.md

Utilize `autoComplete` and `autoCapitalize` props to aid accessibility by providing hints to the system for autofill and text capitalization, enhancing the user's typing experience.

```tsx
// ✅ Correct
<Input autoComplete="email" autoCapitalize="none" />
<Input autoComplete="password" />

// ❌ Avoid - no hints
<Input />
```

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

### Conditional Class Application with cn

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/utilities.md

Illustrates the recommended way to conditionally apply classes using `cn` with boolean logic, avoiding manual string interpolation.

```tsx
className={cn('px-4', isLarge && 'px-8')}
```

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

### Conditionally Render Screens with Stack.Protected

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Demonstrates how to use the Stack.Protected component to conditionally render screens based on the user's authentication status. Screens are hidden if their 'guard' prop evaluates to false, and direct navigation is blocked.

```typescript
<Stack>
  {/* Only when NOT signed in */}
  <Stack.Protected guard={!isSignedIn}>
    <Stack.Screen name="(auth)/sign-in" options={SIGN_IN_SCREEN_OPTIONS} />
    <Stack.Screen name="(auth)/sign-up" options={SIGN_UP_SCREEN_OPTIONS} />
  </Stack.Protected>

  {/* Only when signed in */}
  <Stack.Protected guard={isSignedIn}>
    <Stack.Screen name="index" />
  </Stack.Protected>
</Stack>
```

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

### Conditional Route Rendering with Stack.Protected

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Demonstrates how to use Stack.Protected to conditionally render screens based on the user's authentication status. When the guard condition is false, the route is hidden from the navigation stack.

```typescript
// Only show when user is NOT signed in
<Stack.Protected guard={!isSignedIn}>
  <Stack.Screen name="(auth)/sign-in" />
  <Stack.Screen name="(auth)/sign-up" />
</Stack.Protected>

// Only show when user IS signed in
<Stack.Protected guard={isSignedIn}>
  <Stack.Screen name="index" />
</Stack.Protected>
```

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

### Lead Variant Style

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/text.md

Introductory text style. Larger font size and muted foreground color for emphasis.

```css
text-muted-foreground text-xl
```

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

### Core Navigation Actions with useRouter

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

The `useRouter` hook provides methods for programmatic navigation, including pushing new routes, going back, and replacing the current route.

```typescript
import { useRouter } from 'expo-router';

function MyComponent() {
  const router = useRouter();

  function handlePress() {
    router.push('/');          // Navigate to home
    router.back();             // Go back
    router.replace('/auth');   // Replace current route
  }
}
```

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

### Conditional Classes with cn

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/utilities.md

Shows how to use `cn` with an object to conditionally apply classes based on a boolean state. This is ideal for dynamic styling.

```tsx
cn('button', {
  'bg-primary': isActive,
  'bg-secondary': !isActive,
})
// Returns: 'button bg-primary' or 'button bg-secondary'
```

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

### Button with Icons

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/button.md

Demonstrates how to include icons within the Button component alongside text for enhanced visual cues.

```tsx
import { Icon } from '@/components/ui/icon';
import { StarIcon } from 'lucide-react-native';

<Button variant="outline">
  <Text>Star the Repo</Text>
  <Icon as={StarIcon} />
</Button>
```

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

### iOS Configuration

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Optional iOS-specific settings for an Expo project, including tablet support, bundle identifier, and build number.

```json
"ios": {
  "supportsTablet": true,
  "bundleIdentifier": "com.myapp.ios",
  "buildNumber": "1"
}
```

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

### Set Screen Orientation in app.json

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Configure the screen orientation for your application by setting the `orientation` field in `app.json` to either `"portrait"` or `"landscape"`.

```json
"orientation": "portrait"  // or "landscape"
```

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

### Protected Routes with Stack.Protected

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/clerk-auth.md

Use `Stack.Protected` for routes that require authentication. This is the recommended approach over implementing custom guards for routing logic.

```typescript
// ✅ Correct
<Stack.Protected guard={isSignedIn}>
  <Stack.Screen name="dashboard" />
</Stack.Protected>

// ❌ Avoid - manual routing logic
{isSignedIn && <Stack.Screen name="dashboard" />}
```

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

### Update app.json Version Before Deployment

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/configuration.md

Ensure the `version` field in `app.json` is incremented before creating new builds to track deployments accurately.

```json
"version": "1.0.1"  // Increment before builds
```

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

### Configure Deep Linking Scheme

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/routing.md

Add this to your app's `app.json` or `app.config.js` to enable deep linking with a custom URI scheme.

```json
{
  "expo": {
    "scheme": "myapp"
  }
}
```

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

### Heading Hierarchy Variants

Source: https://github.com/founded-labs/react-native-reusables-templates/blob/main/_autodocs/api-reference/text.md

Shows how to use the 'variant' prop to create different heading levels (h1 to h4). Import Text from '@/components/ui/text'.

```tsx
import { Text } from '@/components/ui/text';

<Text variant="h1">Page Title</Text>
<Text variant="h2">Section Title</Text>
<Text variant="h3">Subsection</Text>
<Text variant="h4">Minor Heading</Text>
```