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

Compatibility

Expo ✅ | iOS ✅ | Android ✅

✔ Installation

$ npm install react_native_simple_dropdown_select_list

OR

$ yarn add react_native_simple_dropdown_select_list

🚀 Example for use 🚀

import { SelectList } from 'react_native_simple_dropdown_select_list';
import { useTheme } from 'styled-components/native';


const App = () => {

  const [selected, setSelected] = React.useState("");
  const theme = useTheme();
  
const data = [
  { key: '1', value: 'Automotive' },
  { key: '2', value: 'Food and drinks' },
  { key: '3', value: 'Beauty' },
  { key: '4', value: 'Home' },
  { key: '5', value: 'Eletronic' },
  { key: '6', value: 'Games' },
];

  return(
       <SelectList
        //requireds
        data={data}
        whatWithSelected={value => setSelected(value)}
        maxHeightList={150}
        placeholder="Select a category"
        notFoundText="Date not found"
        valueToBeSaved="key"
        //optionals
        afterSelecting={() => console.log('return function')}
        containerStyle={{ width: 200, borderColor: 'black' }}
        containerDataStyle={{ width: 200, borderColor: 'gray' }}
        infoFontStyle={{ fontSize: 18, fontWeight: 'bold' }}
        containerFontsStyle={{ fontSize: 18, fontWeight: 'normal' }}
      />

      -- USING GLOBAL THEME -- 
      
    <SelectList
        //requireds
        data={data}
        whatWithSelected={value => setSelected(value)}
        maxHeightList={150}
        placeholder="Select a category"
        notFoundText="Date not found"
        valueToBeSaved="key"
        //optionals
        afterSelecting={() => console.log('return function')}
        containerStyle={{ width: 300, borderColor: theme.colors.primary }}
        containerDataStyle={{width: 300, borderColor: theme.colors.primary }}
        infoFontStyle={{ fontSize: 18, fontFamily: theme.fonts.regular }}
        containerFontsStyle={{ fontSize: 18, fontFamily: theme.fonts.bold }}
      />
  )

};

🔧 General Props

| Name | Type | Required | Description | | ---- | ---- | --- |----------- | | data| Array[object]| ✅| Data passed to the view in the component | initialListValue| Object| ❌| List initial value | notFoundText| String| ✅| Text in case of error when reading data | valueToBeSaved| Object| ✅| value that will be saved in your local state | whatWithSelected| Function| ✅| Fn to set Selected option value which will be stored in your local state | afterSelecting| Function| ❌| Trigger an action when option is selected | maxHeightList| Number| ✅| maximum size of the list to be re-rendered | placeholder| String| ✅| Placeholder text that will be displayed in the select box | containerStyle| ViewStyle| ❌| override styles of the container | containerFontsStyle| TextStyle| ❌| override container font styles | containerDataStyle| ViewStyle| ❌| override styles of the data container | infoFontStyle| TextStyle| ❌| override data font styles | icon| JSX Element| ❌| Add your own icon