Multi select dropdown in react native - reactjs

Question

I am new to react native. Can anyone suggest how do i implement multiple select dropdown in react native. I have tried MultiSelect (https://github.com/toystars/react-native-multiple-select) from react-native-multiple-select but it is not working.

Answer 1

This is a source code of implemented multiselect source list
import React from 'react';
import {View, Text, StyleSheet, FlatList, TouchableHighlight, Dimensions} from 'react-native';
var thisObj;
var deviceHeight = Dimensions.get("window").height;
class MyListItem extends React.PureComponent {
render() {
return (
<View style={{flex: 1}}>
<TouchableHighlight onPress={this.props.onPress.bind(this)} underlayColor='#616161'>
<Text style={this.props.style}>{this.props.item.key}</Text>
</TouchableHighlight>
</View>
);
}
}
export default class MultiSelect extends React.Component {
constructor(props) {
super(props);
var selectedItemsObj = {};
if(this.props.selectedItems) {
var items = this.props.selectedItems.split(',');
items.forEach(function(item) {
selectedItemsObj[item] = true;
});
}
this.state = {
selectedItems: selectedItemsObj
};
}
onItemPressed(item) {
var oldSelectedItems = this.state.selectedItems;
var itemState = oldSelectedItems[item.key];
if(!itemState) {
oldSelectedItems[item.key] = true;
}
else {
var newState = itemState? false: true;
oldSelectedItems[item.key] = newState;
}
this.setState({
selectedItems: oldSelectedItems,
});
var arrayOfSelectedItems = [];
var joinedItems = Object.keys(oldSelectedItems);
joinedItems.forEach(function(key) {
if(oldSelectedItems[key])
arrayOfSelectedItems.push(key);
});
var selectedItem = null;
if(arrayOfSelectedItems.length > 0)
selectedItem = arrayOfSelectedItems.join();
this.props.onValueChange(selectedItem);
}
componentWillMount() {
thisObj = this;
}
getStyle(item) {
try {
console.log(thisObj.state.selectedItems[item.key]);
return thisObj.state.selectedItems[item.key]? styles.itemTextSelected : styles.itemText;
} catch(e) {
return styles.itemText;
}
}
_renderItem = ({item}) => {
return (<MyListItem style={this.getStyle(item)} onPress={this.onItemPressed.bind(this, item)} item={item} />);
}
render() {
return (
<View style={styles.rootView}>
<FlatList style={styles.list}
initialNumToRender={10}
extraData={this.state}
data={this.props.data}
renderItem={this._renderItem.bind(this)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
rootView : {
height: deviceHeight / 2
},
itemText: {
padding: 8,
color: "#fff"
},
itemTextSelected: {
padding: 8,
color: "#fff",
backgroundColor: '#757575'
},
list: {
flex: 1,
}
});
This is how the component should be used
this.state = {
selectedItem : null,
data: [{key:"key1", label:"label1"}, {key:"key2", label:"label2"}]
}
...
<MultiSelect
data={this.state.data}
selectedItems={this.state.selectedItem}
onValueChange={ (itemValue) => thisObj.setState({selectedItem: itemValue})}/>
Selected values will be joined and set in this.state.selectedItem field

Answer 2

I have implemented React Native component.
Source code is attached.
It shows how to make list checkable.
It may be a base for your solution.
Please see.
import React from 'react';
import {View, Text, StyleSheet, FlatList, TouchableHighlight} from 'react-native';
var thisObj;
export default class MultiSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedItems: {}
};
}
onItemPressed(item) {
var oldSelectedItems = this.state.selectedItems;
var itemState = oldSelectedItems[item.key];
if(!itemState) {
oldSelectedItems[item.key] = true;
}
else {
var newState = itemState? false: true;
oldSelectedItems[item.key] = newState;
}
this.setState({
selectedItems: oldSelectedItems,
});
}
componentDidMount() {
thisObj = this;
}
getStyle(item) {
try {
console.log(thisObj.state.selectedItems[item.key]);
return thisObj.state.selectedItems[item.key]? styles.itemTextSelected : styles.itemText;
} catch(e) {
return styles.itemText;
}
}
render() {
return (
<View style={styles.rootView}>
<FlatList style={styles.list}
extraData={this.state}
data={this.props.data}
renderItem={({item}) =>
<TouchableHighlight onPress={this.onItemPressed.bind(this, item)} underlayColor='#f00'>
<Text style={this.getStyle(item)}>{item.key}</Text>
</TouchableHighlight>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
rootView : {
},
itemText: {
padding: 16,
color: "#fff"
},
itemTextSelected: {
padding: 16,
color: "#fff",
backgroundColor: '#f00'
},
list: {
}
});
How to use this
<Multiselect data = { [{"key" : "item1"}, {"key" : "item2"}{"key" : "item3"}]
}\>