NativewindUI

https://nativewindui.com/
Admin
NativewindUI offers a collection of 30+ beautiful, native-feeling UI components and templates for...
Tokens:45,179
Snippets:310
Trust Score:5.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start the project

Source: https://nativewindui.com/installation/manual

Execute this command to start the development server after the prebuild process.

```bash
npm run start
```

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

### Toolbar Implementation Example

Source: https://nativewindui.com/component/toolbar

A full screen example demonstrating how to toggle between different Toolbar configurations using state.

```typescript
import * as React from 'react';
import { ScrollView, View } from 'react-native';

import { Button } from '@/components/nativewindui/Button';
import { Text } from '@/components/nativewindui/Text';
import { Toolbar, ToolbarCTA, ToolbarIcon } from '@/components/nativewindui/Toolbar';

export default function Screen() {
  const [example, setExample] = React.useState(0);
  return (
    <>
      <ScrollView contentContainerClassName="flex-1">
        <View className="flex-1 items-center justify-center gap-1.5">
          <Button onPress={() => setExample((prev) => (prev === 2 ? 0 : prev + 1))}>
            <Text>Change Example</Text>
          </Button>
          <Text variant="footnote" className="text-muted-foreground">
            Showing example {example + 1}/3
          </Text>
        </View>
      </ScrollView>
      {example === 0 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          leftView={
            <>
              <ToolbarIcon icon={{ name: 'bookmark' }} />
              <ToolbarIcon icon={{ name: 'trash' }} />
            </>
          }
          rightView={<ToolbarCTA icon={{ name: 'square.and.pencil' }} />}
        />
      )}
      {example === 1 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          iosHint="Hint for iOS"
          leftView={<ToolbarIcon icon={{ name: 'bookmark' }} />}
          rightView={<ToolbarCTA icon={{ name: 'square.and.pencil' }} />}
        />
      )}
      {example === 2 && (
        <Toolbar
          className="absolute bottom-0 left-0 right-0"
          iosHint="Hint for iOS"
          rightView={<ToolbarCTA icon={{ name: 'square.and.pencil' }} />}
        />
      )}
    </>
  );
}
```

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

### Install Form dependencies

Source: https://nativewindui.com/component/form

Install the required keyboard controller package to support form interactions.

```bash
npx expo install react-native-keyboard-controller
```

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

### Installation Commands

Source: https://nativewindui.com/component/text

Commands to add the Text component and its required dependencies.

```bash
npx nwui-cli@latest add text
```

```bash
npx expo install react-native-uitextview
```

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

### Installation Commands

Source: https://nativewindui.com/component/picker

Commands to add the picker component and its required dependency.

```bash
npx nwui-cli@latest add picker
```

```bash
npx expo install @react-native-picker/picker
```

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

### Install Dependencies

Source: https://nativewindui.com/component/button

Install the required @rn-primitives/slot dependency.

```bash
npx expo install @rn-primitives/slot
```

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

### Text Component Implementation Example

Source: https://nativewindui.com/component/text

A full screen example demonstrating various text variants and layout usage.

```typescript
import { Stack } from 'expo-router';
import { View, ScrollView } from 'react-native';

import { Text } from '@/components/nativewindui/Text';

export default function TextScreen() {
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativewindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerTransparent: true,
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Text
          </Text>

          <View className="gap-2">
            <Text variant="largeTitle" className="text-center">
              Large Title
            </Text>
            <Text variant="title1" className="text-center">
              Title 1
            </Text>
            <Text variant="title2" className="text-center">
              Title 2
            </Text>
            <Text variant="title3" className="text-center">
              Title 3
            </Text>
            <Text variant="heading" className="text-center">
              Heading
            </Text>
            <Text variant="body" className="text-center">
              Body
            </Text>
            <Text variant="callout" className="text-center">
              Callout
            </Text>
            <Text variant="subhead" className="text-center">
              Subhead
            </Text>
            <Text variant="footnote" className="text-center">
              Footnote
            </Text>
            <Text variant="caption1" className="text-center">
              Caption 1
            </Text>
            <Text variant="caption2" className="text-center">
              Caption 2
            </Text>
          </View>
        </View>
      </ScrollView>
    </>
  );
}
```

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

### Install Button Component

Source: https://nativewindui.com/component/button

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

```bash
npx nwui-cli@latest add button
```

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

### Install Expo Store Review Dependency

Source: https://nativewindui.com/component/ratings-indicator

Command to install the required expo-store-review dependency.

```bash
npx expo install expo-store-review
```

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

### NativewindUI Usage Example

Source: https://nativewindui.com/installation/manual

A complete screen example demonstrating the use of FlashList, custom Text, and Icon components within a layout.

