React Native Dropdown Select

A Dropdown select component for React Native. Easy to use with only one needed configuration.

Demo

Table of contents

• React Native Dropdown Select
  • Demo
  • Table of contents
  • Installation
    • With npm
    • With yarn
  • Add SafeAreaProvider
  • Usage
  • What's new
  • Props
  • Contributing
  • License

Installation

With npm

npm install react-native-safe-area-context @niku/react-native-dropdown-select

With yarn

yarn add react-native-safe-area-context @niku/react-native-dropdown-select

Add SafeAreaProvider

You have to add SafeAreaProvider at your App's root (App.tsx/App.jsx).

import { SafeAreaProvider } from 'react-native-safe-area-context';

export function App() {
  return (
    <SafeAreaProvider>
    {/* ... */}
  </SafeAreaProvider>
  );
}

Usage

// ...
import DropdownSelect from 'react-native-dropdown-select';
import { SafeAreaProvider } from 'react-native-safe-area-context';
// ...

const options = [
  {
    label: "Select language or framework you love",
    value: null,
  },
  {
    label: "Languages",
    options: [
      {
        label: 'Javascript',
        value: 'js',
      },
      {
        label: 'Typescript',
        value: 'ts',
      },
      {
        label: 'Python',
        value: 'py',
      }
    ]
  },
  {
    label: "Frameworks - Libraies",
    options: [
      {
        label: 'Reactjs',
        value: 'reactjs',
      },
      {
        label: 'React Native',
        value: 'react-native',
      },
      {
        label: 'Vuejs',
        value: 'vuejs',
      },
      {
        label: "Laravel",
        value: "laravel"
      }
    ]
  },
  {
    label: "Others",
    value: "others"
  }
];

const defaultValue = 'js';

function App() {
  const [value, setValue] = React.useState(defaultValue);
  return (
    <SafeAreaProvider>
      <View style={styles.container}>
        <View>
          <DropdownSelect
            options={options}
            defaultValue={defaultValue}
            value={value}
            onSelectOption={(option) => {
              setValue(option.value);
            }}
            onHideDropdown={() => {
              console.log('hide');
            }}
            onShowDropdown={() => {
              console.log('show');
            }}
          />
        </View>
        <Text>{value}</Text>
        <Button title="Default" onPress={() => setValue(defaultValue)} />
      </View>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  },
});

What's new

There are some new features in this verson.

• Option group: You can group your option. Both option item and option group can be mixed in props options (See in Usage above).
• withStatusBar: Deprecated. I caculate position of dropdown button with react-native-safe-area-context's frame and insets. So, we don't need this props anymore.

Props

Name	Description	Type	Default	Required
options	List of option for dropdown	array		Yes
defaultValue	Default value to display	any		No
value	Current value of dropdown select	any		No
position	Position of dropdown	`'top'	'bottom'`	'bottom'
placeholder	Placeholder of dropdown select to display when no option selected	string	'Select an option...'	No
loading	Loading state of dropdown select	boolean	false	No
withStatusBar	Deprecated	boolean	true	No
component	Component to render dropdown button	`React.ComponentType	React.ReactNode`
render	Render dropdown button via render function	(props) => React.ReactNode		No
children	Loading state of dropdown select	`(props) => React.ReactElemnt	React.ReactNode`
loadingComponent	Loading component to render loading icon	`React.ComponentType	React.ReactNode`
renderLoading	Render loading icon via render function	() => React.ReactNode		No
optionComponent	Option component to render option item	`React.ComponentType	React.ReactNode`
renderOption	Render option item via render function	(props) => React.ReactNode		No
optionGroupComponent	Option group component to render option group	`React.ComponentType	React.ReactNode`
renderOptionGroup	Render option group via render function	(props) => React.ReactNode		No
compareFunc	Compare function to compare two option, return true if equal otherwise return false	(option1, option2) => boolean		No
onShowDropdown	Callback function is called when dropdown will be shown	() => void		No
onHideDropdown	Callback function is called when dropdown will be hide	() => void		No
onSelectOption	Callback function is called when an option is selected	(option1) => void		No
buttonWrapperStyle	Additional styles for button's wrapper	object		No
buttonContainerStyle	Additional styles for button's container	object		No
buttonLabelStyle	Additional styles for button's label	object		No
buttonIconStyle	Additional styles for button's icon	object		No
dropdownStyle	Additional styles for dropdown's container	object		No
optionStyle	Additional styles for option's container	object		No
selectedOptionStyle	Additional styles for selected option's container	object		No
disabledOptionStyle	Additional styles for disabled option's container	object		No
optionLabelStyle	Additional styles for option's label	object		No
selectedOptionLabelStyle	Additional styles for selected option's label	object		No
disabledOptionLabelStyle	Additional styles for disabled option's label	object		No
optionGroupPadding	Padding left for nested option group	number		No

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT