A Simple Dropdown List with React Native

by React Native Example

? Simple Dropdown List – React Native ?

• No dependencies • Customizable

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

GitHub

View Github