react-native open a modal inside a modal

react native modal
react native modal multiple modal
react native modal with text input
react-native modal not showing
react native-draggable modal
react-native-modal propagate swipe
react-native modal background color
react native modal hooks

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.


modal in front of a modal · Issue #4 · react-native-community/react , Hey, In my app, i need to open a new modal in front of an existing modal, Where both components are "react-native-animated-modal" inside. Render the nested color modal inside the outer modal as content, the visibility of nested modal will depend on the click/press over the text.Consider the sample code below, for demonstration purpose, I have used react-native-color-picker library, you can use any other library as well.


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.

How to create your first modal popup for your React-Native app, Once this has finished creating open the project in your favoured text editor, mine This will then begin installing, I prefer using “react-native-modal” be used to show the modal after clicking on the piece of text inside of the  The Modal component is a basic way to present content above an enclosing view. React Native 0.62. events will not be emitted as long as the modal is open. Type


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>
  );
}

Modal · React Native, component is a basic way to present content above an enclosing view. React Native Modal is a component to present content above an enclosing view. This is supported by Android and IOs both. Modal contains its own view which is visible when we open the modal. Here is a small example to show how can we make modal in our React Native App.


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 });

How do I close a React Native Modal?, React Native Modal is a component to present content above an enclosing view. Android and IOs both Modal contains its own view which is visible when we open the modal. Here is a small <Modal>All views inside the modal</Modal>  If you come from Angular, jQuery, or even just vanilla JS, your thought process for opening a modal dialog probably goes something like this: I need to open a modal. I’ll just call the modal function, which opens it up. Then the modal will wait for its “Close” button to be clicked.


React Native Modal - How to Show a Modal in React , An enhanced React Native modal. Miss any of our Open RFC calls? Inside the modal there is another button that, when pressed, sets  supportedOrientations. The supportedOrientations prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by


react-native-modal, In this tutorial, we will check out the various react-native modal examples, and show Add Button to Open Modal Dialog; Show React Native Modal; Close React Native Modal Next, get inside the ios folder of your project. The first example to using the reusable custom component CustomModal is opening the modal box in full screen. In the React Native Modal full screen demo, we used React Navigation in order to use only a single screen, then pass different navigation parameters to that screen. A new screen is created called BasicScreen.js.


React Native Modal Tutorial with Examples, React Native - Modal - In this chapter, we will show you how to use the modal component We will put logic inside ModalExample. React Native Open Modal. In this post we’re going to implement a basic modal component in React. Here’s a summary of the steps we’ll take: Create a Dashboard component which holds state and an open button; Create a Modal component which renders children and holds a close button; Display the Modal component upon clicking open; Close the Modal component upon