react-native-input-select

A fully customizable dropdown selection package for react-native android and iOS with multiple select and search capabilities.

Installation

With npm

npm install react-native-input-select

With yarn

yarn add react-native-input-select

Sandbox

Sandbox

iOS

| | | | | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | | | | | | | |

Android

| | | | | :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | | | |

Basic Usage

import React from 'react';
import Dropdown from 'react-native-input-select';

export default function App() {
  const [country, setCountry] = React.useState();

  return (
    <Dropdown
      label="Country"
      placeholder="Select an option..."
      options={[
        { label: 'Nigeria', value: 'NG' },
        { label: 'Åland Islands', value: 'AX' },
        { label: 'Algeria', value: 'DZ' },
        { label: 'American Samoa', value: 'AS' },
        { label: 'Andorra', value: 'AD' },
      ]}
      selectedValue={country}
      onValueChange={(value) => setCountry(value)}
      primaryColor={'green'}
    />
  );
}

Advanced Usage With Flat List

import React from 'react';
import Dropdown from 'react-native-input-select';
import { View, StyleSheet, Text, Button, Alert, Image } from 'react-native';

export default function App() {
  const [country, setCountry] = React.useState();

  return (
    <Dropdown
      label="Customized components in list"
      placeholder="Select multiple countries..."
      options={countries.slice(0, 30)}
      optionLabel={'name'}
      optionValue={'code'}
      selectedValue={country}
      onValueChange={(itemValue: any) => setCountry(itemValue)}
      isMultiple
      isSearchable
      primaryColor={'orange'}
      dropdownStyle={{
        borderWidth: 0, // To remove border, set borderWidth to 0
      }}
      dropdownIcon={
        <Image
          style={styles.tinyLogo}
          source={{
            uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
          }}
        />
      }
      dropdownIconStyle={{ top: 20, right: 20 }}
      listHeaderComponent={
        <View style={styles.customComponentContainer}>
          <Text style={styles.text}>
            💡 You can add any component to the top of this list
          </Text>
          <View style={styles.fixToText}>
            <Button
              title="Left button"
              onPress={() => Alert.alert('Left button pressed')}
              color="#007AFF"
            />
            <Button
              title="Right button"
              onPress={() => Alert.alert('Right button pressed')}
            />
          </View>
        </View>
      }
      listFooterComponent={
        <View style={styles.customComponentContainer}>
          <Text>You can add any component to the bottom of this list</Text>
        </View>
      }
      modalControls={{
        modalOptionsContainerStyle: {
          padding: 10,
          backgroundColor: 'cyan',
        },
        modalProps: {
          supportedOrientations: [
            'portrait',
            'portrait-upside-down',
            'landscape',
            'landscape-left',
            'landscape-right',
          ],
          transparent: false,
        },
      }}
      listComponentStyles={{
        listEmptyComponentStyle: {
          color: 'red',
        },
        itemSeparatorStyle: {
          opacity: 0,
          borderColor: 'white',
          borderWidth: 2,
          backgroundColor: 'cyan',
        },
        sectionHeaderStyle: {
          padding: 10,
          backgroundColor: 'cyan',
        },
      }}
      listControls={{
        selectAllText: 'Choose everything',
        unselectAllText: 'Remove everything',
        selectAllCallback: () => Alert.alert('You selected everything'),
        unselectAllCallback: () => Alert.alert('You removed everything'),
        emptyListMessage: 'No record found',
      }}
    />
  );
}

