Hello friends, It’s been almost a month since I had posted a new tutorial. Sorry for being late. Actually I was recently busy for my company work, We have a difficult application and so I was so busy coding it. But now it’s finished. So I will try my best for constantly post tutorials. So in today’s tutorial we would learn about another react native NPM package known as React Native Multiple Select. It is basically a type of Drop down also known as Picker component for react native. It is used to pick multiple items together inside a single drop down list. We can render it’s item using static Array or Dynamic JSON. I’ll share both of code with you. So in this tutorial we would learn about Example of React Native Multiple Select Drop Down.
Contents in this project Example of React Native Multiple Select Drop Down :-
1. First of all we have to install React Native Multiple Select package in our React Native project. So open your RN project Root directory in CMD in windows and Terminal in MAC and execute below command.
2. Now we have to install React Native Vector Icons package with it. Because all the icons used in this package is coming from here. I have already made a tutorial on this topic. You can read it from HERE.
3. This final step is for iOS users only. If you are using this package in iOS then you have to install PODS to link the package. Execute below command to install PODS.
4. Now we’re ready. It’s time to start coding for the App. So open your project’s main App.js file and import useState, useEffect, SafeAreaView, StyleSheet, Text and View component.
5. Import MultiSelect from ‘react-native-multiple-select’.
6. Creating our main export default App component.
7. Creating a constant DATA named array with multiple items. We would use this array items as our Multiple Select Drop Down items.
8. Creating 1 State named as selectedItems with State update method setSelectedItems. We would use this state to store selected items.
9. Creating a function named as onSelectedItemsChange(). In this function we would simply print all the selected items on the console window.
10. Now for those who want to load all the items from JSON, I’m sharing my code with you here.
11. Creating return() block, Now here we would make our main MultiSelect component.
12. Creating style.
13. Complete Source Code for App.js file :-
