### Clone CraftReactNative UI Repository

Source: https://docs.craftreactnative.com/docs/guides/components-demo-setup

Clones the CraftReactNative UI repository and navigates into the demo-app directory. This requires Git to be installed.

```bash
git clone https://github.com/craftreactnative/ui.git
cd ui/demo-app
```

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

### Add Components to CraftReactNative Project (CLI)

Source: https://docs.craftreactnative.com/docs/installation

After initialization, use these commands to add specific components or all available components to your CraftReactNative project. This allows for modular integration of UI elements.

```bash
# Add a single component
npx @craftreactnative/ui add Button
```

```bash
# Add multiple components
npx @craftreactnative/ui add Avatar Button Card
```

```bash
# Add all components
npx @craftreactnative/ui add --all
```

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

### Install Dependencies for CraftReactNative Demo App

Source: https://docs.craftreactnative.com/docs/guides/components-demo-setup

Installs all necessary project dependencies for the CraftReactNative demo application using Expo. This command should be run after cloning the repository.

```bash
npx expo install
```

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

### Initialize CraftReactNative Project (CLI)

Source: https://docs.craftreactnative.com/docs/installation

Run this command from your React Native project's root directory to automatically set up CraftReactNative. This command initializes the project with the necessary configurations and dependencies.

```bash
npx @craftreactnative/ui init
```

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

### Initialize CraftReactNative UI Project

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

Initializes your React Native project with the necessary setup for CraftReactNative UI. This command installs dependencies, creates a 'craftrn-ui' folder with Unistyles and theme configuration, and updates your main project file. The '--skip-deps' option can be used to bypass dependency installation.

```bash
npx @craftreactnative/ui init

# Options:
# --skip-deps - Skip dependency installation
```

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

### Install Card Component with CLI - CraftReactNative

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

This snippet shows how to install the Card component using the CraftReactNative CLI. It requires Node.js and npm/npx to be installed on your system.

```bash
npx @craftreactnative/ui add Card
```

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

### Install ContextMenu Component (CLI)

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

Installs the ContextMenu component using the CraftReactNative CLI. This command automates the addition of the component to your project.

```bash
npx @craftreactnative/ui add ContextMenu
```

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

### Install InputText Component using CLI

Source: https://docs.craftreactnative.com/docs/components/input-text

Installs the InputText component using the CraftReactNative CLI. This command should be run in your project's root directory.

```bash
npx @craftreactnative/ui add InputText
```

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

### Install ListItem Component via CLI

Source: https://docs.craftreactnative.com/docs/components/list-item

Installs the ListItem component from the @craftreactnative/ui package using npm. This is the recommended installation method for adding the ListItem component to your project.

```bash
npx @craftreactnative/ui add ListItem
```

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

### Install Switch Component with CLI

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

Instructions for installing the Switch component using the npx command-line interface. This command adds the necessary package to your project.

```bash
npx @craftreactnative/ui add Switch
```

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

### Install Radio Component (CLI)

Source: https://docs.craftreactnative.com/docs/components/radio

Installs the Radio component using the CraftReactNative CLI. This is the recommended method for integrating the component into your project.

```bash
npx @craftreactnative/ui add Radio
```

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

### Install Counter Component using CLI

Source: https://docs.craftreactnative.com/docs/components/counter

Provides instructions to install the Counter component using the npx command. This is the primary method for adding the component to your project.

```bash
npx @craftreactnative/ui add Counter
```

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

### Install PasscodeEntry Component (CLI)

Source: https://docs.craftreactnative.com/docs/components/passcode-entry

Instructions for installing the PasscodeEntry component using the npm CLI. This command adds the component to your project.

```bash
npx @craftreactnative/ui add PasscodeEntry
```

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

### Install Button Component with CLI

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

This command installs the Button component from the @craftreactnative/ui package using the npx command-line interface. Ensure you have npx available in your environment.

