Picker

A picker displays one or more scrollable lists of distinct values that people can choose from.

import { Icon } from '@roninoss/icons';
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,
          headerRight() {
            return (
              <Pressable className="opacity-80 active:opacity-40">
                <View className="opacity-90">
                  <Icon name="cog-outline" color={colors.foreground} />
                </View>
              </Pressable>
            );
          },
        }}
      />
      <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">
            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>
    </>
  );
}

Installation

Run the following command:

npx nwui-cli@latest add picker

🚀

Ship.

Add the following dependencies to your project:

npx expo install @react-native-picker/picker

Copy/paste the following code to the specified file path:

~/components/nativewindui/Picker.tsx

Download

import { Picker as RNPicker } from '@react-native-picker/picker';
import { View } from 'react-native';

import { cn } from '~/lib/cn';
import { useColorScheme } from '~/lib/useColorScheme';

export function Picker<T>({
  mode = 'dropdown',
  style,
  dropdownIconColor,
  dropdownIconRippleColor,
  className,
  ...props
}: React.ComponentPropsWithoutRef<typeof RNPicker<T>>) {
  const { colors } = useColorScheme();
  return (
    <View
      className={cn(
        'ios:shadow-sm ios:shadow-black/5 border-background bg-background rounded-md border',
        className
      )}>
      <RNPicker
        mode={mode}
        style={
          style ?? {
            backgroundColor: colors.root,
            borderRadius: 8,
          }
        }
        dropdownIconColor={dropdownIconColor ?? colors.foreground}
        dropdownIconRippleColor={dropdownIconRippleColor ?? colors.foreground}
        {...props}
      />
    </View>
  );
}

export const PickerItem = RNPicker.Item;

🛸

Ship.

Usage

import { Picker, PickerItem } from '~/components/nativewindui/Picker';

  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>
  );

Props

Inherits props from @react-native-picker/picker