I am using react-native-sectioned-multi-select library. I want to open another modal view after I click the confirm button.
I feel like I did the code correctly but this isn't working. Is it possible to open a new modal inside this library?
const items = [
{
name: "Fruits",
id: 0,
children: [{
name: "Apple",
id: 10,
},{
name: "Strawberry",
id: 17,
},{
name: "Pineapple",
id: 13,
},{
name: "Banana",
id: 14,
},{
name: "Watermelon",
id: 15,
},{
name: "Kiwi fruit",
id: 16,
}]
}]
export default class TestScreen extends Component {
constructor(){
super()
this.state = {
selectedItems: [],
modalVisible: false,
}
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
onSelectedItemsChange = (selectedItems) => {
this.setState({ selectedItems });
console.log(selectedItems)
}
openModal = () => {
return(
<SafeAreaView style=>
<View style=>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style=>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
}}>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
</SafeAreaView>
)
}
render() {
return (
<SafeAreaView style=>
<View>
<SectionedMultiSelect
items={items}
uniqueKey='id'
subKey='children'
selectText='Choose some things...'
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={this.state.selectedItems}
//Here I call the openModal function but nothing appears
onConfirm={()=> {this.openModal}}
/>
</View>
</SafeAreaView>
);
}
}
Any comments or advise would be really appreciated! Thanks in advance! :)
Edited
If I can't open two modals at a time, I want my new modal to open after I close my first modal.
from react-native open a modal inside a modal
No comments:
Post a Comment