skip to Main Content

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


  1. Maybe this documentation may help you?
    https://reactnavigation.org/docs/nesting-navigators/#nesting-multiple-navigators

    And try to use useNavigation hook)

    Login or Signup to reply.
  2. As explained in the docs you can navigate like this –

    RootNavigation.navigate('ChatSubB', {
      screen: 'Chat',
      params: {
        param1:'hai'
      }
    });
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search