```typescript
import { useHeaderHeight } from 'expo-router/react-navigation';
import { FlashList } from '@shopify/flash-list';
import { cssInterop } from 'nativewind';
import * as React from 'react';
import {
  Linking,
  useWindowDimensions,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Icon } from '@/components/nativewindui/Icon';
import { Text } from '@/components/nativewindui/Text';
import { useColorScheme } from '@/lib/useColorScheme';

cssInterop(FlashList, {
  className: 'style',
  contentContainerClassName: 'contentContainerStyle',
});

export default function Screen() {
  return (
    <FlashList
      contentInsetAdjustmentBehavior="automatic"
      keyboardShouldPersistTaps="handled"
      data={COMPONENTS}
      contentContainerClassName="py-4"
      keyExtractor={keyExtractor}
      ItemSeparatorComponent={renderItemSeparator}
      renderItem={renderItem}
      ListEmptyComponent={COMPONENTS.length === 0 ? ListEmptyComponent : undefined}
    />
  );
}

function ListEmptyComponent() {
  const insets = useSafeAreaInsets();
  const dimensions = useWindowDimensions();
  const headerHeight = useHeaderHeight();
  const { colors } = useColorScheme();
  const height = dimensions.height - headerHeight - insets.bottom - insets.top;

  return (
    <View style={{ height }} className="flex-1 items-center justify-center gap-1 px-12">
      <Icon name="doc.badge.plus" size={42} color={colors.grey} />
      <Text variant="title3" className="pb-1 text-center font-semibold">
        No Components Installed
      </Text>
      <Text color="tertiary" variant="subhead" className="pb-4 text-center">
        You can install any of the free components from the{' '}
        <Text
          onPress={() => Linking.openURL('https://nativewindui.com')}
          variant="subhead"
          className="text-primary">
          NativewindUI
        </Text>
        {' website.'}
      </Text>
    </View>
  );
}

type ComponentItem = { name: string; component: React.FC };

function keyExtractor(item: ComponentItem) {
  return item.name;
}

function renderItemSeparator() {
  return <View className="p-2" />;
}

function renderItem({ item }: { item: ComponentItem }) {
  return (
    <Card title={item.name}>
      <item.component />
    </Card>
  );
}

function Card({ children, title }: { children: React.ReactNode; title: string }) {
  return (
    <View className="px-4">
      <View className="gap-4 rounded-xl border border-border bg-card p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
        <Text className="text-center text-sm font-medium tracking-wider opacity-60">{title}</Text>
        {children}
      </View>
    </View>
  );
}

const COMPONENTS: ComponentItem[] = [];
```

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

### Basic Usage

Source: https://nativewindui.com/component/picker

Minimal example showing how to import and use the Picker and PickerItem components.

```typescript
import { Picker, PickerItem } from '@/components/nativewindui/Picker';
```

```typescript
  const [picker, setPicker] = React.useState('blue');
  
  return (
    <Picker selectedValue={picker} onValueChange={(itemValue) => setPicker(itemValue)}>
      <PickerItem
        label="Red"
        value="red"
        color="red"
      />
      <PickerItem
        label="Blue"
        value="blue"
        color="blue"
      />
    </Picker>
  );
```

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

### Install Date Picker Dependencies

Source: https://nativewindui.com/component/date-picker

Command to install the required community datetimepicker dependency.

```bash
npx expo install @react-native-community/datetimepicker
```

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

### TextField Implementation Example

Source: https://nativewindui.com/component/text-field

Example demonstrating a TextField with custom left and right views, labels, and variant configuration.

```tsx
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              label="Worth of Database"
              placeholder="Type here..."
              leftView={
                <View className="ios:pl-0 justify-center pl-2">
                  <Icon
                    color={colors.grey3}
                    sfSymbol={{ colors: [colors.primary] }}
                    name="externaldrive.fill"
                    size={20}
                  />
                </View>
              }
              rightView={
                <View className="justify-center pr-3">
                  <Icon color={colors.grey3} name="dollarsign" size={20} />
                </View>
              }
            />
          </FormItem>
        </FormSection>
      </Form>
    </KeyboardAwareScrollView>
  );
}
```

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

### Install Activity Indicator

Source: https://nativewindui.com/component/activity-indicator

Command to add the component to your project via the CLI.

```bash
npx nwui-cli@latest add activity-indicator
```

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

### Install Progress Indicator CLI

Source: https://nativewindui.com/component/progress-indicator

Command to add the component to your project using the CLI.

```bash
npx nwui-cli@latest add progress-indicator
```

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

### Install NativewindUI dependencies

Source: https://nativewindui.com/installation/manual

Run this command in the root of your Expo project to install all necessary packages.

```bash
npx expo install nativewind react-native-reanimated react-native-worklets tailwindcss@^3.4.0 prettier-plugin-tailwindcss rn-icon-mapper expo-symbols expo-font @expo/vector-icons @shopify/flash-list class-variance-authority clsx expo-dev-client tailwind-merge
```

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

### Install Action Sheet Dependency

Source: https://nativewindui.com/component/action-sheet

Install the required peer dependency for the Action Sheet component.

```bash
npx expo install @expo/react-native-action-sheet
```

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

### Install Slider dependencies

Source: https://nativewindui.com/component/slider

Required dependency installation for the underlying slider library.

```bash
npx expo install @react-native-community/slider
```

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

### Install Toggle Component

Source: https://nativewindui.com/component/toggle

Command to add the Toggle component to your project using the CLI.

