Add multi select dropdown to React Native and Expo applications
Tags: react, reactnative, multiselect, ui
Published: 2024-01-10 09:20:43

**Screenshots:**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br1utr36s78673dfau0u.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgm675drqvueudpz95p5.gif)

**Expo Web:**


![Expo Web Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zd8et2q219ophoh1aho.gif)


**Create new React Native Cli App**

Command

```
npx react-native init ProjectName
```
For complete guide please refer https://reactnative.dev/

or

**Create new Expo Cli App**

Command

```
npx create-expo-app ProjectName
```
For complete guide please refer https://docs.expo.dev/


## **Integrate multi select dropdown**

Install [rn-multipicker](https://www.npmjs.com/package/rn-multipicker) package

```
npm install rn-multipicker
```
or
```
yarn add rn-multipicker
```


**Create a Countries dropdown picker with multiple country options**


Import RNMultiSelect component
 
```
import { RNMultiSelect } from 'rn-multipicker';
```

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",
];
```

## 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>
  );
}
```

**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:

{% embed https://drive.google.com/file/d/15dZFwwg-H10UooE43KHPuzQsJ34cxmeg/view?usp=sharing %}

{% embed https://drive.google.com/file/d/1KRILC1lvbok_g-s31cz-1hPvAhoXwlcI/view?usp=sharing %}