CODEWITHSUNDEEP
javascriptreact-native
kirimi
kirimi

Reputation: 1400

react-native open a modal inside a modal

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={{flex:1}}>
         <View style={{width:300, height:400, backgroundColor:'red'}}>
           <Modal
             animationType="slide"
             transparent={false}
             visible={this.state.modalVisible}
             onRequestClose={() => {
               Alert.alert('Modal has been closed.');
             }}>
             <View style={{marginTop: 22}}>
               <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={{flex:1}}>
    <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.

Upvotes: 7

Views: 9442

Answers (4)

Manoj Yadav
Manoj Yadav

Reputation: 172

render() {
return (
<SafeAreaView style={{flex:1}}>
<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}}  <-- change this with
      onConfirm={() => this.setState({modalVisible: true})}
    />
  </View>
</SafeAreaView>
);
}

You dont call directly a modal, you have to toggle the visible state of modal

And then you need to close the modal as well whenever your task is completed, all you need to do is, on click or on Press.... 

    this.setState({ modalVisible: false });

Upvotes: 0

Mohammad Harith
Mohammad Harith

Reputation: 619

You could manipulate multiple modal visibility with Conditional Rendering using logical operator.
Here is the snippet code that might work in your case:

{
  this.state.isFirstModalOpen && (
    <Modal
      animationType="slide"
      transparent={false}
      visible={this.state.isModalOpen}
      onRequestClose={() => {
        Alert.alert("Modal has been closed.");
      }}
    >
      <View style={{ marginTop: 22 }}>
        <View>
          <Text>Hello World!</Text>

          <TouchableHighlight
            onPress={() => {
              this.setState({
                isFirstModalOpen: false,
                isSecondModalOpen: true
              });
            }}
          >
            <Text>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
}
{
  this.state.isSecondModalOpen && (
    <Modal
      animationType="slide"
      transparent={false}
      visible={this.state.isSecondModalOpen}
      onRequestClose={() => {
        Alert.alert("Modal has been closed.");
      }}
    >
      <View style={{ marginTop: 22 }}>
        <View>
          <Text>Hello World!</Text>

          <TouchableHighlight
            onPress={() => {
              this.setState({ isSecondModalOpen: false });
            }}
          >
            <Text>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
}

Upvotes: 0

basbase
basbase

Reputation: 1421

Multiple simultaneously open modals do not work in React Native. You could:

  • close the first modal before opening the second one, then reopening the first one when you're done with the second
  • roll your own modal using 'position: absolute' styling

Upvotes: 6

Ron Astle Lobo
Ron Astle Lobo

Reputation: 1314

Firstly, make sure both the Modal's aren't using the same state values for the visible prop in Modal.

You can use visible prop as visible={this.state.modalPage1}. The state modalPage1 should be initiated to bool value.

So if the scenario is that you are closing the first Modal and opening another one, then 

this.setState({ 
      modalPage1: false, 
      modalPage2: true
});

Hope I could help you. Do comment if any other Doubts.

Upvotes: 0

Related Questions