```bash
npx nwui-cli@latest add toggle
```

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

### Install Action Sheet via CLI

Source: https://nativewindui.com/component/action-sheet

Use the CLI to add the Action Sheet component to your project.

```bash
npx nwui-cli@latest add action-sheet
```

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

### Implementing ContextMenu with Auxiliary Preview

Source: https://nativewindui.com/component/context-menu

This example demonstrates a ContextMenu with an auxiliary preview containing emoji buttons and custom item press handling.

```tsx
  return (
    <ContextMenu
      items={messageContextMenuItems}
      materialAlign="start"
      auxiliaryPreviewPosition="center"
      iosPreviewConfig={IOS_PREVIEW_CONFIG}
      onItemPress={(item) => {
        if (item.actionKey === 'pin') {
          setIsPinned((prev) => !prev);
        }
      }}
      renderAuxiliaryPreview={() => {
        return (
          <View
            className={cn(
              'bg-card flex-row gap-1 rounded-full p-0.5',
              Platform.OS === 'ios' && 'bg-card/60 dark:bg-border/70'
            )}>
            <EmojiButton
              onPress={handleEmojiPress('love')}
              selectedEmoji={selectedEmoji}
              name="love"
            />
            <EmojiButton
              onPress={handleEmojiPress('like')}
              selectedEmoji={selectedEmoji}
              name="like"
            />
            <EmojiButton
              onPress={handleEmojiPress('dislike')}
              selectedEmoji={selectedEmoji}
              name="dislike"
            />
            <EmojiButton
              onPress={handleEmojiPress('exclamation')}
              selectedEmoji={selectedEmoji}
              name="exclamation"
            />
            <EmojiButton
              onPress={handleEmojiPress('question')}
              selectedEmoji={selectedEmoji}
              name="question"
            />
          </View>
        );
      }}>
      <Pressable className="ios:rounded-2xl android:border-muted/70 border-muted rounded-xl border border-dashed">
        <Card>
          <CardBadge className="bg-muted/20 dark:bg-muted/30 android:opacity-70 -z-10">
            <Text>Long press me</Text>
          </CardBadge>
          <CardContent className="ios:pt-10 pt-4">
            <View className="flex-row items-center gap-3">
              <Avatar alt="Zach Nugent's Avatar" className="h-16 w-16">
                <AvatarImage source={AVATAR_SOURCE} />
                <AvatarFallback>
                  <Text className="dark:android:text-background text-white">ZN</Text>
                </AvatarFallback>
              </Avatar>
              <View>
                <Text variant="caption2" className="text-muted-foreground px-1 pb-1">
                  Zach Nugent
                </Text>
                <View
                  className={cn(
                    'bg-background dark:bg-muted-foreground relative rounded-2xl px-3 py-1.5',
                    Platform.OS === 'ios' && 'dark:bg-muted'
                  )}>
                  <Text>Hey, got a minute?</Text>
                  {!selectedEmoji ? null : (
                    <Animated.View
                      key={selectedEmoji}
                      entering={ZoomIn.springify().damping(22).mass(0.9).stiffness(350)}
                      exiting={ZoomOut.duration(150)}
                      className={cn('bg-card absolute -top-4 rounded-full p-px', '-right-3')}>
                      <View className="bg-primary rounded-full p-1">
                        <Icon {...EMOJI_TO_ICON[selectedEmoji]} size={18} color="white" />
                        {Platform.OS === 'ios' && (
                          <>
                            <View
                              className={cn(
                                'bg-primary absolute bottom-0 h-2 w-2 rounded-full',
                                'right-0'
                              )}
                            />
                            <View
                              className={cn(
                                'bg-primary absolute -bottom-1 h-1 w-1 rounded-full',
                                '-right-1'
                              )}
                            />
                          </>
                        )}
                      </View>
                    </Animated.View>
                  )}
                </View>
              </View>
            </View>
          </CardContent>
        </Card>
      </Pressable>
    </ContextMenu>
  );
}
```

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

### Picker Implementation Example

Source: https://nativewindui.com/component/picker

A full screen implementation showing how to integrate the Picker component with state management.

```typescript
import { Stack } from 'expo-router';
import * as React from 'react';
import { View, Text, ScrollView, Pressable } from 'react-native';

import { Picker, PickerItem } from '@/components/nativewindui/Picker';
import { useColorScheme } from '@/lib/useColorScheme';

export default function PickerScreen() {
  const [picker, setPicker] = React.useState('blue');
  const { colors } = useColorScheme();
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativewindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerTransparent: true,
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-3xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Picker
          </Text>
          <Picker selectedValue={picker} onValueChange={(itemValue) => setPicker(itemValue)}>
            <PickerItem
              label="Red"
              value="red"
              color={colors.foreground}
              style={{
                backgroundColor: colors.root,
              }}
            />
            <PickerItem
              label="Blue"
              value="blue"
              color={colors.foreground}
              style={{
                backgroundColor: colors.root,
              }}
            />
            <PickerItem
              label="Green"
              value="green"
              color={colors.foreground}
              style={{
                backgroundColor: colors.root,
              }}
            />
          </Picker>
        </View>
      </ScrollView>
    </>
  );
}
```

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

