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.

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.

```
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 (
        <Modal
        animationType="slide"
        transparent={false}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={{marginTop: 22}}>
          <View>
            <Text>Hello World!</Text>

            <TouchableHighlight
              onPress={() => {
                this.setModalVisible(!this.state.modalVisible);
              }}>
              <Text>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    );
   }

render() {
const { navigate } = this.props.navigation;
return (

    <View style={styles.appbar}>
      <Appbar style={styles.piece}>
        <Appbar.Action
          icon={require('../../assets/devices.png')}
         onPress={this.renderModal.bind(this)}

        />
      </Appbar>
      <View>  
      <Image
        source={require('../../assets/cutout.png')}
        style={styles.cutout}
        pointerEvents="none"
      />
      <FAB 
      icon={require('../../assets/add_circle.png')}
      color="#b2beb5"
      onPress={() => navigate('Homes')} 
      style={styles.fab} />
      </View>
      <Appbar style={[styles.piece, styles.right]}>

        <Appbar.Action
          icon={require('../../assets/account_box.png')}
          onPress={() => console.log('Account pressed')}
        />
      </Appbar>
    </View>

   );
  }
}

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
   }
});

```