Screenshots:
We can also decide the number of selected items to be shown by default using maxCheckedItemsVisible (default - 10) prop:
Expo Web:
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 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
Top comments (2)
Good package for mobile apps📱
Very helpful!! Good article 👍