Navgigation.navigate(param) with PushNotification in react native and react navigation - push-notification

Question

I want to redirect my user on the page I choose when they click on my push notification. I know how to get parameters from firebase.
Push Notification package : https://github.com/zo0r/react-native-push-notification
React navigation : https://reactnavigation.org/docs/getting-started/
Index.tsx :
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import PushNotification from "react-native-push-notification";
import { useNavigation } from '#react-navigation/native';
PushNotification.configure({
onNotification: function (notification) {
console.log(notification)
screenToRedirect = notification.data.screen //from firebase key => value
//here I'd like to do something like this :
const navigation = useNavigation();
navigation.navigate(screenToRedirect )
},
requestPermissions: Platform.OS === 'ios'
});
AppRegistry.registerComponent(appName, () => App);
It tells me:
Invalid hook call. Hooks can only be called inside of the body of a function component. Problem : I can't put the PushNotification.configure inside a component (it is mentioned in the doc).

Answer 1

You can't use hooks outside react components. You can try this solution: https://reactnavigation.org/docs/navigating-without-navigation-prop/

Answer 2

SOLUTION
I just added my principal menu in the root navigation. So the navigationRef return my principal menu, example :
export const Drawer = createDrawerNavigator();
export const MyDrawer = () => {
return(
<Drawer.Navigator initialRouteName="Accueil">
<Drawer.Screen name="Accueil" component={Home} />
<Drawer.Screen name="Qui sommes-nous ?" component={Who} />
<Drawer.Screen name="Nos Services" component={Services} />
<Drawer.Screen name="Nos Biens" component={Bien} />
</Drawer.Navigator>
)
}
export const Bottom = createBottomTabNavigator();
export const MyBottom = () => {
return(
<Bottom.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'home'
: 'folder';
} else if (route.name === 'Mon Profil') {
iconName = focused ? 'alert-circle' : 'aperture-sharp';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: 'tomato',
tabBarInactiveTintColor: 'gray',
})}
>
<Bottom.Screen name="Home" component={MyDrawer} options={{ headerShown: false }}/>
<Bottom.Screen name="Mon Profil" component={Profil} options={{ headerShown: false }}/>
</Bottom.Navigator>
)
}
export const navigationRef = createNavigationContainerRef()
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
const RootStack = createNativeStackNavigator();
export default function AppMenu() {
return (
<NavigationContainer ref={navigationRef} independent={true}>
<RootStack.Navigator initialRouteName="Accueil">
// Here, I return My Bottom which is the principal menu that return itself MyDrawer menu
<RootStack.Screen name="Home2" component={MyBottom} options={{ headerShown: false }}/>
</RootStack.Navigator>
</NavigationContainer>
);
}
And now My App.tsx return AppMenu.

Answer 3

Here's how I solved this problem:
1- First create a RootNavigation,js file
2- Add the below code in that file
import {createNavigationContainerRef} from '#react-navigation/native';
export const navigationRef = createNavigationContainerRef();
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
3- Add navigationRef in navigation container
import {navigationRef} from './RootNavigation';
<NavigationContainer ref={navigationRef}>
<MainStack />
</NavigationContainer>
4- Now you can use this ref outside of NavigationContainer as well if you have initialized your push notifications in app.js
import * as RootNavigation from './src/navigation/RootNavigation';
***if you are using one signal for push notifications then you can navigate to your screen in setNotificationOpenedHandler method***
//Method for handling notifications opened
OneSignal.setNotificationOpenedHandler(notification => {
RootNavigation.navigate("your_screen_name");
});