Using React-native-notifications in React-navigation - react-native

Question

I have an app with following structure:
AuthNavi: {
login1: login1,
login2: login2
}
TabNavi: {
tab1: TabNavi1
tab2: TabNavi2,
...
}
AppSwitchNavi: {
AuthLoading: LoadingScreen, (initial screen)
Auth: AuthNavi,
Content: TabNavi
}
The app started with AppSwitchNavi, if haven't login the app, it will go to AuthNavi, else go to TabNavi.
I would like to add request the notification permission after login, and handling of notification may also be added after login.
Does anyone know how to implement notification in at this situation, which only works in TabNavi?

Answer 1

This is the simple event-based implementation on components.
import { EventEmitter } from 'events';
const appEvents = new EventEmitter();
appEvents.setMaxListeners(0);
export default class AppEvents {
static removeEvent(subscribe) {
subscribe.remove();
}
static registerLoginEvent(method) {
return appEvents.addListener('Login-Required-Event', method);
}
static emitLoginEvent(data) {
appEvents.emit('Login-Required-Event', data);
}
static removeLoginEvent(method) {
appEvents.removeListener('Login-Required-Event', method);
}
}
Implemetation:
import React from 'react';
import AppEvents from './AppEvents';
import AppSwitchNavi from './Navigations';
export default class AppSwitchNaviWrapper extends React.Component {
componentDidMount() {
AppEvents.registerLoginEvent(this.loginEvent);
}
componentWillUnmount() {
AppEvents.removeLoginEvent(this.loginEvent);
}
loginEvent = () => {
// do something
};
render() {
return <AppSwitchNavi />;
}
}
Emit event from some situation as AppEvents.emitLoginEvent(UserData);
But IMO you should handle redux for such situations, Redux will help you out in long run. The event-based implementation makes problem to you & you have to very careful about the implementation and removing the event to prevent memory leaks and unexpected behavior of the app.