Add an overlay to a react-navigation navigator - react-native

Question

I'm trying to add an overlay (e.g. to display error popups/toasters/debug buttons etc) to a react-navigation navigator.
However I have a problem:
When I put the react navigator in a view, with the overlay on top, the react navigator either doesn't appear or is distorted in some way.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
class SimpleAppWithOverlay extends React.Component {
render() {
return(
<View>
<View style={{position: "absolute", backgroundColor:"transparent", margin:30}}>
<Text>Some Overlay</Text>
</View>
<SimpleApp/>
</View>);
}
}
Here are two snippets showing what I mean in a live editor:
Basic react navigation setup: https://snack.expo.io/ryI4oCvQW
Same, but with an overlay attempt: https://snack.expo.io/HkSgoCDX-
You can see in the second example, the overlay appears but the underlying app is just not visible.
Can this work? How?

Answer 1

Changed your code a bit
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return (
<View style={{ flex: 1 }}>
<Text>Hello, Navigation!</Text>
</View>
)
}
}
class SimpleAppWithOverlay extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<SimpleApp />
<View style={{ position: "absolute", backgroundColor: 'rgba(255,0,0,0.4)', top: 0, bottom: 0, left: 0, right: 0 }}>
<Text style={{ paddingTop: 8 }}>Some Overlay</Text>
</View>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
AppRegistry.registerComponent('overlayapp', () => SimpleAppWithOverlay);
You should note that position: 'absolute' is only positioning relative to the parent not absolutely absolute like in css.
If you want to overlay above the navigationBar you can probably do something similar with navigationOptions.headerRight.