```bash
npx @craftreactnative/ui add Button
```

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

### Clone Repository and Navigate to Demo App

Source: https://docs.craftreactnative.com/docs/guides/templates-demo-setup

Git commands to clone the CraftReactNative templates repository and change directory to the demo-app folder. This prepares the project structure for local development and testing.

```bash
git clone https://github.com/craftreactnative/templates.git
cd templates/demo-app
```

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

### Run CraftReactNative Demo App on Android

Source: https://docs.craftreactnative.com/docs/guides/components-demo-setup

Builds and runs the CraftReactNative demo application on an Android emulator or connected device. This requires a development build and may take several minutes for the initial compilation.

```bash
npx expo run:android
```

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

### Run CraftReactNative Demo App on iOS

Source: https://docs.craftreactnative.com/docs/guides/components-demo-setup

Builds and runs the CraftReactNative demo application on an iOS simulator or connected device. This requires a development build and may take several minutes for the initial compilation.

```bash
npx expo run:ios
```

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

### Install BottomSheet Component using CLI

Source: https://docs.craftreactnative.com/docs/components/bottom-sheet

This command installs the BottomSheet component using the CraftReactNative CLI. It adds the necessary package to your project dependencies.

```bash
npx @craftreactnative/ui add BottomSheet
```

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

### Install Text Component via CLI - CraftReactNative

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

Installs the Text component for CraftReactNative using the npm command. This is the primary method for adding the component to your project.

```bash
npx @craftreactnative/ui add Text
```

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

### Install Avatar Component using CLI

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

Installs the Avatar component using the CraftReactNative CLI. This command adds the necessary package to your project dependencies.

```bash
npx @craftreactnative/ui add Avatar
```

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

### Install InputOTP Component with CLI

Source: https://docs.craftreactnative.com/docs/components/input-otp

Install the InputOTP component from CraftReactNative UI library using the npm CLI. This command adds the component to your project dependencies and makes it available for import.

```bash
npx @craftreactnative/ui add InputOTP
```

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

### Install Checkbox Component (CLI)

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

Installs the Checkbox component using the CraftReactNative CLI. This command adds the necessary package to your project's dependencies.

```bash
npx @craftreactnative/ui add Checkbox
```

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

### Install InputSearch Component using CLI

Source: https://docs.craftreactnative.com/docs/components/input-search

Installs the InputSearch component into your React Native project using the CraftReactNative CLI. This is the recommended method for integrating the component.

```bash
npx @craftreactnative/ui add InputSearch
```

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

### Install PhotoCarousel Component via CLI

Source: https://docs.craftreactnative.com/docs/components/photo-carousel

Installs the PhotoCarousel component from the @craftreactnative/ui package using the CLI command. This sets up the swipeable photo carousel component with all required dependencies.

```bash
npx @craftreactnative/ui add PhotoCarousel
```

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

### Configure Babel for Path Aliases and Reanimated in CraftReactNative

Source: https://docs.craftreactnative.com/docs/guides/templates-setup

Configures Babel to support path aliases using 'babel-plugin-root-import' and enables React Native Reanimated animations. This setup is necessary for cleaner imports and smooth animations within the React Native project using CraftReactNative templates.

```json
{
  "plugins": [
    [
      "babel-plugin-root-import",
      {
        "paths": [
          {
            "rootPathPrefix": "@",
            "rootPathSuffix": "./"
          }
        ]
      }
    ],
    "react-native-reanimated/plugin"
  ],
  "presets": ["module:@react-native/babel-preset"]
}
```

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

### Install Slider Component with CraftReactNative CLI

Source: https://docs.craftreactnative.com/docs/components/slider

Install the Slider component from the CraftReactNative UI library using the CLI command. This method automatically adds the component to your project with all required dependencies.

```bash
npx @craftreactnative/ui add Slider
```

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

### Install SliderDual Component - CraftReactNative CLI

Source: https://docs.craftreactnative.com/docs/components/slider-dual