### Implement Context Menu with items

Source: https://nativewindui.com/component/context-menu

Example showing how to define context menu items using utility functions and integrate them into a component with a preview.

```typescript
import * as Haptics from 'expo-haptics';
import * as React from 'react';
import { Image, Platform, Pressable, ScrollView, View } from 'react-native';
import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/nativewindui/Avatar';
import { Button } from '@/components/nativewindui/Button';
import {
  addOpacityToRgb,
  Card,
  CardBadge,
  CardContent,
  CardImage,
  CardSubtitle,
  CardTitle,
} from '@/components/nativewindui/Card';
import { ContextMenu } from '@/components/nativewindui/ContextMenu';
import { createContextItem, createContextSubMenu } from '@/components/nativewindui/ContextMenu/utils';
import { Icon } from '@/components/nativewindui/Icon';
import { IconProps } from '@/components/nativewindui/Icon/types';
import { Text } from '@/components/nativewindui/Text';
import { cn } from '@/lib/cn';
import { useColorScheme } from '@/lib/useColorScheme';

export default function Screen() {
  return (
    <ScrollView contentContainerClassName="gap-6 p-4 py-6">
      <ProjectCard />
      <MessageCard />
      <OrderCard />
      <View className="pb-safe" />
    </ScrollView>
  );
}

const IOS_PREVIEW_CONFIG = {
  borderRadius: 16,
} as const;

const PROJECT_IMAGE_SOURCE = {
  uri: 'https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
};

function ProjectCard() {
  const { colors } = useColorScheme();
  const [isFavorite, setIsFavorite] = React.useState(false);

  const projectContextMenuItems = React.useMemo(
    () => [
      createContextItem({ actionKey: 'open', title: 'Open' }),
      createContextItem({
        actionKey: 'mark-as-favorite',
        title: isFavorite ? 'Unmark as Favorite' : 'Mark as Favorite',
        icon: Platform.select({
          ios: { name: isFavorite ? 'heart.fill' : 'heart' },
        }),
        state: Platform.select({ android: { checked: isFavorite } }),
        keepOpenOnPress: true,
      }),
      createContextItem({ actionKey: 'rename', title: 'Rename' }),
      createContextSubMenu(
        {
          title: 'Share this project',
          iOSItemSize: 'small',
          iOSType: 'inline',
        },
        [
          createContextItem({
            actionKey: 'link',
            title: 'Link',
            icon: { name: 'link' },
          }),
          createContextItem({
            actionKey: 'email',
            title: 'Email',
            icon: { name: 'envelope' },
          }),
          createContextItem({
            actionKey: 'message',
            title: 'Message',
            icon: { name: 'message' },
          }),
        ]
      ),
    ],
    [isFavorite]
  );

  return (
    <ContextMenu
      items={projectContextMenuItems}
      auxiliaryPreviewPosition="center"
      iosPreviewConfig={IOS_PREVIEW_CONFIG}
      materialMinWidth={240}
      iosRenderPreview={() => {
        return <Image className="aspect-square w-screen" source={PROJECT_IMAGE_SOURCE} />;
      }}
      onItemPress={(item) => {
        if (item.actionKey === 'mark-as-favorite') {
          setIsFavorite((prev) => !prev);
        }
      }}>
      <Pressable className="ios:rounded-2xl android:border-muted/70 border-muted rounded-xl border border-dashed">
        <Card>
          <CardImage
            source={PROJECT_IMAGE_SOURCE}
            materialRootClassName="absolute top-0 left-0 right-0 bottom-0 rounded-xl"
          />
          <CardBadge>
            <Text>Long press me</Text>
          </CardBadge>
          <CardContent
            className="pt-48"
            linearGradientColors={[
              'transparent',
              'transparent',
              addOpacityToRgb(colors.card, 0.8),
              colors.card,
            ]}>
            <CardTitle>Project Proposal</CardTitle>
            <CardSubtitle>Updated yesterday</CardSubtitle>
          </CardContent>
        </Card>
      </Pressable>
    </ContextMenu>
  );
}
```

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

### Toggle Usage Examples

Source: https://nativewindui.com/component/toggle

Basic import and implementation snippets for the Toggle component.

```tsx
import { Toggle } from '@/components/nativewindui/Toggle';
```

```tsx
const [switchValue, setSwitchValue] = React.useState(true);

return <Toggle value={switchValue} onValueChange={setSwitchValue} />
```

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

### Install Date Picker CLI

Source: https://nativewindui.com/component/date-picker

Command to add the Date Picker component to your project via the CLI.

```bash
npx nwui-cli@latest add date-picker
```

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

### Implement AdaptiveSearchHeader

Source: https://nativewindui.com/component/adaptive-search-header

Example usage of the AdaptiveSearchHeader component within a screen.

