⭐ React Native Dropdown Select List

Light weight and Easy to use dropdown select list.

• Style it your way with style props of every view.
• Smooth performance on all platforms IOS, Android and Web.
• Change Font Family Easily which community picker lacks.
• Zero dependencies

Compatibility

iOS	Android	Web	Expo
✅	✅	✅	✅

🔌 Installation

1$ npm install react-native-dropdown-select-list
2

OR

1$ yarn add react-native-dropdown-select-list

😎 Basic Usage for SelectList

1import { SelectList } from 'react-native-dropdown-select-list'
2
3const App = () => {
4
5  const [selected, setSelected] = React.useState("");
6  
7  const data = [
8      {key:'1', value:'Mobiles', disabled:true},
9      {key:'2', value:'Appliances'},
10      {key:'3', value:'Cameras'},
11      {key:'4', value:'Computers', disabled:true},
12      {key:'5', value:'Vegetables'},
13      {key:'6', value:'Diary Products'},
14      {key:'7', value:'Drinks'},
15  ]
16
17  return(
18    <SelectList 
19        setSelected={(val) => setSelected(val)} 
20        data={data} 
21        save="value"
22    />
23  )
24
25};

😎 Basic Usage for MultipleSelectList

1import { MultipleSelectList } from 'react-native-dropdown-select-list'
2
3const App = () => {
4
5  const [selected, setSelected] = React.useState([]);
6  
7  const data = [
8      {key:'1', value:'Mobiles', disabled:true},
9      {key:'2', value:'Appliances'},
10      {key:'3', value:'Cameras'},
11      {key:'4', value:'Computers', disabled:true},
12      {key:'5', value:'Vegetables'},
13      {key:'6', value:'Diary Products'},
14      {key:'7', value:'Drinks'},
15  ]
16
17  return(
18    <MultipleSelectList 
19        setSelected={(val) => setSelected(val)} 
20        data={data} 
21        save="value"
22        onSelect={() => alert(selected)} 
23        label="Categories"
24    />
25  )
26
27};

For Live Demo (Expo Snack)

🔧 General Props

Applicable on both SelectList & MultipleSelectList Components

Name	Type	Description
save	string	Pass ('key' or 'value') to save data of your choice in your local state variable
onSelect	Function	Pass any function that you want to trigger immediately after a value is selected
placeholder	String	Placeholder text that will be displayed in the select box
search	boolean	set to false if you dont want to use search functionality
maxHeight	Number	Maximum height of the dropdown wrapper to occupy
data	array or array[object]	Data which will be iterated as options of select list
setSelected	Function	For Setting the option value which will be stored in your local state
searchicon	JSX Element	Pass any JSX to this prop like Text, Image or Icon to show instead of search icon
arrowicon	JSX Element	Pass any JSX to this prop like Text, Image or Icon to show instead of chevron icon
closeicon	JSX Element	Pass any JSX to this prop like Text, Image or Icon to show instead of close icon
searchPlaceholder	String	Custom placeholder text for search TextInput
defaultOption	Object	Pass default selected option in key value pair
fontFamily	string	Pass font name to apply globally on each text field of component
notFoundText	string	Pass your custom message if any search result returns empty
dropdownShown	boolean	Control your dropdown ( on & off ) state by changing its value to true or false

🔧 General Style Props

Applicable on both SelectList & MultipleSelectList Components

Name	Type	Description
boxStyles	Object	Additional styles for select box parent wrapper
inputStyles	Object	Additional styles for text of selection box
dropdownStyles	Object	Additional styles for dropdown scrollview
dropdownItemStyles	Object	Additional styles for dropdown single list item
dropdownTextStyles	Object	Additional styles for dropdown list items text
disabledItemStyles	Object	Additional styles for disabled dropdown list item
disabledTextStyles	Object	Additional styles for disabled dropdown list items text

😎 Advanced Usage

1import { SelectList } from 'react-native-dropdown-select-list'
2
3const App = () => {
4
5  const [selected, setSelected] = React.useState("");
6  
7  const data = [
8    {key:'1',value:'Jammu & Kashmir'},
9    {key:'2',value:'Gujrat'},
10    {key:'3',value:'Maharashtra'},
11    {key:'4',value:'Goa'},
12  ];
13
14  return(
15    <SelectList 
16      onSelect={() => alert(selected)}
17      setSelected={setSelected} 
18      fontFamily='lato'
19      data={data}  
20      arrowicon={<FontAwesome name="chevron-down" size={12} color={'black'} />} 
21      searchicon={<FontAwesome name="search" size={12} color={'black'} />} 
22      search={false} 
23      boxStyles={{borderRadius:0}} //override default styles
24      defaultOption={{ key:'1', value:'Jammu & Kashmir' }}   //default selected option
25    />
26  )
27
28};

😎 Getting Options From Database

1import { SelectList } from 'react-native-dropdown-select-list'
2
3const App = () => {
4
5  const [selected, setSelected] = React.useState("");
6  const [data,setData] = React.useState([]);
7  
8  React.useEffect(() => 
9    //Get Values from database
10    axios.get('https://jsonplaceholder.typicode.com/users')
11      .then((response) => {
12        // Store Values in Temporary Array
13        let newArray = response.data.map((item) => {
14          return {key: item.id, value: item.name}
15        })
16        //Set Data Variable
17        setData(newArray)
18      })
19      .catch((e) => {
20        console.log(e)
21      })
22  ,[])
23
24  return(
25    <SelectList setSelected={setSelected} data={data} onSelect={() => alert(selected)} />
26  )
27
28};

🔧 Additional Props

Applicable on MultipleSelectList Only

Name	Type	Description
label	string	Pass any string to be placed instead of default label

🔧 Additional Style Props

Applicable on MultipleSelectList Only

Name	Type	Description
disabledCheckBoxStyles	Object	Additional styles disabled checkbox inside dropdown
checkBoxStyles	Object	Additional styles for active checkbox
badgeStyles	Object	Additional styles for badges of selected values
badgeTextStyles	Object	Additional styles for Text of badges of selected values
labelStyles	Object	Additional styles for label of multiple select list

▶️ Watch Video

💲 Would you like to support me?

If you would like me come up with similar packages, buy me a cup of coffee to boost my energy.



For Live Demo (Expo Snack)