CODEWITHSUNDEEP
react-nativemodal-dialog
rjotanson
rjotanson

Reputation: 31

React native Modal core component always visible with red border even when setting visible={false}

I'm new to React Native and was trying to create a Modal based on the docs https://reactnative.dev/docs/modal.

I tried copy pasting the Function / Class component example of the modal on a brand new project. But what I see is simply a box with red border that persistently shows up, even when I tweak the visible = {false}. When I added a console.log() function though, it outputs just as expected. Is anyone having any issue with this? Here's how it looks: react native modal is persistent with red border Also, I saw someone else posting a solution in this post: react native modal always visible but none of the solutions worked.

The code is exactly what is in the docs. https://reactnative.dev/docs/modal. 

import React, { Component } from "react";
import {
  Alert,
  Modal,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from "react-native";

class App extends Component {
  state = {
    modalVisible: false
  };

  setModalVisible = (visible) => {
    this.setState({ modalVisible: visible });
    console.log(this.state.modalVisible)
  }

  render() {
    const { modalVisible } = this.state;
    return (
      <View style={styles.centeredView}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            Alert.alert("Modal has been closed.");
          }}
        >
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.modalText}>Hello World!</Text>

              <TouchableHighlight
                style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                onPress={() => {
                  this.setModalVisible(!modalVisible);
                }}
              >
                <Text style={styles.textStyle}>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          style={styles.openButton}
          onPress={() => {
            this.setModalVisible(true);
          }}
        >
          <Text style={styles.textStyle}>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

Upvotes: 3

Views: 1228

Answers (1)

Edgar256
Edgar256

Reputation: 902

This is apparently a known issue with the react-native-modal when displayed on web. The good news is that there is a package that solves this particular problem called the modal-enhanced-react-native-web. Simply install this powerful package npm i modal-enhanced-react-native-web and you will not have the issue anymore

Upvotes: 1

Related Questions