CODEWITHSUNDEEP
react-nativenotificationsreduxreact-reduxreact-navigation
hdsenevi
hdsenevi

Reputation: 981

React Navigation + custom notification UI

I have a react native app with the following frameworks

ReactNavigation structure

I'm trying to create an "in-app custom notification UI" as that's required per the design of the app. I can't use the normal "local/push notification". And since I'm using redux, I've created a custom middleware that handles notification actions.

When a notification action is fired from anywhere in the app, this redux middleware catches it and passes the notification to my NotificationUI component. This all works well.

My issue is with how to show this NotificationUI (with ReactNavigation)?

I need this NotificationUI to be injected from the root (so to speak) so that I don't need to add the NotificationUI for every "screen" that I have for the app.

What is the most elegant way to handle that?

I've tried creating a Higher Order Component out of NotificationUI component and "wrapping" the 'Root navigator' in it, but that results in something like the following. (Notification is the red bar at the bottom). It's stacking on top of each other. But I want one to be in the background and the other to be on the foreground.

enter image description here

Upvotes: 2

Views: 1005

Answers (1)

HumanCEO
HumanCEO

Reputation: 2561

This is how I solved it in code:

  <Provider store={store}>
    <React.Fragment>
      <SystemNotificationComponent />
      <RootStack />
    </React.Fragment>
  </Provider>
);

And yes, SystemNotificationComponent should be positioned as 'absolute' of course!

This will show content from SystemNotificationComponent on top of any navigation screens.

Upvotes: 1

Related Questions