react-multi-select-v

IOS / ANDROID

add on long press, fix names, make props default values

npm i react-multi-select-v

import {Select} from "react-multi-select-v";

<Select
	is_title_visible={true}
	selection_name={"Colors"}
	modal_select_title={"Choose "}
	button_add_title={"Add"}
	modal_button_style={{text:"ok",width:100,height:50,backgroundColor:"#FFFFFF",borderColor:"#D7B8F3"}}
        
    minimum_selected={0}
    maximum_selected={4}
    styles={styles}
    modal_styles={modal_styles}
    is_modal={false}
    is_mqc={true}

    key_name={"id"}
    denomination_name={"name"}
    colorKey_name={"color"}
    data={Colors}
        
    selected_data_keys={SelectedColors}
    colored_selection={false}
        
    additional={element => (
      <View>
        {element != null && 
          <Text
            style={{fontSize:15, fontWeight:"200"}}
          >
            {element.price} €
          </Text>
        }
      </View>
    )}
    on_selected_change={selectedIds => {
      console.log(selectedIds)
    }}
/>

Default styles,modal_styles props

var styles = StyleSheet.create({
  Selection_Title: {justifyContent:"center", alignItems:"center", padding:5},
  Selection_Box_Title: {backgroundColor:"#dfdfdf", padding:5, width: 200, borderRadius: 15, alignItems: "center", justifyContent: "center"},
  Selection_Title_Text: {fontSize:13, fontWeight:"500"},
  Element_View: {padding:5},
  Element_List: {flexDirection:"row", justifyContent:"space-around", flexWrap: 'wrap'},
  Element: {borderRadius:15, padding:10, borderColor:"#FFFFFF", borderWidth:1.5},
  Element_Selected: {backgroundColor:"#fdb827", borderWidth:1.5, borderColor:"#000000"},
  Element_UnSelected: {backgroundColor:"#f7f7f1"},
  Border_Not_Colored: {borderWidth:0}
})

var modal_styles = StyleSheet.create({
  MainView: {flex: 1, justifyContent:"center", alignItems:"center"},
  FlatList_Container: {flexGrow: 1, justifyContent: "center"},
  No_Elements_Text: {fontSize:30, fontWeight:"100"},
  Element_Main_View: {padding:5},
  Element: {padding: 10, borderRadius: 15},
  button_Text: {color:"#000000"}
});

Prop	Description	Value
is_title_visible	is the title visible ?	bool
selection_name	title name	string
modal_select_title	when no element is selected displays, that text on the button followed by the "selection_name"	string
button_add_title	add button title ex:"+"	string
modal_button_style	style of the button see exemple	dict
minimum_selected	minimum value selected	int
maximum_selected	maximum value selected	int
styles	StyleSheet.create({}) default in component js file
modal_styles	StyleSheet.create({}) default in component js file
is_modal	is the window modal ?	bool
is_mqc	multiple choice questions ?	bool
key_name	the key that will be returned in an array must be unique
denomination_name	the display name
colorKey_name	the key of the color in the dict
data	data [{denomination:"hey",key:1},{...	array
selected_data_keys	selected data [key,key,...	array
colored_selection	is the selection using the colorKey_name to display color	bool
additional	additional info check exemple
on_selected_change	will trigger on new change