Install the SliderDual component from the CraftReactNative UI library using the CLI command. This command adds the component to your project's craftrn-ui components directory.

```bash
npx @craftreactnative/ui add SliderDual
```

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

### Install ButtonRound Component via CLI

Source: https://docs.craftreactnative.com/docs/components/button-round

Install the ButtonRound circular button component from the CraftReactNative UI library using npm CLI. This command adds the component to your project dependencies.

```bash
npx @craftreactnative/ui add ButtonRound
```

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

### Usage of Switch Component in React Native

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

Example of how to import and use the Switch component in a React Native application. It demonstrates setting the initial value and handling value changes.

```typescript
import { Switch } from "@/craftrn-ui/components/Switch";

export const Screen = () => (
  <Switch value={value} onValueChange={(newValue) => console.log(newValue)} />
);
```

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

### Configure TypeScript Path Aliases for CraftReactNative

Source: https://docs.craftreactnative.com/docs/guides/templates-setup

Sets up TypeScript to recognize path aliases, specifically for '@/craftrn-ui/*', making imports cleaner. This configuration is crucial for managing project structure and improving code maintainability. It assumes a base URL of './app'.

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

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

### Usage of PasscodeEntry Component in React Native

Source: https://docs.craftreactnative.com/docs/components/passcode-entry

Example of how to import and use the PasscodeEntry component in a React Native screen. It demonstrates how to handle the entered passcode via the `onPasscodeEntered` prop.

```typescript
import { PasscodeEntry } from "@/craftrn-ui/components/PasscodeEntry";
 
export const Screen = () => (
  <PasscodeEntry onPasscodeEntered={(passcode) => console.log(passcode)} />
);
```

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

### Implement ContextMenu Component (React Native)

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

Demonstrates how to use the ContextMenu component in a React Native application. It shows the setup of menu items and the trigger element. Requires react-native-reanimated and react-native-unistyles.

```typescript
import {
  ContextMenu,
  ContextMenuItem,
} from '@/craftrn-ui/components/ContextMenu';
import { Button } from '@/craftrn-ui/components/Button';

const menuItems: ContextMenuItem[] = [
  {
    id: '1',
    label: 'Edit',
    subtitle: 'Modify this item',
    onPress: () => console.log('Edit pressed'),
  },
  {
    id: '2',
    label: 'Delete',
    onPress: () => console.log('Delete pressed'),
  },
];

export const Screen = () => (
  <ContextMenu
    items={menuItems}
    menuAnchorPosition="bottom-center"
    trigger={onPress => <Button onPress={onPress}>Show Menu</Button>}
  />
);
```

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

### Use Radio Component (React Native)

Source: https://docs.craftreactnative.com/docs/components/radio

Demonstrates how to import and use the Radio component in a React Native screen. It shows a basic example of rendering a checked radio button.

```typescript
import { Radio } from "@/craftrn-ui/components/Radio";

export const Screen = () => <Radio checked={true} />;
```

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

### Usage of Button Component in React Native

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

Demonstrates how to import and use the Button component within a React Native application. It shows basic usage with an onPress handler, size, and variant props. This requires the 'Button' component to be installed and imported from '@/craftrn-ui/components/Button'.

```typescript
import { Button } from "@/craftrn-ui/components/Button";
 
export const Screen = () => (
  <Button onPress={() => {}} size="small" variant="secondary">
    Press me
  </Button>
);
```

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

### Usage of BottomSheet Component in React Native

Source: https://docs.craftreactnative.com/docs/components/bottom-sheet

Example demonstrating how to use the BottomSheet component in a React Native screen. It requires importing the component and using its props to control visibility and content. Dependencies include react-native-gesture-handler, react-native-reanimated, and react-native-unistyles.

```typescript
import { BottomSheet } from "@/craftrn-ui/components/BottomSheet";

export const Screen = () => (
  <BottomSheet
    visible={visible}
    maxHeight={300}
    onRequestClose={() => setVisible(false)}
  >
    <Text>Hello</Text>
  </BottomSheet>
);
```

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

