React Native : Navigate to a screen "nested inside BottomTabNavigator" from firebase push-CodePudding

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.

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..

CodePudding user response：

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

And try to use useNavigation hook)

CodePudding user response：

As explained in the docs you can navigate like this -

RootNavigation.navigate('ChatSubB', {
  screen: 'Chat',
  params: {
    param1:'hai'
  }
});