| | | | | | | --------------------------------------- | -------- | ---------- |---------- |---------- | | | | | |

React Native Select List Equivalent to Html's Select 2"

Multiple Select List | 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

$ npm install react-native-dropdown-search-list

OR

$ yarn add react-native-dropdown-search-list

😎 Basic Usage for SelectList

import { SelectList } from 'react-native-dropdown-search-list'

const App = () => {

  const [selected, setSelected] = React.useState("");
  
  const data = [
      {key:'1', value:'Mobiles', disabled:true},
      {key:'2', value:'Appliances'},
      {key:'3', value:'Cameras'},
      {key:'4', value:'Computers', disabled:true},
      {key:'5', value:'Vegetables'},
      {key:'6', value:'Diary Products'},
      {key:'7', value:'Drinks'},
  ]

  return(
    <SelectList 
        setSelected={(val) => setSelected(val)} 
        data={data} 
        save="value"
    />
  )

};

😎 Basic Usage for MultipleSelectList

import { MultipleSelectList } from 'react-native-dropdown-search-list'

const App = () => {

  const [selected, setSelected] = React.useState([]);
  
  const data = [
      {key:'1', value:'Mobiles', disabled:true},
      {key:'2', value:'Appliances'},
      {key:'3', value:'Cameras'},
      {key:'4', value:'Computers', disabled:true},
      {key:'5', value:'Vegetables'},
      {key:'6', value:'Diary Products'},
      {key:'7', value:'Drinks'},
  ]

  return(
    <MultipleSelectList 
        setSelected={(val) => setSelected(val)} 
        data={data} 
        save="value"
        onSelect={() => alert(selected)} 
        label="Categories"
    />
  )

};

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

import { SelectList } from 'react-native-dropdown-search-list'

const App = () => {

  const [selected, setSelected] = React.useState("");
  
  const data = [
    {key:'1',value:'Jammu & Kashmir'},
    {key:'2',value:'Gujrat'},
    {key:'3',value:'Maharashtra'},
    {key:'4',value:'Goa'},
  ];

  return(
    <SelectList 
      onSelect={() => alert(selected)}
      setSelected={setSelected} 
      fontFamily='lato'
      data={data}  
      arrowicon={<FontAwesome name="chevron-down" size={12} color={'black'} />} 
      searchicon={<FontAwesome name="search" size={12} color={'black'} />} 
      search={false} 
      boxStyles={{borderRadius:0}} //override default styles
      defaultOption={{ key:'1', value:'Jammu & Kashmir' }}   //default selected option
    />
  )

};

😎 Getting Options From Database

import { SelectList } from 'react-native-dropdown-search-list'

const App = () => {

  const [selected, setSelected] = React.useState("");
  const [data,setData] = React.useState([]);
  
  React.useEffect(() => 
    //Get Values from database
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        // Store Values in Temporary Array
        let newArray = response.data.map((item) => {
          return {key: item.id, value: item.name}
        })
        //Set Data Variable
        setData(newArray)
      })
      .catch((e) => {
        console.log(e)
      })
  ,[])

  return(
    <SelectList setSelected={setSelected} data={data} onSelect={() => alert(selected)} />
  )

};

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