react-native-input-select

A fully customizable dropdown selection package for react-native android and iOS with multiple select and search capabilities.

Installation

With npm

1npm install react-native-input-select

With yarn

1yarn add react-native-input-select

Sandbox

See more examples in Sandbox

iOS

Android

Basic Usage

1import React from 'react';
2import Dropdown from 'react-native-input-select';
3
4export default function App() {
5  const [country, setCountry] = React.useState();
6
7  return (
8    <Dropdown
9      label="Country"
10      placeholder="Select an option..."
11      options={[
12        { label: 'Nigeria', value: 'NG' },
13        { label: 'Åland Islands', value: 'AX' },
14        { label: 'Algeria', value: 'DZ' },
15        { label: 'American Samoa', value: 'AS' },
16        { label: 'Andorra', value: 'AD' },
17      ]}
18      selectedValue={country}
19      onValueChange={(value) => setCountry(value)}
20      primaryColor={'green'}
21    />
22  );
23}

Advanced Usage With Flat List

1import React from 'react';
2import Dropdown from 'react-native-input-select';
3import { View, StyleSheet, Text, Button, Alert, Image } from 'react-native';
4
5export default function App() {
6  const [country, setCountry] = React.useState();
7
8  return (
9    <Dropdown
10      label="Customized components in list"
11      placeholder="Select multiple countries..."
12      options={countries.slice(0, 30)}
13      optionLabel={'name'}
14      optionValue={'code'}
15      selectedValue={country}
16      onValueChange={(itemValue: any) => setCountry(itemValue)}
17      isMultiple
18      isSearchable
19      primaryColor={'orange'}
20      dropdownStyle={{
21        borderWidth: 0, // To remove border, set borderWidth to 0
22      }}
23      dropdownIcon={
24        <Image
25          style={styles.tinyLogo}
26          source={{
27            uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
28          }}
29        />
30      }
31      dropdownIconStyle={{ top: 20, right: 20 }}
32      listHeaderComponent={
33        <View style={styles.customComponentContainer}>
34          <Text style={styles.text}>
35            💡 You can add any component to the top of this list
36          </Text>
37          <View style={styles.fixToText}>
38            <Button
39              title="Left button"
40              onPress={() => Alert.alert('Left button pressed')}
41              color="#007AFF"
42            />
43            <Button
44              title="Right button"
45              onPress={() => Alert.alert('Right button pressed')}
46            />
47          </View>
48        </View>
49      }
50      listFooterComponent={
51        <View style={styles.customComponentContainer}>
52          <Text>You can add any component to the bottom of this list</Text>
53        </View>
54      }
55      modalControls={{
56        modalOptionsContainerStyle: {
57          padding: 10,
58          backgroundColor: 'cyan',
59        },
60        modalProps: {
61          supportedOrientations: [
62            'portrait',
63            'portrait-upside-down',
64            'landscape',
65            'landscape-left',
66            'landscape-right',
67          ],
68          transparent: false,
69        },
70      }}
71      listComponentStyles={{
72        listEmptyComponentStyle: {
73          color: 'red',
74        },
75        itemSeparatorStyle: {
76          opacity: 0,
77          borderColor: 'white',
78          borderWidth: 2,
79          backgroundColor: 'cyan',
80        },
81        sectionHeaderStyle: {
82          padding: 10,
83          backgroundColor: 'cyan',
84        },
85      }}
86      listControls={{
87        selectAllText: 'Choose everything',
88        unselectAllText: 'Remove everything',
89        selectAllCallback: () => Alert.alert('You selected everything'),
90        unselectAllCallback: () => Alert.alert('You removed everything'),
91        emptyListMessage: 'No record found',
92      }}
93      selectedItemsControls={{
94        removeItemIcon: (
95          <Image
96            source={{
97              uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA',
98            }}
99            style={{ tintColor: 'white', height: 12, width: 12 }}
100          />
101        ),
102        onRemoveItem: () => Alert.alert('Item was removed'),
103        showRemoveIcon: true,
104      }}
105    />
106  );
107}
108
109const styles = StyleSheet.create({
110  customComponentContainer: {
111    paddingHorizontal: 20,
112    paddingVertical: 10,
113  },
114  text: {
115    marginBottom: 20,
116  },
117  fixToText: {
118    flexDirection: 'row',
119    justifyContent: 'space-between',
120  },
121  tinyLogo: {
122    width: 20,
123    height: 20,
124  },
125  radioButton: {
126    width: 20,
127    height: 20,
128    borderRadius: 20 / 2,
129    borderWidth: 3,
130    borderColor: 'white',
131  },
132});

Advanced Usage with Section List

