Add an overlay to a react-navigation navigator

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.