DEV Community

Cover image for Add multi select dropdown to React Native and Expo applications
Rahul Bandodkar
Rahul Bandodkar

Posted on • Updated on

Add multi select dropdown to React Native and Expo applications

Screenshots:

Image description

We can also decide the number of selected items to be shown by default using maxCheckedItemsVisible (default - 10) prop:

Can decide the number of selected items to be shown by defalut

Expo Web:

Expo Web Demo

Create new React Native Cli App

Command

npx react-native init ProjectName
Enter fullscreen mode Exit fullscreen mode

For complete guide please refer https://reactnative.dev/

or

Create new Expo Cli App

Command

npx create-expo-app ProjectName
Enter fullscreen mode Exit fullscreen mode

For complete guide please refer https://docs.expo.dev/

Integrate multi select dropdown

Install rn-multipicker package

npm install rn-multipicker
Enter fullscreen mode Exit fullscreen mode

or

yarn add rn-multipicker
Enter fullscreen mode Exit fullscreen mode

Create a Countries dropdown picker with multiple country options

Import RNMultiSelect component

import { RNMultiSelect } from 'rn-multipicker';
Enter fullscreen mode Exit fullscreen mode

Use dummy countries array

const COUNTRIES = [
    "Afghanistan",
    "Albania",
    "Algeria",
    "American Samoa",
    "Andorra",
    "Angola",
    "Anguilla",
    "Antarctica",
    "Antigua and Barbuda",
    "Argentina",
    "Armenia",
    "Aruba",
    "Australia",
    "Austria",
    "Azerbaijan",
    "Bahamas (the)",
    "Bahrain",
    "Bangladesh",
    "Barbados",
    "Belarus",
    "Belgium",
    "Belize",
    "Benin",
    "Bermuda",
    "Bhutan",
    "Bolivia (Plurinational State of)",
    "Bonaire, Sint Eustatius and Saba",
    "Bosnia and Herzegovina",
    "Botswana",
    "Bouvet Island",
    "Brazil",
    "British Indian Ocean Territory (the)",
    "Brunei Darussalam",
    "Bulgaria",
    "Burkina Faso",
    "Burundi",
    "Cabo Verde",
    "Cambodia",
    "Cameroon",
    "Canada",
    "Cayman Islands (the)",
    "Central African Republic (the)",
    "Chad",
    "Chile",
    "China",
    "Christmas Island",
    "Cocos (Keeling) Islands (the)",
    "Colombia",
    "Comoros (the)",
    "Congo (the Democratic Republic of the)",
    "Congo (the)",
    "Cook Islands (the)",
    "Costa Rica",
    "Croatia",
];
Enter fullscreen mode Exit fullscreen mode

Full code:


import { RNMultiSelect } from 'rn-multipicker';

// ...

const COUNTRIES = [
    "Afghanistan",
    "Albania",
    "Algeria",
    "American Samoa",
    "Andorra",
    "Angola",
    "Anguilla",
    "Antarctica",
    "Antigua and Barbuda",
    "Argentina",
    "Armenia",
    "Aruba",
    "Australia",
    "Austria",
    "Azerbaijan",
    "Bahamas (the)",
    "Bahrain",
    "Bangladesh",
    "Barbados",
    "Belarus",
    "Belgium",
    "Belize",
    "Benin",
    "Bermuda",
    "Bhutan",
    "Bolivia (Plurinational State of)",
    "Bonaire, Sint Eustatius and Saba",
    "Bosnia and Herzegovina",
    "Botswana",
    "Bouvet Island",
    "Brazil",
    "British Indian Ocean Territory (the)",
    "Brunei Darussalam",
    "Bulgaria",
    "Burkina Faso",
    "Burundi",
    "Cabo Verde",
    "Cambodia",
    "Cameroon",
    "Canada",
    "Cayman Islands (the)",
    "Central African Republic (the)",
    "Chad",
    "Chile",
    "China",
    "Christmas Island",
    "Cocos (Keeling) Islands (the)",
    "Colombia",
    "Comoros (the)",
    "Congo (the Democratic Republic of the)",
    "Congo (the)",
    "Cook Islands (the)",
    "Costa Rica",
    "Croatia",
];

const App() {
  const [selectedItems, setSelectedItems] = useState<string[]>([]);

  return (
    <View style={{flex: 1}}>
      <RNMultiSelect
        placeholder="Countries"
        data={COUNTRIES}
        onSelectedItemsChange={(value) => setSelectedItems(value)}
        selectedItems={selectedItems}
      />
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

Do add a Github star if you like it ⭐ — https://github.com/rahull04/rn-multipicker

Linkedin post:

https://www.linkedin.com/feed/update/urn:li:activity:7150528727720820736?utm_source=share&utm_medium=member_ios

Video:

Top comments (2)

Collapse
 
codereashan profile image
Eashan Dessai

Good package for mobile apps📱

Collapse
 
richiee profile image
Richa

Very helpful!! Good article 👍