react navigation full screen modal from windowed component - react-native

Question

How do you open a full screen modal from a windowed component in react navigation?
The opened modal has always the same size as the windowed component, from which the modal was navigated to.
I created a snack expo to show the problem here: https://snack.expo.io/Bk0N69FwX
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.
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 (
<View style={styles.container}>
<Text style={styles.text}>
This should be a full screen modal
</Text>
</View>
)
}
}
// windowed component, from which the modal will be navigated to
class NestedComponent extends React.Component {
render() {
return (
<View style={styles.nestedContainer}>
<Text style={styles.text}>
nested component
</Text>
<Button
onPress={() => this.props.navigation.navigate('modal')}
title="open modal"
/>
</View>
)
}
}
const ModalStackComponent = () => {
return (
<ModalStackNavigator />
)
}
const ModalStackNavigator = createStackNavigator(
{
nestedComponent: {
screen: NestedComponent,
navigationOptions: {
header: null,
},
},
modal: {
screen: Modal,
},
},
{
mode: 'modal',
}
)
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
// some stub container to limit screen size for nested component
<View style={styles.upperComponentContainer}>
<Text style={styles.text}>
upper component
</Text>
</View>
<ModalStackComponent />
</View>
);
}
}
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',
},
});

Answer 1

For your requirement, you can use React native Modals.
https://facebook.github.io/react-native/docs/0.56/modal