React native navigation cross screens notification "snackbar"

Question

Trying to implement a "No internet" notification across alot of screens in react native using react-navigation. I'm trying to avoid adding the component to all screen views render function since it feels like boilerplate.

Is there a simple way to add a component in one place using react native navigation and have it persist in all screens?

Answer 1

I think this notification doesn't have much to do with your navigation and it should be implemented outside of it. In our app we have a similar notification banner that is called outside of our Navigator and handles the display of error messages such as no connectivity.

Our App.js looks something like this:

<Provider store={store}>
        <View>
          <Message /> // message banner
          <AppNavigator /> // this is our navigation
        </View>
  </Provider>

The Message component is out of the navigation and is connected to our redux store. Every time we have an error we dispatch a redux action and display the message without going through the navigation at all.