1<DropdownSelect
2  label="Menu"
3  placeholder="Select multiple dishes..."
4  options={[
5    {
6      title: 'Main dishes',
7      data: [
8        { label: 'Pizza', value: 'A' },
9        { label: 'Burger', value: 'B' },
10        { label: 'Risotto', value: 'C' },
11      ],
12    },
13    {
14      title: 'Sides',
15      data: [
16        { label: 'Ice cream', value: 'D' },
17        { label: 'Cheesecake', value: 'E' },
18      ],
19    },
20    {
21      title: 'Drinks',
22      data: [
23        { label: 'Water', value: 'F' },
24        { label: 'Coke', value: 'G' },
25        { label: 'Juice', value: 'H' },
26      ],
27    },
28  ]}
29  selectedValue={menu}
30  onValueChange={(itemValue: any) => setMenu(itemValue)}
31  isMultiple
32  isSearchable
33  primaryColor={'deepskyblue'}
34  listComponentStyles={{
35    sectionHeaderStyle: {
36      padding: 10,
37      backgroundColor: 'green',
38      color: 'white',
39      width: '30%',
40    },
41  }}
42/>

For more examples visit our wiki page

Props

Proptypes	Datatype	Example
label	string or ReactComponent	Countries or <Text> You can add any component here <Text>
placeholder	string	Select a country
options	Array	[{ name: 'Nigeria', code: 'NG' }, { name: 'Albania', code: 'AL' }]
optionLabel	string	name
optionValue	string	code
error	string	This is a requiredfield
helperText	string	Only few countries are listed
selectedValue	string or Array	AL or [AL, AX]
onValueChange	function	()=>{}
isMultiple	Boolean	true
isSearchable	Boolean	true
disabled	Boolean	true
dropdownIcon	React Component	Image or <Text> Show <Text>
labelStyle	Object	{color: 'red', fontSize: 15, fontWeight: '500'}
placeholderStyle	Object	{color: 'blue', fontSize: 15, fontWeight: '500'}
dropdownStyle	Object	{borderColor: 'blue', margin: 5, borderWidth:0 ...}
dropdownContainerStyle	Object	{backgroundColor: 'red', width: '30%', ...}
dropdownIconStyle	Object	{top: 10 , right: 10, ...}
selectedItemStyle	Object	{fontWeight: '600', color: 'yellow', ...}
multipleSelectedItemStyle	Object	{backgroundColor: 'red', color: 'yellow', ...}
dropdownErrorStyle	Object	{borderWidth: 2, borderStyle: 'solid'}
dropdownErrorTextStyle	Object	{color: 'red', fontWeight:'500'}
dropdownHelperTextStyle	Object	{color: 'green', fontWeight:'500'}
primaryColor	string	blue
autoCloseOnSelect	boolean	false
listHeaderComponent	React Component	<Text> You can add any component here </Text>
listFooterComponent	React Component	<Text> You can add any component here <Text>
listComponentStyles	Object	{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}
listEmptyComponent	React Component	<Text> You can add any component here <Text>
checkboxControls	Object	{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle, checkboxComponent?: React.ReactNode, checkboxDisabledStyle?: ViewStyle, checkboxUnselectedColor?: ColorValue}
listControls	Object	{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, hideSelectAll: boolean, emptyListMessage: 'No record found', keyboardShouldPersistTaps: "always" }
searchControls	Object	{ textInputStyle: ViewStyle | TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps, searchCallback:(value)=>{}}
modalControls	Object	{ modalBackgroundStyle: ViewStyle, modalOptionsContainerStyle: ViewStyle, modalProps: ModalProps}
minSelectableItems	number	3
maxSelectableItems	number	5
selectedItemsControls	Object	{ removeItemIcon: ReactNode, onRemoveItem: ()=>{}, showRemoveIcon: boolean}
ref	useRef<DropdownSelectHandle | null>(null)	Use this to open or close the modal as needed e.g dropdownRef.current?.open() or dropdownRef.current?.close()

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Made with contrib.rocks.

Discussion

For discussion and feedback on this library. You can access it by heading over to the Discussions Tab on Github. We've created some sections to keep the discussion focused.

Title	Topic
Announcements 📣	General announcements about this library.
Show and tell 🙌	Show off something you've made out of this library
Ideas 💡	A place to Share ideas for new features.
Polls 🗳️	Take a vote from the community
Q&A 🤝	A place to ask the community for help on the New Architecture topics
General 💬	Chat about anything and everything here

License

MIT

Video Demo

https://github.com/azeezat/react-native-select/assets/9849221/194bf5cf-1a2d-4ca6-9585-05d6bb987aba