### Import and Use ListItem Component in React Native

Source: https://docs.craftreactnative.com/docs/components/list-item

Demonstrates how to import the ListItem component and use it in a React Native screen with optional accessories. The example shows displaying a list item with text, secondary text below, and a right-aligned chevron icon with an onPress handler.

```typescript
import { ListItem } from "@/craftrn-ui/components/ListItem";
import { ChevronRight } from "@/craftrn-ui/icons";

export const Screen = () => (
  <ListItem
    text="First name"
    textBelow="Charlotte"
    itemRight={<ChevronRight size={24} color={theme.colors.contentPrimary} />}
    onPress={() => {}}
  />
);
```

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

### Import and Use ButtonRound Component

Source: https://docs.craftreactnative.com/docs/components/button-round

Import the ButtonRound component and implement it in a React Native screen. The example demonstrates basic usage with icon rendering, press handler, and size configuration for a circular navigation or action button.

```typescript
import { ButtonRound } from "@/craftrn-ui/components/ButtonRound";

export const Screen = () => (
  <ButtonRound
    onPress={() => {}}
    size="small"
    renderIcon={(size) => (
      <ChevronLeft size={size} color={theme.colors.contentPrimary} />
    )}
  />
);
```

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

### Use Card Component in React Native - CraftReactNative

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

This example demonstrates how to import and use the Card component in a React Native application. It assumes you have React Native and the necessary UI libraries set up. The Card component wraps other elements, such as Text, to display content within a rounded-corner card.

```typescript
import { Card } from "@/craftrn-ui/components/Card";

export const Screen = () => (
  <Card>
    <Text>Hello</Text>
  </Card>
);
```

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

### List Available CraftReactNative Components

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

Displays a list of all available components that can be added to your CraftReactNative project. This command helps you discover the components you can integrate into your application.

```bash
npx @craftreactnative/ui list
```

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

### Add CraftReactNative Components to Project

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

Adds one or more CraftReactNative components to your project. The component files are copied to the 'craftrn-ui/components' directory, allowing for customization. You can add single or multiple components in one command.

```bash
# Add a single component
npx @craftreactnative/ui add button

# Add multiple components
npx @craftreactnative/ui add button avatar card
```

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

### Import and Use InputOTP Component

Source: https://docs.craftreactnative.com/docs/components/input-otp

Import the InputOTP component from the craftrn-ui library and implement it in a React Native screen. The component accepts an onChange callback that returns the entered OTP code as a string.

```typescript
import { InputOTP } from "@/craftrn-ui/components/InputOTP";

export const Screen = () => <InputOTP onChange={(code) => console.log(code)} />;
```

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

### Usage of InputSearch Component in React Native

Source: https://docs.craftreactnative.com/docs/components/input-search

Demonstrates how to use the InputSearch component in a React Native screen. It shows the import statement and how to render the component with placeholder text and custom left/right accessories.

```typescript
import { InputSearch } from "@/craftrn-ui/components/InputSearch";

export const Screen = () => (
  <InputSearch
    placeholder="Search for a destination"
    leftAccessory={
      <View style={styles.leftAccessory}>
        <Search color={theme.colors.contentTertiary} />
      </View>
    }
    rightAccessory={
      <ButtonRound
        renderIcon={(size) => (
          <Slider size={size} color={theme.colors.contentTertiary} />
        )}
        onPress={() => {}}
      />
    }
  />
);
```

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

### Use Counter Component in a React Native Screen

Source: https://docs.craftreactnative.com/docs/components/counter

Demonstrates how to import and use the Counter component within a React Native screen. It shows basic usage with an initial value and an onValueChange handler.

```typescript
import { Counter } from "@/craftrn-ui/components/Counter";

export const Screen = () => <Counter onValueChange={() => {}} value={0} />;
```

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

