rn-dropdown-select-list-aniket v1.0.1

React Native Select List Equivalent to Html's Select "

• 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

🔌 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

🔧 General Style Props

Applicable on both SelectList & MultipleSelectList Components

😎 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

🔧 Additional Style Props

Applicable on MultipleSelectList Only

▶️ 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)