title: react navigation full screen modal from windowed component
body: <p>How do you open a full screen modal from a windowed component in react navigation?<br>
  The opened modal has always the same size as the windowed component, from which the modal was navigated to.</p>
  
  <p>I created a snack expo to show the problem here: <a href="https://snack.expo.io/Bk0N69FwX" rel="nofollow noreferrer">https://snack.expo.io/Bk0N69FwX</a></p>
  
  <p>This is just a basic example to show the problem, in my actual project the components are nested many times, so I cannot easily set the modal in the top level StackNavigator and navigate to it from a deeply nested component.</p>
  
  <pre><code>import * as React from 'react';
  import { Text, View, StyleSheet, Button } from 'react-native';
  import { Constants } from 'expo';
  
  import { createStackNavigator } from 'react-navigation';
  
  
  // modal that should be rendered full screen
  class Modal extends React.Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.text}&gt;
            This should be a full screen modal
          &lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  }
  
  // windowed component, from which the modal will be navigated to
  class NestedComponent extends React.Component {
    render() {
      return (
        &lt;View style={styles.nestedContainer}&gt;
          &lt;Text style={styles.text}&gt;
            nested component
          &lt;/Text&gt;
          &lt;Button
           onPress={() =&gt; this.props.navigation.navigate('modal')} 
           title="open modal" 
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const ModalStackComponent = () =&gt; {
    return (
      &lt;ModalStackNavigator /&gt;
    )
  }
  
  const ModalStackNavigator = createStackNavigator(
    {
      nestedComponent: {
        screen: NestedComponent,
        navigationOptions: {
        header: null,
      },
    },
      modal: {
        screen: Modal,
      },
    },
    {
      mode: 'modal',
    }
  )
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
  
          // some stub container to limit screen size for nested component
          &lt;View style={styles.upperComponentContainer}&gt;
            &lt;Text style={styles.text}&gt;
              upper component
            &lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;ModalStackComponent /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'stretch',
      justifyContent: 'center',
      paddingTop: Constants.statusBarHeight,
      backgroundColor: '#ecf0f1',
    },
    upperComponentContainer: {
      flex: 1, 
      backgroundColor: 'lightgrey', 
      justifyContent: 'center', 
    },
    nestedContainer: {
      flex: 1,
      justifyContent: 'center',
    },
    text: {
      textAlign: 'center',
      fontSize: 20,
      color: 'black',
    },
  });
  </code></pre>