```tsx
import * as React from 'react';
import { Pressable, ScrollView, View } from 'react-native';
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
import Animated, { FadeIn, ZoomOut } from 'react-native-reanimated';

import { useColorScheme } from '@/lib/useColorScheme';
import { Button } from '@/components/nativewindui/Button';
import { Icon } from '@/components/nativewindui/Icon';
import { Text } from '@/components/nativewindui/Text';
import { AdaptiveSearchHeader } from '../AdaptiveSearchHeader';
import { AdaptiveSearchBarMethods } from '../AdaptiveSearchHeader/types';

export default function AdaptiveHeaderScreen() {
  const { colors } = useColorScheme();
  const searchBarRef = React.useRef<AdaptiveSearchBarMethods>(null);

  function onTryNewSearch() {
    searchBarRef.current?.focus();
  }

  return (
    <>
      <AdaptiveSearchHeader
        iosTitle="Adaptive Search Header"
        iosIsLargeTitle={false}
        shadowVisible={false}
        backgroundColor="transparent"
        iosBackButtonTitle="Back"
        searchBar={{
          ref: searchBarRef,
          iosCancelButtonText: 'Cancel',
          materialRightView() {
            return (
              <Animated.View entering={FadeIn} exiting={ZoomOut}>
                <Button variant="plain" size="icon">
                  <Icon size={22} name="gearshape" color={colors.grey} />
                </Button>
              </Animated.View>
            );
          },
          content: (
            <KeyboardAvoidingView
              behavior="padding"
              className="ios:bg-background flex-1 items-center justify-center gap-0.5 p-4">
              <Text variant="title1" className="font-bold">
                Type anything
              </Text>
              <View className="flex-row items-center">
                <Text variant="callout" className="text-muted-foreground text-center">
                  This is a demo of the AdaptiveSearchHeader component.
                </Text>
              </View>
            </KeyboardAvoidingView>
          ),
        }}
      />
      <ScrollView contentContainerClassName="flex-1 items-center justify-center">
        <Text variant="title1" className="font-bold">
          No Results
        </Text>
        <View className="flex-row flex-wrap items-center">
          <Text variant="callout" className="text-muted-foreground text-center">
            There were no results.{' '}
          </Text>
          <Pressable onPress={onTryNewSearch}>
            <Text variant="callout" className="text-muted-foreground text-center">
              Try a new search.
            </Text>
          </Pressable>
        </View>
      </ScrollView>
    </>
  );
}
```

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

### Install Avatar Component

Source: https://nativewindui.com/component/avatar

Commands to add the Avatar component and its required dependencies to your project.

```bash
npx nwui-cli@latest add avatar
```

```bash
npx expo install @rn-primitives/avatar
```

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

### Install Slider component

Source: https://nativewindui.com/component/slider

Command to add the slider component to the project using the CLI.

```bash
npx nwui-cli@latest add slider
```

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

### Implement a Dropdown Menu

Source: https://nativewindui.com/component/dropdown-menu

A complete example showing how to define menu items using utility functions and integrate the DropdownMenu component with state management.

```typescript
import * as React from 'react';
import { Platform, View } from 'react-native';

import { Button } from '@/components/nativewindui/Button';
import { DropdownMenu } from '@/components/nativewindui/DropdownMenu';
import { createDropdownItem, createDropdownSubMenu } from '@/components/nativewindui/DropdownMenu/utils';
import { Text } from '@/components/nativewindui/Text';

export default function Screen() {
  const [isCompleted, setIsCompleted] = React.useState(false);
  const [isPinned, setIsPinned] = React.useState(false);

  const projectContextMenuItems = React.useMemo(
    () => [
      createDropdownItem({
        actionKey: 'mark-as-completed',
        title: isCompleted ? 'Unmark as Completed' : 'Mark as Completed',
        state: { checked: isCompleted },
        keepOpenOnPress: true,
      }),

      ...(Platform.OS === 'ios'
        ? [
            createDropdownSubMenu(
              {
                title: 'More',
              },
              [
                createDropdownItem({
                  actionKey: 'pin',
                  title: isPinned ? 'Unpin' : 'Pin',
                  icon: { name: isPinned ? 'pin.fill' : 'pin' },
                }),
                createDropdownItem({
                  actionKey: 'forward',
                  title: 'Forward',
                  icon: { name: 'arrowshape.turn.up.right' },
                }),
                createDropdownItem({
                  actionKey: 'delete',
                  title: 'Delete',
                  destructive: true,
                  icon: { name: 'trash', className: 'text-destructive' },
                }),
              ]
            ),
          ]
        : [
            createDropdownItem({
              actionKey: 'pin',
              title: isPinned ? 'Unpin' : 'Pin',
              icon: { name: isPinned ? 'pin.fill' : 'pin' },
              keepOpenOnPress: true,
            }),
            createDropdownItem({
              actionKey: 'forward',
              title: 'Forward',
              icon: { name: 'arrowshape.turn.up.right' },
            }),
            createDropdownItem({
              actionKey: 'delete',
              title: 'Delete',
              destructive: true,
              icon: { name: 'trash', className: 'text-destructive' },
            }),
          ]),
      createDropdownSubMenu(
        {
          title: 'Share',
          iOSItemSize: 'small',
          iOSType: 'inline',
        },
        [
          createDropdownItem({
            actionKey: 'link',
            title: 'Link',
            icon: { name: 'link' },
          }),
          createDropdownItem({
            actionKey: 'email',
            title: 'Email',
            icon: { name: 'envelope' },
          }),
          createDropdownItem({
            actionKey: 'message',
            title: 'Message',
            icon: { name: 'message' },
          }),
        ]
      ),
    ],
    [isCompleted, isPinned]
  );

  return (
    <>
      <View className="mb-32 flex-1 items-center justify-center gap-8 p-8">
        <DropdownMenu
          title="Options"
          items={projectContextMenuItems}
          materialMinWidth={240}
          onItemPress={(item) => {
            if (item.actionKey === 'pin') {
              setIsPinned((prev) => !prev);
            }
            if (item.actionKey === 'mark-as-completed') {
              setIsCompleted((prev) => !prev);
            }
          }}>
          <Button>
            <Text>Open Project Options</Text>
          </Button>
        </DropdownMenu>
      </View>
    </>
  );
}
```

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

