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

React Native Select List Equivalent to Html's Select "

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-select-list

OR

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

😎 Basic Usage for SelectList

import { SelectList } from "react-native-dropdown-select-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-select-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-select-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-select-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)