reactnav.jsx

import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";

import { StackNavigator, DrawerNavigator, NavigationActions } from "react-navigation";

const ScreenFirst = (props) => (
  <View>
    <TouchableOpacity onPress={() => props.screenProps.onOpen()}>
      <Text>Pop Up Something Cool</Text>
    </TouchableOpacity>
  </View>
);

const StackNav = StackNavigator({
  First: {
    screen: ScreenFirst,
  },
});

export default class App extends React.Component {
  state = {
    open: false,
  };
  render() {
    return (
      <View style={styles.container}>
        <StackNav
          screenProps={{
            onOpen: () =>
              this.setState({
                open: true,
              }),
          }}
        />
        {this.state.open && (
          <View style={styles.cover}>
            <TouchableOpacity onPress={() => this.setState({ open: false })}>
              <Text style={styles.coverText}>I'm Some cool UI!</Text>
            </TouchableOpacity>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cover: {
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,.20)",
    alignItems: "center",
    justifyContent: "center",
  },
  coverText: {
    color: "#FFF",
  },
});