### Implement a Checkbox list

Source: https://nativewindui.com/component/checkbox

A full screen example demonstrating how to integrate the Checkbox component within a list of todo items.

```tsx
import { Stack } from 'expo-router';
import { View } from 'react-native';

import { Checkbox } from '@/components/nativewindui/Checkbox';
import { Text } from '@/components/nativewindui/Text';

export default function CheckboxScreen() {
  return (
    <View className="flex-1 px-4 py-8">
      <Text variant="title1" className="pb-3 font-semibold">
        My Todo List
      </Text>
      <View className="border-border bg-card overflow-hidden rounded-lg border">
        <View className="flex-row items-center justify-between gap-4 px-5 py-3">
          <Text>Finish project report</Text>
          <Checkbox defaultChecked />
        </View>
        <View className="ios:ml-4 bg-border h-px w-full" />
        <View className="flex-row items-center justify-between gap-4 px-5 py-3">
          <Text>Buy groceries for dinner</Text>
          <Checkbox />
        </View>
        <View className="ios:ml-4 bg-border h-px w-full" />
        <View className="flex-row items-center justify-between gap-4 px-5 py-3">
          <Text>Read 10 pages of a book</Text>
          <Checkbox />
        </View>
        <View className="ios:ml-4 bg-border h-px w-full" />
        <View className="flex-row items-center justify-between gap-4 px-5 py-3">
          <Text>Call Mom to check in</Text>
          <Checkbox />
        </View>
      </View>
    </View>
  );
}
```

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

### Implement Badge in a Screen

Source: https://nativewindui.com/component/badge

Example showing various Badge configurations including default, count-based, and info variants within a screen layout.

```typescript
import { Stack } from 'expo-router';
import { View } from 'react-native';

import { Badge } from '@/components/nativewindui/Badge';
import { Icon } from '@/components/nativewindui/Icon';
import { useColorScheme } from '@/lib/useColorScheme';

export default function BadgeScreen() {
  const { colors } = useColorScheme();
  return (
    <>
      <Stack.Screen options={{ title: 'Badge' }} />
      <View className="flex-1 items-center justify-center py-4">
        <View className="flex-row gap-8">
          <View>
            <Icon name="message" color={colors.foreground} />
            <Badge />
          </View>
          <View>
            <Icon name="bell" color={colors.foreground} />
            <Badge>6</Badge>
          </View>
          <View>
            <Icon name="map" color={colors.foreground} />
            <Badge variant="info" />
          </View>
          <View>
            <Icon name="envelope" color={colors.foreground} />
            <Badge variant="info" maxCount={9}>
              10
            </Badge>
          </View>
        </View>
      </View>
    </>
  );
}
```

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

### Image Source Configuration

Source: https://nativewindui.com/component/context-menu

Example of an image source object used in the component.

```tsx
const ORDER_IMAGE_SOURCE = {
  uri: 'https://images.unsplash.com/photo-1644079446600-219068676743?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
};
```

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

### Implement Progress Indicator in a Screen

Source: https://nativewindui.com/component/progress-indicator

Example showing how to integrate the Progress Indicator with a timer to simulate progress updates.

```typescript
import { Stack } from 'expo-router';
import * as React from 'react';
import { View, Text, ScrollView } from 'react-native';

import { ProgressIndicator } from '@/components/nativewindui/ProgressIndicator';
import { useColorScheme } from '@/lib/useColorScheme';

export default function ProgressIndicatorScreen() {
  const [progress, setProgress] = React.useState(13);
  let id: ReturnType<typeof setInterval> | null = null;
  React.useEffect(() => {
    if (!id) {
      id = setInterval(() => {
        setProgress((prev) => (prev >= 99 ? 0 : prev + 5));
      }, 1000);
    }
    return () => {
      if (id) clearInterval(id);
    };
  }, []);
  const { colors } = useColorScheme();
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativewindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerTransparent: true,
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Progress Indicator
          </Text>
          <View className="p-4">
            <ProgressIndicator value={progress} />
          </View>
        </View>
      </ScrollView>
    </>
  );
}
```

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

