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 |
|