react-native-input-select

For more complex requirements, the Dropdown component supports several advanced features when used with a Flat List implementation:

• Multiple Selection: Use isMultiple to allow selecting more than one item.
• Search: Use isSearchable to enable a search bar within the dropdown.
• Custom List Components: Use listHeaderComponent and listFooterComponent to add custom UI to the top or bottom of the list.
• List Controls: Customize text for selecting/unselecting all items via listControls (selectAllText, unselectAllText, selectAllCallback, unselectAllCallback, emptyListMessage).
• Styling: Customize the dropdown appearance via dropdownStyle, the list via listComponentStyles (e.g., itemSeparatorStyle, sectionHeaderStyle), and the modal via modalControls.

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,
      }}
      dropdownIcon={
        <Image
          style={styles.tinyLogo}
          source={{ uri: 'data:image/png;base64,...' }}
        />
      }
      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',
      }}
      selectedItemsControls={{
        removeItemIcon: (
          <Image
            source={{ uri: 'data:image/png;base64,...' }}
            style={{ tintColor: 'white', height: 12, width: 12 }}
          />
        ),
        onRemoveItem: () => Alert.alert('Item was removed'),
        showRemoveIcon: true,
      }}
    />
  );
}

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: 10, borderWidth: 3, borderColor: 'white' },
});

To use a SectionList within the dropdown, provide an array of objects to the options prop. Each object should have a title and a data array containing the items for that section.

<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%',
    },
  }}
/>

When using this project as a library or within a monorepo, the metro.config.js is configured to handle peer dependency resolution and module aliasing. It uses watchFolders to monitor both the project root and the local library source. To prevent conflicts, it uses a blockList to ignore specific node_modules paths and extraNodeModules to force all dependencies (including React) to resolve from the local node_modules directory of the project.

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');
const pak = require('../package.json');
const escape = require('escape-string-regexp');

const root = path.resolve(__dirname, '..');
const localLib = path.resolve(root, 'src');

const modules = Object.keys({ ...pak.peerDependencies, ...pak.dependencies });

const config = {
  projectRoot: __dirname,
  watchFolders: [root, localLib],
  resolver: {
    blockList: modules.map(
      m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\/.*$\/),
    ),
    extraNodeModules: modules.reduce((acc, name) => {
      acc[name] = path.join(__dirname, 'node_modules', name);
      return acc;
    }, {}),
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);