Modal does not appear

I am trying to get a simple modal to appear on screen using RN v0.40.0. I have imported the animated modal using

import Modal from 'react-native-animated-modal';

and have inserted a modal component into my view:

 <View>
              <Text style={{marginTop: 80}}>Hello</Text>
               
               <Modal
                isVisible={true}
               >
               <Navigator
                initialRoute={{ title: 'SignUp', index: 0 }}
                renderScene={(route, navigator) =>
                  <SignUp onModalClose={this.onModalClose.bind(this)} />
                }
                />
               </Modal>
</View>

The modal does not appear.

However, I have found that by changing isVisible to the regular react-native prop visible and running my app, a normal non animating modal appears. After that, I can change the visibleProp back to the animatedModal prop isVisible, and get an animated modal to appear the first time running the app, but it does not appear on subsequent runs.

For example, I change isVisible to visible:

<Modal
                visible={true}
               >

Then run the app. A regular react native modal appears with my views in it.

After that, I change visible back to isVisible

<Modal
                isVisible={true}
               >

and run the app again. this time the animated modal appears correctly this one and only run. However if I refresh the app in the simulator, the modal does not appear on subsequent runs. Any ideas how to solve this?

[akshaysanthanam]

The modal does not appear for at all, i have tried the code is “A complete example section”:

Code: import React, { Component } from “react”; import { Text, TouchableOpacity, View } from “react-native”; import Modal from “react-native-modal”;

export default class ModalTester extends Component { state = { isModalVisible: false };

_toggleModal = () =>
    this.setState({ isModalVisible: !this.state.isModalVisible });

render() {
    return (
        <View style={{ flex: 1 }}>
            <TouchableOpacity onPress={this._toggleModal}>
                <Text>Show Modal</Text>
            </TouchableOpacity>
            <Modal isVisible={this.state.isModalVisible}>
                <View style={{ flex: 1 }}>
                    <Text>Hello!</Text>
                    <TouchableOpacity onPress={this._toggleModal}>
                        <Text>Hide me!</Text>
                    </TouchableOpacity>
                </View>
            </Modal>
        </View>
    );
}

}

The modal does not show-up at all.

[sayo96]

I’m experiencing the same problem. In my case, modal doesn’t appear after a re render but it appears when i reload the app. @mmazzarolo @akshaysanthanam @helloeyesimple Do any of you guys have a fix for this problem?