title: React Native Modal not showing up
body: <p>I am trying to show a modal without going to another screen, I want it to be displayed on the current screen but not through navigation. The modal doesn't pop up and I don't know the problem.</p>
  
  <p>I am using the renderModal to show the modal on the screen.When I use this.props.navigation.navigate('AnotherModal'), it works but goes to another screen,this time I want to show modal on the same screen.</p>
  
  <pre><code>import * as React from 'react';
  import { Text, View, Image, 
  StyleSheet,Alert,Modal,TouchableHighlight } from 'react-native';
  import { Constants } from 'expo';
  import { Appbar, Colors, FAB } from 'react-native-paper';
  import ProductsModal from './ProductsModal';
  import ModalTester from './ModalTester';
  
  
  export default class AppBar extends React.Component {
  state = {
      modalVisible: false,
    };
  
    setModalVisible(visible) 
    {
      this.setState({modalVisible: visible});
    }
  
  
  renderModal() {
      return (
          &lt;Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() =&gt; {
            Alert.alert('Modal has been closed.');
          }}&gt;
          &lt;View style={{marginTop: 22}}&gt;
            &lt;View&gt;
              &lt;Text&gt;Hello World!&lt;/Text&gt;
  
              &lt;TouchableHighlight
                onPress={() =&gt; {
                  this.setModalVisible(!this.state.modalVisible);
                }}&gt;
                &lt;Text&gt;Hide Modal&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/Modal&gt;
      );
     }
  
  render() {
  const { navigate } = this.props.navigation;
  return (
  
      &lt;View style={styles.appbar}&gt;
        &lt;Appbar style={styles.piece}&gt;
          &lt;Appbar.Action
            icon={require('../../assets/devices.png')}
           onPress={this.renderModal.bind(this)}
  
          /&gt;
        &lt;/Appbar&gt;
        &lt;View&gt;  
        &lt;Image
          source={require('../../assets/cutout.png')}
          style={styles.cutout}
          pointerEvents="none"
        /&gt;
        &lt;FAB 
        icon={require('../../assets/add_circle.png')}
        color="#b2beb5"
        onPress={() =&gt; navigate('Homes')} 
        style={styles.fab} /&gt;
        &lt;/View&gt;
        &lt;Appbar style={[styles.piece, styles.right]}&gt;
  
          &lt;Appbar.Action
            icon={require('../../assets/account_box.png')}
            onPress={() =&gt; console.log('Account pressed')}
          /&gt;
        &lt;/Appbar&gt;
      &lt;/View&gt;
  
     );
    }
  }
  
  const styles = StyleSheet.create({
   container: {
  flex: 1,
  justifyContent: 'center',
  paddingTop: Constants.statusBarHeight,
  //backgroundColor: '#ecf0f1',
  padding: 8,
  },
  appbar: {
    position: 'absolute',
  left: 0,
  right: 0,
  bottom: 0,
  height: 56,
  flexDirection: 'row',
   },
  piece: {
  flex: 1,
  backgroundColor: Colors.grey300,
  },
  right: {
  justifyContent: 'flex-end',
   },
   cutout: {
  height: 56,
  width: 80,
  tintColor: Colors.grey300,
  
  
   },
  fab: {
  position: 'absolute',
  margin: 12,
  bottom: 16
     }
  });
  </code></pre>