### Import and Use Text Component - CraftReactNative

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

Demonstrates how to import and use the Text component in a React Native application using TypeScript. It shows basic usage with children content.

```typescript
import { Text } from "@/craftrn-ui/components/Text";

<Text>Hello World</Text>
```

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

### Checkbox Component Usage (React Native)

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

Demonstrates how to use the Checkbox component in a React Native application. It shows the import statement and basic rendering with a 'checked' prop. Dependencies include react-native-reanimated and react-native-unistyles.

```typescript
import { Checkbox } from "@/craftrn-ui/components/Checkbox";

export const Screen = () => <Checkbox checked={true} />;
```

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

### Use InputText Component in React Native

Source: https://docs.craftreactnative.com/docs/components/input-text

Demonstrates how to use the InputText component in a React Native screen. It shows basic usage with a label, initial value, change handler, and optional right icon.

```typescript
import { InputText } from "@/craftrn-ui/components/InputText";
 
export const Screen = () => (
  <InputText
    label="Label"
    value="100"
    onChangeText={(text) => console.log(text)}
    iconRight={<ChevronDown />}
    size="medium"
  />
);
```

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

### Use Avatar Component in React Native

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

Demonstrates how to import and use the Avatar component in a React Native screen. It shows how to pass props for image URI, fallback initials, online indicator, and size.

```typescript
import { Avatar } from '@/craftrn-ui/components/Avatar';

export const Screen = () => (
  <Avatar
    uri="https://xsgames.co/randomusers/assets/avatars/female/29.jpg"
    fallbackInitials="AB"
    fallbackColor={0}
    showOnlineIndicator
    size="medium"
  />
);
```

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

### InputSearch Component Props

Source: https://docs.craftreactnative.com/docs/components/input-search

Details the props available for the InputSearch component. It inherits all props from React Native's TextInputProps and adds specific props for custom actions and accessories.

```markdown
Prop| Type| Default  
---|---|---  
`onPress?`| `() => void`| -
`leftAccessory?`| `ReactNode`| -
`rightAccessory?`| `ReactNode`| -
```

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

### Import and Use SliderDual Component - React Native

Source: https://docs.craftreactnative.com/docs/components/slider-dual

Import the SliderDual component and implement it in a React Native screen. The component accepts min/max range values and provides a callback function (onValuesChange) that returns the selected min and max values when the user adjusts the slider knobs.

```typescript
import { SliderDual } from "@/craftrn-ui/components/SliderDual";

export const Screen = () => (
  <SliderDual
    min={0}
    max={100}
    onValuesChange={({ min, max }) => {
      console.log("min value:", min);
      console.log("max value:", max);
    }}
  />
);
```

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

### Use PhotoCarousel Component in React Native

Source: https://docs.craftreactnative.com/docs/components/photo-carousel

Demonstrates how to implement the PhotoCarousel component in a React Native screen component. It accepts a photos array with id and uri properties, and supports customizable carousel height and dot styling.

```typescript
import { PhotoCarousel } from "@/craftrn-ui/components/PhotoCarousel";

export const Screen = () => (
  <PhotoCarousel
    photos={[
      { id: "1", uri: "https://picsum.photos/200/300" },
      { id: "2", uri: "https://picsum.photos/200/300" },
      { id: "3", uri: "https://picsum.photos/200/300" }
    ]}
    carouselHeight={200}
  />
);
```

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

### Implement Slider Component in React Native

Source: https://docs.craftreactnative.com/docs/components/slider

Create a functional component using the Slider component with min/max range constraints and value change callback. The component displays a horizontal bar with a draggable knob to set the selected value.

```typescript
import { Slider } from "@/craftrn-ui/components/Slider";

export const Screen = () => (
  <Slider
    min={0}
    max={100}
    initialValue={50}
    onValueChange={(value) => {
      console.log("value:", value);
    }}
  />
);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.