How to render a modal on top of a screen - react-native

Question

I am implementing firebase cloud messaging in my react native app. I have a regular class (not a react component) with static methods and variables that is instantiated when app fires. This class have three static methods/listeners (foreground, background and launch app) to manage push notifications from firebase.
I am trying to handle actions when in foreground.
How do I render a modal on top of a screen (not switching screens but run an overlay card in the center with two buttons), when user receives a push message from firebase, regardless of which screen he is on?
Tried solution provided on this article at hackernoon, wrapping modal component inside the AppContainer did not do anything. https://hackernoon.com/managing-react-modals-with-singleton-component-design-5efdd317295b
I have also tried the idea on this tutorial with modal component, but have not succeed in any cases.
https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
Firebase cloud messaging class:
export default class FCM {
static appClosedListener = async () => {
const firebaseContent = await firebase.notifications().getInitialNotification();
if (firebaseContent) {
console.log(firebaseContent);
const serverParcel = JSON.parse(firebaseContent._data.payload).an;
const notificationState = "closedapp";
FCM.pushNotificationHandler(serverParcel, notificationState);
}
};
static backgroundListener = () => {
FCM.background = firebase.notifications().onNotificationOpened(firebaseContent => {
const serverParcel = JSON.parse(firebaseContent._data.payload).an;
const notificationState = "background";
FCM.pushNotificationHandler(serverParcel, notificationState);
});
};
static foregroundListener = () => {
FCM.foreground = firebase.notifications().onNotification(firebaseContent => {
const serverParcel = JSON.parse(firebaseContent._data.payload).an;
const notificationState = "foreground";
FCM.pushNotificationHandler(serverParcel, notificationState);
});
};
static pushNotificationHandler = (serverParcel, notificationState) => {
const typeOfAction = serverParcel.typeEnum;
switch(typeOfAction){
case "message":
break;
case "webnews":
const url = serverParcel.link;
NavigationService.navigate("FCMModal", {}); //Here is where I want the modal to popup.
//NavigationService.navigate("InAppBrowser", {url});
break;
}
}
App.js
const ModalStack = createStackNavigator(
{
FCMModal: FCMModal
},
{
mode: 'modal',
transparentCard: true,
cardStyle: {
// makes transparentCard work for android
opacity: 1.0
}
}
)
let rootStack = createStackNavigator(
{
main: {
screen: BottomTabNavigator //There are four navigatorstacks with multiple screens beneath here
},
InAppBrowser: {
screen: InAppBrowserStack,
defaultNavigationOptions: {
tabBarVisible: true
}
},
FCMModal: {
screen: ModalStack
}
},
{
initialRouteName: "main",
headerMode: "none"
}
);
const AppContainer = createAppContainer(rootStack);
export default class App extends Component {
render() {
return (
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
);
}
}
Modal class
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';
export default class FCMModal extends Component {
state = {
modalVisible: true,
};
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{width: 600, height: 400, borderWidth: 2, borderColor: 'red', opacity: 0.5}}>
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {console.log("CLOSING MODAL!")}}>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(false);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
);
}
}