react-multi-select-v v0.0.2

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"}
});