React Native Modal visible prop does nothing

Question

Hello I am trying to put a simple react native modal in my react native app (running it on expo) but it is always visible. When I set the visible prop to false, it still displays. The relevant code is below:

Main Component

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

class Home extends Component {
render() {
    return (
      <View>
        <Modal visible={false}>
          <Text>Test</Text>
        </Modal>
      </View>
    );
  }
}

package.json

"dependencies": {
    "expo": "~37.0.3",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-web": "~0.11.7",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },

Basically the modal is always displaying, even though visible is set to false. Am I missing something here?

Answer 1

I try many ways want to found the problem. The result is:

It seems couldn't work correct on "web site" show, but work on ios or Android emulator.

I try your code on Doc could work, but on sandbox(web site) couldn't.

Maybe you could change to try on other emulator or Expo except "web apps" like "expo ios" or "expo Android"?