react-native multiselect dropdown

                                             

1. index.js file

  

    

   const [salesPersonCount, setSalesPersonCount] = useState(0);            

   const [salesPersonArray, setSalesPersonArray] = useState([]); 

   const [selectModalVisible, setSelectModalVisible] = useState(false);

               

     return (          <MultiSelect

            selectModalVisible={selectModalVisible}

            onPress={() => { setSelectModalVisible(false) }}

            onRequestClose={() => { setSelectModalVisible(false) }}

            data={salesPersonArray}

            allCheckboxCount={allSelect => setSalesPersonCount(allSelect)}

            changeChecked={selectedValue => {

                 for (var i = 0; i < salesPersonArray.length; i++) {

                       if (salesPersonArray[i].ValueField === selectedValue) {

                              if (salesPersonArray[i].checked === false) {

                                     salesPersonArray[i].checked = true;

                                          

                               }

                               else {

                                      salesPersonArray[i].checked = false

                                                

                                }

                                 let count = 0;

                                 salesPersonArray.map(item => {

                                     if (item.checked) {

                                            count += 1;

                                       }

                                       setSalesPersonCount(count);

                                           })

                                        }

                                    }

             onPressOut={() => { setSelectModalVisible(false) }}

           />

           <View style={{ alignItems: 'center' }}>

                   <TouchableOpacity activeOpacity={1} style={{

                          justifyContent: 'space-around',                           alignItems: 'center', borderColor: '#696969',

                          borderRadius: 7, borderWidth: 1,                          width: widthPercentageToDP(70.1),

                          height: heightPercentageToDP(5.5),                            flexDirection: 'row'

                           }}

                          onPress={() => {

                               setSelectModalVisible(true);

                         }}>

                           <Text>         {salesPersonCount > 0 ? `${salesPersonCount} selected` : "Select Salesperson"}                             </Text>

                                       

                    </TouchableOpacity>

          </View>

                    )

• You need one array object with a checked key-pair value you can change the name also what you want.
  
                    {
                           checked: false
                           ValueField: "smith"
                     }
  
  
  multiSelect.js
  
  
  import React, { useState } from 'react';

  import {

      View,

      Text,

      ScrollView,

      StyleSheet,

      TouchableOpacity,

      FlatList,

      Modal,

      Pressable,

      TouchableWithoutFeedback

  } from 'react-native';

  
  

  import {

      widthPercentageToDP,

      heightPercentageToDP,

  } from '../../common/functions';

  import { CheckBox } from 'react-native-elements';

  
  

  function MultiSelect(props) {

      const { data } = props;

      const [allSetChecked, setAllSetChecked] = useState(false);

  
  

      const allChecked = () => {

          setAllSetChecked(!allSetChecked);

          for (var i = 0; i < data.length; i++) {

              if (data[i].checked === false)

                  data[i].checked = true;

              else

                  data[i].checked = false

          }

  
  

          let count=0;

          data.map(item=>{
              if(item.checked)
              {
                  count+=1;
              }
              props.allCheckboxCount(count);
          })

  
  

      }

  
  

      const ItemHail = ({ stormDetails }) => (

          <View style={{

              flex: 1,

              borderBottomColor: '#696969',

              borderBottomWidth: 1,

              flexDirection: 'row',

              padding: 5

          }}>

              <View style={{ flex: 1, }}>

                  <CheckBox

                      onPress={

                          () => props.changeChecked(stormDetails.ValueField)

                      }

                      checked={stormDetails.checked}

                      size={20}

                      containerStyle={{ height: 20, width: 20, padding: 0 }}

                  />

              </View>

              <View style={{ flex: 6.5, justifyContent: 'center' }}>

                  <Text style={{

                      fontSize: 16,

                  }}

                      numberOfLines={1}>

                      {stormDetails.ValueField}

                  </Text>

              </View>

          </View>

      );

      const renderItemHail = ({ item }) => (

          <View>

              <ItemHail stormDetails={item} />

          </View>

      );

      return (

          <Modal

              animationType="fade"

              transparent={true}

              visible={props.selectModalVisible}

              onRequestClose={props.onRequestClose}

          >

              <TouchableOpacity

                  activeOpacity={1}

                  style={{ flex: 1 }}

                  onPressOut={props.onPressOut}>

                  <View style={styles.centeredView}>

                      <View style={styles.modalView}>

                          <View

                              style={{

                                  height: heightPercentageToDP(30),

                                  width: widthPercentageToDP(70)

                              }}>

  
  

                              <ScrollView directionalLockEnabled={true}>

                                  <TouchableWithoutFeedback>

                                      <View>

                                          <View

                                              style={{

                                                  borderBottomColor: '#696969',

                                                  borderBottomWidth: 1,

                                                  flexDirection: 'row',

                                                  padding: 5

                                              }}>

                                              <View>

                                                  <CheckBox

                                                      onPress={allChecked}

                                                      checked={allSetChecked}

                                                      size={20}

                                                      containerStyle={{

                                                          height: 20,

                                                          width: 20,

                                                          padding: 0

                                                      }}

                                                  />

                                              </View>

                                              <View style={{

                                                  flex: 4,

                                                  justifyContent: 'center'

                                              }}>

                                                  <Text

                                                      style={{

                                                          fontSize: 16

                                                      }}

                                                      numberOfLines={1}>

                                                      Select all

                                                          </Text>

                                              </View>

                                          </View>

                                          <FlatList

                                              data={data}

                                              renderItem={renderItemHail}

                                              keyExtractor={

                                                (item, index) => index.toString()

                                              }

                                          />

                                      </View>

                                  </TouchableWithoutFeedback>

                              </ScrollView>

  
  

                          </View>

                      </View>

                  </View>

              </TouchableOpacity>

          </Modal>

      )

  }

  
  

  const styles = StyleSheet.create({

      centeredView: {

          flex: 1,

          justifyContent: "center",

          alignItems: "center",

      },

      modalView: {

          margin: 20,

          backgroundColor: "#F5F5F5",

          alignItems: "center",

          shadowColor: "#000",

          shadowOffset: {

              width: 0,

              height: 2

          },

          shadowOpacity: 0.25,

          shadowRadius: 4,

          elevation: 5

      },

      button: {

          borderRadius: 20,

          padding: 10,

          elevation: 2

      },

      buttonOpen: {

          backgroundColor: "#F194FF",

      },

      buttonClose: {

          backgroundColor: "#2196F3",

      },

      textStyle: {

          color: "white",

          fontWeight: "bold",

          textAlign: "center"

      },

      modalText: {

          marginBottom: 15,

          textAlign: "center"

      }

  });

  export default MultiSelect

• you also require a check-box package
  
• npm install react-native-elements
  
• You can use your own height and width instead of widthPercentageToDP, heightPercentageToDP