react-native-bottom-select-picker

React Native Bottom Select Picker is a library that provides a customizable Picker component for React Native applications. This library simplifies the process of creating picker menus and provides a variety of options to customize the picker

Getting started

npm install react-native-bottom-select-picker

or

yarn add react-native-bottom-select-picker

Linking

cd ios && pod install

Picker Props

| # | Prop | Params | isRequired | Description | | --- | ----------------- | -------------------------------------- | ---------- | ------------------------------------------------------------------------------------------ | | 1 | data | PickerItem[] | true | { label: string, value: string } | | 2 | value | String | true | Default value | | 3 | onChange | (value: string) => void | true | Selection callback | | 4 | placeholder | String | true | The string that will be rendered before picker has been selected, and show in header title | | 5 | search | Boolean | no | Show search input in picker modal | | 6 | searchPlaceholder | String | no | Placeholder in TextInput search | | 7 | disable | Boolean | no | Specifies the disabled state of the Picker | | 8 | containerStyle | ViewStyle | no | Styling for container Picker | | 9 | containerTextStyle| TextStyle | no | Styling for container text Picker | | 10 | renderArrow | (pickerShown) => ReactNode | no | Custom arrow icon | | 11 | closeIcon | () => ReactNode | no | Custom close icon modal header | | 12 | renderItem | ({ item, isSelected }) => ReactElement | no | Custom render item in list modal | | 13 | multiple | boolean | no | Multiple select values |

Picker Example

const data: PickerItem[] = [
  {
    label: 'Apple',
    value: 'Apple',
  },
  {
    label: 'Orange',
    value: 'Orange',
  },
  ...
];

Simple Picker

import { Picker, type PickerItem } from 'react-native-bottom-select-picker';

const [value, setValue] = useState<string>('');

<View>
  <Text>Simple Picker</Text>
  <Picker
    placeholder={'Select your favorite color'}
    data={data}
    value={value}
    onChange={setValue}
  />
</View>;

Picker with search

import { Picker, type PickerItem } from 'react-native-bottom-select-picker';

const [value, setValue] = useState<string>('');

<View>
  <Text>Picker with search</Text>
  <Picker
    placeholder={'Select your favorite fruit'}
    data={data}
    value={value}
    onChange={setValue}
    search
  />
</View>;

Picker disabled

import { Picker, type PickerItem } from 'react-native-bottom-select-picker';

const [value, setValue] = useState<string>('');

<View>
  <Text>Picker disabled</Text>
  <Picker
    placeholder={'Select your favorite fruit'}
    data={data}
    value={value}
    onChange={setValue}
    disable
  />
</View>;

Picker with multiple item choices

import { Picker, type PickerItem } from 'react-native-bottom-select-picker';

const [multipleValue, setMultipleValue] = useState<string[]>([]);

<View>
  <Text>Picker with multiple item choices</Text>
  <Picker
    placeholder={'Select your favorite fruits'}
    data={data}
    value={multipleValue}
    onChange={setMultipleValue}
    multiple
  />
</View>