This is a part of my BottomNavigator code in App.js.
const Bottom = createBottomTabNavigator();
return (
<Bottom.Navigator
tabBarOptions={...}>
<Bottom.Screen
name="ScreenA"
component={ScreenA}
options={...}
/>
<Bottom.Screen
name="ScreenB"
component={ScreenB}
options={...}
/>
<Bottom.Screen
name="ScreenC"
component={ScreenC}
options={...}
/>
<Bottom.Screen
name="Chat"
component={Chat}
options={({navigation}) => ({
tabBarLabel: StringsOfLanguages.chat,
tabBarIcon: ({focused, color, size}) =>
focused ? (
<Image
style={appStyles.bottomTabImgSize}
source={require('./assets/abc.svg')}
/>
) : (
<Image
style={appStyles.bottomTabImgSize}
source={require('./assets/def.svg')}
/>
),
tabBarButton: (props) =>
<TouchableOpacity
{...props}
onPress={() =>
navigation.navigate('Chat', {screen: 'ChatSubA'})
}
/>
})}
/>
</Bottom.Navigator>
);
and this is the code for bottom tab named "Chat"
const Chat = () => {
// Usually ChatSubB is called from ChatSubA.. But on receiving push notification
// ChatSubB should be directly loaded.
<Stack.Navigator initialRouteName="ChatSubA">
<Stack.Screen
name="ChatSubA"
component={ChatSubA}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubB"
component={ChatSubB}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubC"
component={ChatSubC}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubD"
component={ChatSubD}
options={{headerShown: false}}
/>
</Stack.Navigator>
);};
Say if I want to navigate to ‘ChatSubB’ screen from ScreenA/ScreenB/ScreenC I am using the code
props.navigation.navigate(Chat, {
screen: ChatSubB,
params: {param1:'hai'},
});
But now I need to call ‘ChatSubB’ on push notification onclick
I don’t have ‘props’ or ‘navigate’ available to call the above line of code.
This is my PushNotificationHelper.js file. I call these methods from App.js useEffect()
import messaging from '@react-native-firebase/messaging';
import AsyncStorage from '@react-native-async-storage/async- storage';
export async function requestUserPermission() {
...
await getFcmToken();}
export async function getFcmToken() {
...}
export const notificationListener = (navigate) => {
messaging().onNotificationOpenedApp(remoteMessage => {
console.log(
'Notification caused app to open from background state:',
remoteMessage.notification,
);
// navigate("ChatScreen",{
// result: "2371820992-5406-07082-13972-17488760826513",
// });
// navigate('ChatScreen', {
// result: "2371820992-5406-07082-13972-17488760826513",
// });
navigate("Others", {
screen: ChatScreen,
params: {result: "2371820992-5406-07082-13972-17488760826513"},
});
});}
While refering to obtain props or navigate I found a solution using createRef
// RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
and use
RootNavigation.navigate('ChatSubB ', {param1:'hai'})
But this code doesn’t work for me as "ChatSubB" is nested in BottomTabNavigator
tab "Chat".
Is there any other solution to achieve my requirement?
Any help would be grateful..
2
Answers
Maybe this documentation may help you?
https://reactnavigation.org/docs/nesting-navigators/#nesting-multiple-navigators
And try to use useNavigation hook)
As explained in the docs you can navigate like this –