react_native_simple_dropdown_select_list v1.0.8

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