Closed AlfaIrawan closed 6 years ago
Maybe this is what you are looking for ?
From docs
constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}
@williamdes I'm try this sample
import React, { Component } from 'react';
import { View } from 'react-native';
import MultiSelect from 'react-native-multiple-select';
class MultiSelectExample extends Component {
this.state = {
selectedItems = [];
};
this.items = [{
id: '92iijs7yta',
name: 'Ondo',
}, {
id: 'a0s0a8ssbsd',
name: 'Ogun',
}, {
id: '16hbajsabsd',
name: 'Calabar',
}, {
id: 'nahs75a5sg',
name: 'Lagos',
}, {
id: '667atsas',
name: 'Maiduguri',
}, {
id: 'hsyasajs',
name: 'Anambra',
}, {
id: 'djsjudksjd',
name: 'Benue',
}, {
id: 'sdhyaysdj',
name: 'Kaduna',
}, {
id: 'suudydjsjd',
name: 'Abuja',
}];
onSelectedItemsChange = selectedItems => {
this.setState({ selectedItems });
};
render() {
const { selectedItems } = this.state;
return (
<View style={{ flex: 1 }}>
<MultiSelect
hideTags
items={items}
uniqueKey="id"
ref={(component) => { this.multiSelect = component }}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={selectedItems}
selectText="Pick Items"
searchInputPlaceholderText="Search Items..."
onChangeInput={ (text)=> console.log(text)}
altFontFamily="ProximaNova-Light"
tagRemoveIconColor="#CCC"
tagBorderColor="#CCC"
tagTextColor="#CCC"
selectedItemTextColor="#CCC"
selectedItemIconColor="#CCC"
itemTextColor="#000"
displayKey="name"
searchInputStyle={{ color: '#CCC' }}
submitButtonColor="#CCC"
submitButtonText="Submit"
/>
</View>
);
}
}
SOLVED!!
import React, { Component } from 'react';
import { View } from 'react-native';
import MultiSelect from 'react-native-multiple-select';
const items = [{
id: '92iijs7yta',
name: 'Ondo',
}, {
id: 'a0s0a8ssbsd',
name: 'Ogun',
}, {
id: '16hbajsabsd',
name: 'Calabar',
}, {
id: 'nahs75a5sg',
name: 'Lagos',
}, {
id: '667atsas',
name: 'Maiduguri',
}, {
id: 'hsyasajs',
name: 'Anambra',
}, {
id: 'djsjudksjd',
name: 'Benue',
}, {
id: 'sdhyaysdj',
name: 'Kaduna',
}, {
id: 'suudydjsjd',
name: 'Abuja',
}];
class MultiSelectExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedItems: []
};
}
render() {
const onSelectedItemsChange = (selectedItems) => {
this.setState({selectedItems});
console.log(selectedItems);
};
const { selectedItems } = this.state;
return (
<View style={{ flex: 1 }}>
<MultiSelect
hideTags
items={items}
uniqueKey="id"
ref={(component) => { this.multiSelect = component }}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={selectedItems}
selectText="Pick Items"
searchInputPlaceholderText="Search Items..."
onChangeInput={ (text)=> console.log(text)}
altFontFamily="ProximaNova-Light"
tagRemoveIconColor="#CCC"
tagBorderColor="#CCC"
tagTextColor="#CCC"
selectedItemTextColor="#CCC"
selectedItemIconColor="#CCC"
itemTextColor="#000"
displayKey="name"
searchInputStyle={{ color: '#CCC' }}
submitButtonColor="#CCC"
submitButtonText="Submit"
/>
</View>
);
}
}
Hey @toystars, do you how to solve this issue