### Install Ratings Indicator Component

Source: https://nativewindui.com/component/ratings-indicator

Command to add the ratings indicator component to your project via the CLI.

```bash
npx nwui-cli@latest add ratings-indicator
```

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

### Implement a Stepper with State

Source: https://nativewindui.com/component/stepper

Full example demonstrating how to manage state with a Stepper and animate the counter display using react-native-reanimated.

```typescript
import { Stack } from 'expo-router';
import * as React from 'react';
import { View } from 'react-native';
import Animated, {
  FadeInUp,
  FadeOutDown,
  LayoutAnimationConfig,
  ZoomInEasyUp,
  ZoomOutEasyDown,
} from 'react-native-reanimated';

import { Text } from '@/components/nativewindui/Text';
import { Stepper } from '@/components/nativewindui/Stepper';

export default function StepperScreen() {
  const [count, setCount] = React.useState(0);
  function subtract() {
    setCount((prev) => (prev > 0 ? prev - 1 : 0));
  }
  function add() {
    setCount((prev) => prev + 1);
  }
  return (
    <>
      <Stack.Screen options={{ title: 'Stepper' }} />
      <View className="flex-1 items-center justify-center p-8">
        <View className="w-full flex-row items-center justify-between">
          <View className="flex-row items-center gap-1">
            <Text>Stepper: </Text>
            <FlipCounter count={count} />
          </View>
          <Stepper
            subtractButton={{ disabled: count === 0, onPress: subtract }}
            addButton={{ onPress: add }}
          />
        </View>
      </View>
    </>
  );
}

function FlipCounter({ count }: { count: number }) {
  const id = React.useId();
  return (
    <View className="overflow-hidden py-1">
      <LayoutAnimationConfig skipEntering>
        <Animated.View
          entering={FadeInUp.duration(120)}
          exiting={FadeOutDown.duration(120)}
          key={`${id}-wrapper-${count}`}>
          <Animated.View
            key={`${id}-inner-${count}`}
            entering={ZoomInEasyUp.duration(120)}
            exiting={ZoomOutEasyDown.duration(120)}>
            <Text className="text-primary font-medium">{count}</Text>
          </Animated.View>
        </Animated.View>
      </LayoutAnimationConfig>
    </View>
  );
}
```

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

### Implement a Segmented Control with dynamic content

Source: https://nativewindui.com/component/segmented-control

A full example showing how to use the Segmented Control to toggle between different content views based on the selected index.

```typescript
import * as React from 'react';
import { View } from 'react-native';

import { SegmentedControl } from '@/components/nativewindui/SegmentedControl';
import { Text } from '@/components/nativewindui/Text';

const VALUES = ['Week', 'Month', 'Year'];

const weekIndex = 0;
const monthIndex = 1;
const yearIndex = 2;

const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

const currentDate = new Date();
const currentDay = currentDate.getDate();
const currentMonth = MONTHS[currentDate.getMonth()];
const currentYear = currentDate.getFullYear();

export default function Screen() {
  const [selectedIndex, setSelectedIndex] = React.useState(0);
  return (
    <View className="flex-1 p-4">
      <SegmentedControl
        values={VALUES}
        selectedIndex={selectedIndex}
        onIndexChange={(index) => {
          setSelectedIndex(index);
        }}
      />
      <View className="flex-1 py-8">
        {selectedIndex === weekIndex && <WeekContent />}
        {selectedIndex === monthIndex && <MonthContent />}
        {selectedIndex === yearIndex && <YearContent />}
      </View>
    </View>
  );
}

function WeekContent() {
  return (
    <View className="flex-1 gap-4">
      <Text variant="largeTitle" className="font-bold">
        {currentMonth} {currentDay}
      </Text>
      <View className="border-border bg-card gap-2 rounded-lg border p-4">
        <Text className="text-muted-foreground font-medium">Total sales</Text>
        <Text variant="title1" className="font-bold">
          $100,000
        </Text>
      </View>
    </View>
  );
}

function MonthContent() {
  return (
    <View className="flex-1 gap-4">
      <Text variant="largeTitle" className="font-bold">
        {currentMonth} {currentYear}
      </Text>
      <View className="border-border bg-card gap-2 rounded-lg border p-4">
        <Text className="text-muted-foreground font-medium">Total sales</Text>
        <Text variant="title1" className="font-bold">
          $500,000
        </Text>
      </View>
    </View>
  );
}

function YearContent() {
  return (
    <View className="flex-1 gap-4">
      <Text variant="largeTitle" className="font-bold">
        {currentYear}
      </Text>
      <View className="border-border bg-card gap-2 rounded-lg border p-4">
        <Text className="text-muted-foreground font-medium">Total sales</Text>
        <Text variant="title1" className="font-bold">
          $1,000,000
        </Text>
      </View>
    </View>
  );
}
```

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

### Implement Form component

Source: https://nativewindui.com/component/form

Example usage of Form, FormSection, and FormItem components with TextField inputs inside a KeyboardAwareScrollView.