const styles = StyleSheet.create({
  customComponentContainer: {
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  text: {
    marginBottom: 20,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  tinyLogo: {
    width: 20,
    height: 20,
  },
  radioButton: {
    width: 20,
    height: 20,
    borderRadius: 20 / 2,
    borderWidth: 3,
    borderColor: 'white',
  },
});

Advanced Usage with Section List

<DropdownSelect
  label="Menu"
  placeholder="Select multiple dishes..."
  options={[
    {
      title: 'Main dishes',
      data: [
        { label: 'Pizza', value: 'A' },
        { label: 'Burger', value: 'B' },
        { label: 'Risotto', value: 'C' },
      ],
    },
    {
      title: 'Sides',
      data: [
        { label: 'Ice cream', value: 'D' },
        { label: 'Cheesecake', value: 'E' },
      ],
    },
    {
      title: 'Drinks',
      data: [
        { label: 'Water', value: 'F' },
        { label: 'Coke', value: 'G' },
        { label: 'Juice', value: 'H' },
      ],
    },
  ]}
  selectedValue={menu}
  onValueChange={(itemValue: any) => setMenu(itemValue)}
  isMultiple
  isSearchable
  primaryColor={'deepskyblue'}
  listComponentStyles={{
    sectionHeaderStyle: {
      padding: 10,
      backgroundColor: 'green',
      color: 'white',
      width: '30%',
    },
  }}
/>

For more examples visit our wiki page

Props

| Proptypes | Datatype | Example | | ------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | label | string or ReactComponent | Countries or <Text> You can add any component here <Text> | | placeholder | string | Select a country | | options | Array | [{ name: 'Nigeria', code: 'NG' }, { name: 'Albania', code: 'AL' }] | | optionLabel | string | name | | optionValue | string | code | | error | string | This is a requiredfield | | helperText | string | Only few countries are listed | | selectedValue | string or Array | AL or [AL, AX] | | onValueChange | function | ()=>{} | | isMultiple | Boolean | true | | isSearchable | Boolean | true | | disabled | Boolean | true | | dropdownIcon | React Component | Image or <Text> Show <Text> | | labelStyle | Object | {color: 'red', fontSize: 15, fontWeight: '500'} | | placeholderStyle | Object | {color: 'blue', fontSize: 15, fontWeight: '500'} | | dropdownStyle | Object | {borderColor: 'blue', margin: 5, borderWidth:0 ...} | | dropdownContainerStyle | Object | {backgroundColor: 'red', width: '30%', ...} | | dropdownIconStyle | Object | {top: 10 , right: 10, ...} | | selectedItemStyle | Object | {fontWeight: '600', color: 'yellow', ...} | | multipleSelectedItemStyle | Object | {backgroundColor: 'red', color: 'yellow', ...} | | dropdownErrorStyle | Object | {borderWidth: 2, borderStyle: 'solid'} | | dropdownErrorTextStyle | Object | {color: 'red', fontWeight:'500'} | | dropdownHelperTextStyle | Object | {color: 'green', fontWeight:'500'} | | primaryColor | string | blue | | autoCloseOnSelect | boolean | false | | hideModal | Boolean | Use this to hide the modal as needed | | listHeaderComponent | React Component | <Text> You can add any component here </Text> | | listFooterComponent | React Component | <Text> You can add any component here <Text> | | listComponentStyles | Object | {listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle} | | listEmptyComponent | React Component | <Text> You can add any component here <Text> | | checkboxControls | Object | {checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle, checkboxComponent?: React.ReactNode, checkboxDisabledStyle?: ViewStyle, checkboxUnselectedColor?: ColorValue} | | listControls | Object | { selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, hideSelectAll: boolean, emptyListMessage: 'No record found'} | | searchControls | Object | { textInputStyle: ViewStyle \| TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps, searchCallback:(value)=>{}} | | modalControls | Object | { modalBackgroundStyle: ViewStyle, modalOptionsContainerStyle: ViewStyle, modalProps: ModalProps} |

Deprecation Notice

The following props would be removed in coming releases.

• Individual props checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponent would be replaced with a single object checkboxControls e.g

checkboxControls = {
  checkboxSize: 20,
  checkboxStyle: {
    backgroundColor: 'purple',
    borderRadius: 30,
    padding: 10,
    borderColor: 'red',
  },
  checkboxLabelStyle: { color: 'red', fontSize: 20 },
  checkboxComponent: <View style={styles.radioButton} />
  ...
};

• searchInputStyle would now be replaced with textInputStyle in the searchControls object

searchControls = {
  textInputStyle: {
    color: 'blue',
    fontWeight: '500',
    minHeight: 10,
    paddingVertical: 10,
    paddingHorizontal: 5,
    width: '70%',
    textAlign: 'center',
    backgroundColor: 'pink',
  },
  textInputContainerStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textInputProps: {
    placeholder: 'Search anything here',
    placeholderTextColor: 'white',
  },
  ...
};

• Individual props modalBackgroundStyle, modalOptionsContainerStyle, modalProps would be replaced with a single object modalControls

modalControls = {
  modalBackgroundStyle: ViewStyle,
  modalOptionsContainerStyle: ViewStyle,
  modalProps: ModalProps, //Use this to pass in react-native default modal props
};

Contributing

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

Made with contrib.rocks.

License

MIT

Video Demo

https://github.com/azeezat/react-native-select/assets/9849221/194bf5cf-1a2d-4ca6-9585-05d6bb987aba