Working with react-native-navigation

[JimTeva]

For anyone who needs to make this work with react-native-navigation, this is how I did:

Create a transparent screen (a full screen component) where you will display the notifier

import React, {Component} from 'react';
import {View} from 'react-native';
import {NotifierRoot} from 'react-native-notifier';
import {Navigation} from 'react-native-navigation';

export class Notifier extends Component {
  componentDidMount() {
    this.notifierRef.showNotification({
      title: this.props.textToShow,
      duration: 1000,
    });
    setTimeout(() => {
      Navigation.dismissOverlay(this.props.componentId);
    }, 1200);
  }
  render() {
    return (
      <View style={Styles.mainContainer}>
        <NotifierRoot
          ref={ref => {
            this.notifierRef = ref;
          }}
        />
      </View>
    );
  }
}

export default Notifier;

const Styles = {
  mainContainer: {
    height: 100,
    width: '100%',
    backgroundColor: 'transparent',
  },
};

Register that screen with react-native-navigation (I am using Redux and a gestureHandler in my example but this is not needed)

import Notifier from '../components/notifier';
...
Navigation.registerComponentWithRedux(
    'NotifierScreen',
    () => gestureHandlerRootHOC(Notifier),
    Provider,
    store,
  );

Now, anywhere in your app, show the notifier using Overlay

Navigation.showOverlay({
    component: {
        name: 'NotifierScreen',
        passProps: {
            textToShow: 'Success !',
        },
        options: {
            overlay: {
                interceptTouchOutside: false,
            },
            layout: {
                componentBackgroundColor: 'transparent',
            },
        },
    },
});

[seniv]

Hey @JimTeva, thanks for the information! I didn't try to use notifier with react-native-navigation, but this might be helpful and I'm going to add a link to this issue in Readme.

[pke]

@JimTeva Why is this required in the first place? Did the notifications not show up? Did the screw up the rendering of the navigators?

[JimTeva]

@pke I don't know if this is still relevant as it has been more than a year now. For what I remember the notifier didn't show up while using react-native-navigation.

[pke]

I'll give it a try.

[z1haze]

@JimTeva Why is this required in the first place? Did the notifications not show up? Did the screw up the rendering of the navigators?

The issue is the z-index if you're using createNativeStackNavigator. The notifications appear beneath the screens

[JimTeva]

@z1haze Are you talking about React Native Navigation or React Navigation?

[z1haze]

Sorry, react-navigation. I'll update my post. There's a Readme todo about perhaps this issue, but it is hardly a fix