```tsx
import * as React from 'react';
import { Platform, View } from 'react-native';
import { KeyboardAwareScrollView, KeyboardGestureArea } from 'react-native-keyboard-controller';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Button } from '@/components/nativewindui/Button';
import { Form, FormItem, FormSection } from '@/components/nativewindui/Form';
import { Text } from '@/components/nativewindui/Text';
import { TextField } from '@/components/nativewindui/TextField';

export default function Screen() {
  const insets = useSafeAreaInsets();
  const [canSave, setCanSave] = React.useState(false);

  function onChange() {
    if (!canSave) {
      setCanSave(true);
    }
  }

  return (
    <KeyboardGestureArea interpolator="ios">
      <KeyboardAwareScrollView
        bottomOffset={8}
        keyboardShouldPersistTaps="handled"
        keyboardDismissMode="interactive"
        contentContainerStyle={{ paddingBottom: insets.bottom }}>
        <Form className="gap-5 px-4 pt-8">
          <FormSection materialIconProps={{ name: 'account-outline' }}>
            <FormItem>
              <TextField
                textContentType="none"
                autoComplete="off"
                label={Platform.select({ ios: undefined, default: 'First' })}
                leftView={Platform.select({ ios: <LeftLabel>First</LeftLabel> })}
                placeholder={Platform.select({ ios: 'required' })}
                onChange={onChange}
              />
            </FormItem>
            <FormItem>
              <TextField
                textContentType="none"
                autoComplete="off"
                label={Platform.select({ ios: undefined, default: 'Middle' })}
                leftView={Platform.select({ ios: <LeftLabel>Middle</LeftLabel> })}
                placeholder={Platform.select({ ios: 'optional' })}
                onChange={onChange}
              />
            </FormItem>
            <FormItem>
              <TextField
                textContentType="none"
                autoComplete="off"
                label={Platform.select({ ios: undefined, default: 'Last' })}
                leftView={Platform.select({ ios: <LeftLabel>Last</LeftLabel> })}
                placeholder={Platform.select({ ios: 'required' })}
                onChange={onChange}
              />
            </FormItem>
          </FormSection>
          {Platform.OS !== 'ios' && (
            <View className="items-end">
              <Button className="px-6">
                <Text>Save</Text>
              </Button>
            </View>
          )}
        </Form>
      </KeyboardAwareScrollView>
    </KeyboardGestureArea>
  );
}

function LeftLabel({ children }: { children: string }) {
  return (
    <View className="w-28 justify-center pl-2">
      <Text>{children}</Text>
    </View>
  );
}
```

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

### Initialize custom development client

Source: https://nativewindui.com/installation/manual

Run this command to clean and prebuild the project for a custom development client.

```bash
npx expo prebuild --clean
```

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

### Initialize Tailwind CSS

Source: https://nativewindui.com/installation/manual

Run this command to generate the tailwind.config.js file.

```bash
npx tailwindcss init
```

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

### Initialize Metro Configuration

Source: https://nativewindui.com/installation/manual

Command to generate a default metro.config.js file if one does not exist.

```bash
npx expo customize metro.config.js
```

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

### Basic Checkbox usage

Source: https://nativewindui.com/component/checkbox

A minimal example of rendering a single Checkbox component.

```tsx
<Checkbox />
```

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

### Scaffold a new NativewindUI project

Source: https://nativewindui.com/installation

Use this command to generate a new project with NativewindUI and a blank template pre-configured.

```bash
npx rn-new@latest --nativewindui --blank
```

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

### Implement Activity Indicator Screen

Source: https://nativewindui.com/component/activity-indicator

Example usage of the ActivityIndicator component within a screen layout.

```tsx
import { Stack } from 'expo-router';
import { View, Text, ScrollView } from 'react-native';

import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator';

export default function ActivityIndicatorScreen() {
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativewindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerTransparent: true,
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Activity Indicator
          </Text>
          <View className="p-4">
            <ActivityIndicator />
          </View>
        </View>
      </ScrollView>
    </>
  );
}
```

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

### createContextSubMenu

Source: https://nativewindui.com/component/context-menu

Creates a sub-menu structure for a context menu.

```APIDOC
## createContextSubMenu

### Description
Creates a sub-menu container for grouping context menu items.

### Parameters
- **options** (object) - Required - Configuration object containing the 'title' of the sub-menu.
- **items** (array) - Required - An array of context items or sub-menus to include within this sub-menu.
```

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

### Trigger Review Request Logic

Source: https://nativewindui.com/component/ratings-indicator

Example of how to trigger the review request within a React effect hook.

```typescript
  React.useEffect(() => {
    async function showRequestReview() {
      try {
        if (await StoreReview.hasAction()) {
          await StoreReview.requestReview();
        }
      } catch (error) {
        console.log(
          'FOR ANDROID: Make sure you meet all conditions to be able to test and use it: https://developer.android.com/guide/playcore/in-app-review/test#troubleshooting',
          error
        );
      } 
    }
    
    const timeout = setTimeout(() => {
      showRequestReview();
    }, 1000);

    return () => clearTimeout(timeout);
  }, []);
```
Tokens:
Raw