How to open a react native modal on button click in react native?

javascript reactjs react-native onclick modal-dialog

23,180

I think open a Modal in react-native very easy, simple example:

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';

class ModalExample extends Component {
  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            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>
    );
  }
}

Link: https://facebook.github.io/react-native/docs/modal.html#docsNav

If you want to use library: https://github.com/react-native-community/react-native-modal

23,180

Author by

AndroidNewBee

Updated on October 16, 2020

Comments

AndroidNewBee over 3 years
I am new to react native and I am trying to open a modal on button click. I am trying to use the following code to open the modal:-
```
  openHeaderModal = () => {
    <ModalDropdown
      options={["H1", "H2", "H3"]}
      dropdownStyle={{
        borderRadius: 6,
        backgroundColor: "#26344a",
        shadowColor: "rgba(0, 0, 0, 0.2)",
        shadowOffset: {
          width: 0,
          height: 5
        },
        shadowRadius: 20,
        shadowOpacity: 1,
        padding: 8
      }}
      dropdownTextStyle={{
        fontFamily: "poppins-500",
        fontSize: 16,
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "left",
        color: "#ffffff",
        backgroundColor: "#26344a"
      }}
    >
    </ModalDropdown>
  }
```
I am using react-native-modal-dropdown for modal. Following is my jsx code for the buton:-
```
  <Button onPress={() => this.openHeaderModal()} vertical>
     <Image
       style={{ marginTop: 20 }}
       source={require("../assets/heading.png")}
     />
  </Button>
```
Any help and support is appreciated. Thank you.
- Isaac almost 6 years
  
  So what is your problem? Are you getting exception? Or no exception but system hang...?Or.........?
- AndroidNewBee almost 6 years
  
  The problem is it doesn't open the modal. But when I place the button within the modal tags it works.I want to open it on click of the button.
- Isaac almost 6 years
  
  Try to setup the environment @ snack.expo.io
- Isaac almost 6 years
  
  The official GitHub did shared all the codes needed to use this module, have you checked them out? github.com/sohobloo/react-native-modal-dropdown/blob/master/‌…
- AndroidNewBee almost 6 years
  
  Thanks @Isaac I'll go through this also this is the link to my code on snack snack.expo.io/SkeuBuw-m
- Isaac almost 6 years
  
  The snack you created can't allow us to help as it includes too many missing png files. Please remove whatever unnecessary for your question and at least run the simulator one time to make sure able to simulate your problem
- AndroidNewBee almost 6 years
  
  Ok will do that.
- AndroidNewBee almost 6 years
  
  Let us continue this discussion in chat.
AndroidNewBee almost 6 years

Thank you so much for the reply.