title: React Native - Modal not rendering
body: <p>This is the <code>render</code> function that is not including the <code>RespondToInquiry</code> component when it should:</p>
  
  <p>HomeScreen.js</p>
  
  <pre><code>componentDidMount() {
      console.log('key for stack navigator:',this.props.navigation.dangerouslyGetParent().state.key);
  
      this._sub = this.props.navigation.addListener(
        'didFocus',
        () =&gt; {
          console.log('in didFocus for HomeScreen');
          if(this.props.navigation.getParam('data', '') != '') {
            console.log('showRespondTo fired.');
            this.setState({info: this.props.navigation.getParam('data', '')})
            this.setState({showRespondTo: true});
          }
        }
      );
  
      ....
  
  }
  
  render() {
      console.log('in render of HomeScreen',this.props.navigation.getParam('data', ''),this.state.showRespondTo);
      return (
        &lt;View style={{flex:1}}&gt;
          {this.state.showRespondTo &amp;&amp; this.returnRespond()}
            &lt;TouchableWithoutFeedback onPress={Keyboard.dismiss}&gt;
              &lt;View style={styles.container}&gt;
                &lt;MultiSelectList
                  style={{backgroundColor: '#ffe4c4'}}
                  data={this.state.items}
                  renderItem={this.renderListItems}
                  numColumns={2}
                  contentContainerStyle={{}}
                  onEndReachedThreshold={0.5}
                  maxToRenderPerBatch={2}
                  initialNumToRender={4}
                  ListHeaderComponent={this.renderHeader}
                  getItemLayout={(data, index) =&gt; (
                    {length: Dimensions.get('window').height/2, offset: Dimensions.get('window').height/2 * index, index}
                  )}
                  backgroundColor={this.state.backgroundColor}
                /&gt;
              &lt;/View&gt;
            &lt;/TouchableWithoutFeedback&gt;
        &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>The output of <code>console.log('in render of HomeScreen',this.props.navigation.getParam('data', ''),this.state.showRespondTo);</code> is:</p>
  
  <pre><code>in render of HomeScreen (2)
  {tempId: "1537747945332", message: "Hi, I would like to rent an item from you.", dates: "[]"}
  true
  </code></pre>
  
  <p>So you can see that <code>this.state.showRespondTo</code> is true, so it should render <code>RespondToInquiry</code>, but it doesn't.</p>
  
  <p>This is what <code>RespondToInquiry.js</code> looks like:</p>
  
  <pre><code>_renderModalContent = () =&gt; (
      &lt;TouchableWithoutFeedback onPress={() =&gt; {if(this.state.keyboardOpen) {Keyboard.dismiss()}}}&gt;
        &lt;Animated.View
          style={{
            paddingTop: 5,
            paddingBottom: 10,
            paddingLeft: 10,
            paddingRight: 10,
            marginTop: this.state.yPosition,
            marginBottom: this.state.yPositionPositive,
            flex: 1,
            marginLeft: (Dimensions.get('window').width - 300) / 4,
            backgroundColor: 'rgba(0,0,0,0.8)',
            width: 300,
            borderRadius: 4,
            borderWidth: 0,
          }}&gt;
  
          &lt;View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}&gt;
            &lt;View style={{flexDirection: 'column', justifyContent: 'space-between', flex: 0, backgroundColor: '#e6fffe', marginTop: 5}}&gt;
              &lt;View style={{flex: 0, backgroundColor: '#e6fffe', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingBottom: 10, borderBottomColor: '#6de3dc', borderBottomWidth: 0}}&gt;
                &lt;View style={{justifyContent: 'center', alignItems: 'center', flex: 0.5}}&gt;
                  &lt;View style={{flexDirection: 'column', justifyContent: 'space-between'}}&gt;
                    &lt;Image
                      source={require('../assets/billythekid2.jpg')}
                      style={{height: 60, width: 60, marginTop: Platform.OS === 'ios' ? 10 : 10, borderColor: '#6de3dc', borderWidth: 2, borderRadius: 30}}
                    /&gt;
                    &lt;View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 5}}&gt;
                      &lt;Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      /&gt;
                      &lt;Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      /&gt;
                      &lt;Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      /&gt;
                      &lt;Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      /&gt;
                      &lt;Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      /&gt;
                    &lt;/View&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
                &lt;View style={{flexDirection: 'column', backgroundColor: '#e6fffe', marginTop: Platform.OS === 'ios' ? 10 : 10, flex: 0.5}}&gt;
                  &lt;View style={{flexDirection: 'row', flex: 0.5}}&gt;
                    &lt;View style={{flex: 0, alignSelf: 'center'}}&gt;
                      &lt;Text style={{fontSize: 16, fontWeight: '700'}}&gt;
                        eamon.white
                      &lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
              &lt;/View&gt;
              &lt;View style={{flex: 0, marginBottom: 5, backgroundColor: '#e6fffe'}}&gt;
                &lt;Text
                  style={{
                    width: 280,
                    flex: 0,
                    backgroundColor: '#e6fffe',
                    paddingLeft: 5,
                    borderWidth: 0,
                    borderRadius: 4,
                    color: '#000'
                  }}&gt;
                    {this.state.messageFromSender}
                &lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
            &lt;View style={{ flexDirection: 'column', flex: 1, marginBottom: 5 }}&gt;
              &lt;Text
                style={{
                  flex: 0,
                  width: Dimensions.get('window').width,
                  color: 'white',
                  fontWeight: '700',
                  marginTop: 5,
                  marginBottom: 5
                }}&gt;
                Date(s) Needed:
              &lt;/Text&gt;
              {this.showCalendar()}
            &lt;/View&gt;
            &lt;View style={{ flexDirection: 'column', flex: 0.1, marginBottom: 10 }}&gt;
              &lt;TextInput
                style={{
                  width: 280,
                  flex: 1,
                  borderColor: 'gray',
                  borderWidth: 1,
                  backgroundColor: '#ffffff',
                  paddingLeft: 5,
                  borderRadius: 4,
                }}
                onChangeText={text =&gt; this.setState({ message: text })}
                value={this.state.message}
                multiline={true}
                numberOfLines={2}
                onFocus={this.animateUp}
                placeholder='Type a message...'
              /&gt;
            &lt;/View&gt;
            &lt;View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}&gt;
              &lt;TouchableOpacity
                activeOpacity={1}
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  width: 280,
                  borderRadius: 4,
                  borderWidth: 0,
                }}
                onPress={() =&gt; {
  
                }}&gt;
                &lt;Text
                  style={{
                    backgroundColor: this.state.rentButtonBackground,
                    textAlign: 'center',
                    color: 'white',
                    fontWeight: '900',
                    fontSize: 18,
                    borderRadius: 4,
                    borderWidth: 0,
                  }}&gt;
                  RESPOND
                &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
            &lt;View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}&gt;
              &lt;TouchableOpacity
                activeOpacity={1}
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  width: 280,
                  borderRadius: 4,
                  borderWidth: 0,
                }}
                onPress={() =&gt; {
  
                }}&gt;
                &lt;Text
                  style={{
                    backgroundColor: this.state.rentButtonBackground,
                    textAlign: 'center',
                    color: 'white',
                    fontWeight: '900',
                    fontSize: 18,
                    borderRadius: 4,
                    borderWidth: 0,
                  }}&gt;
                  ACCEPT
                &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
            &lt;View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0 }}&gt;
              &lt;TouchableOpacity
                activeOpacity={1}
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  width: 280,
                  borderRadius: 4,
                  borderWidth: 0,
                }}
                onPress={() =&gt; {
  
                }}&gt;
                &lt;Text
                  style={{
                    backgroundColor: this.state.rentButtonBackground,
                    textAlign: 'center',
                    color: 'white',
                    fontWeight: '900',
                    fontSize: 18,
                    borderRadius: 4,
                    borderWidth: 0,
                  }}&gt;
                  DECLINE
                &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/Animated.View&gt;
      &lt;/TouchableWithoutFeedback&gt;
  );
  
  render() {
      //console.log('this.state._markedDates in render:', this.state._markedDates);
      return (
        &lt;Modal
          animationType="slide"
          transparent={true}
          visible={this.state.modalVisible}                                                           //THIS NEEDS TO BE TRUE WHEN I COME BACK
          onBackdropPress ={() =&gt; {/*console.log("backdrop pressed");*/ if(!this.state.keyboardOpen) {this.setModalVisible(false)} else {Keyboard.dismiss()}}}&gt;
          {this._renderModalContent()}
        &lt;/Modal&gt;
      )
  }
  </code></pre>
  
  <p>The <code>Home</code> route is navigated to from <code>App.js</code>, which is receiving a push notification...the response to the push notification is what delegates if the navigation happens or not. This is what the navigation looks like:</p>
  
  <p>App.js</p>
  
  <pre><code>export default class App extends React.Component {
  
    constructor() {
      super();
    }
  
    componentDidMount() {
      this.messageListener = firebase.messaging().onMessage((message: RemoteMessage) =&gt; {
        console.log(message);
  
        // prevent infite look
        //if (!message.local_notification) {
          let count = 1;
          let string = '';
          for(date of JSON.parse(message.data.dates)) {
  
            if(count == JSON.parse(message.data.dates).length)
              string += date;
            else {
              string += date+'\n';
            }
  
            count++;
          }
          // Process your message as required
          Alert.alert(
            'New Rental Inquiry',
            'Dates Requested:\n\n'+string,
            [
              {text: 'RESPOND', onPress: () =&gt; {
                console.log("message.data:", message.data);
                console.log("this.props.ref:", this.props.ref);
                //NavigationService.reset('Home', { data: JSON.parse(JSON.stringify(message.data)) })
                NavigationService.navigate('Home', { data: JSON.parse(JSON.stringify(message.data)) });
              }},
              {text: 'IGNORE', onPress: () =&gt; console.log('IGNORE Pressed')},
            ],
            { cancelable: false }
          )
        //}
      });
    }
  
    ....
  </code></pre>
  
  <p>I took <code>NavigationService</code> straight from the React Native docs, you can google it if you wan't to see how it works, but it is just navigation how you would with <code>this.props.navigation.navigate()</code>.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I found the bug maybe, when I press the backdrop of the modal, I am setting its <code>visible</code> prop to false effectively, so that when <code>RespondToInquiry</code> gets presented again (I'm assuming it never got unmounted because of the behavior I am seeing), the modal is not visible. Setting the modal to visible seems kind of tricky since <code>RespondToInquiry</code> doesn't seem to be getting unmounted (i.e. I can't put it in <code>componentWillUnmount</code>). In <code>RespondToInquiry</code>, in the <code>state</code> variable - I set the default for the modal to be visible, so it must not get unmounted when I navigate from it, even though it isn't in any navigation stack. Also, above - you can see my <code>didFocus</code> listener which changes the conditional that is in charge of rendering <code>RespondToInquiry</code>.</p>