React-Navigation: Using same screen in two bottom tabs

Question

My app has two bottom tabs and I'd like to reuse the same screen component in each tab, but with different parameters (in UserNav, the tasks refer to the user's tasks vs. in FriendsNav, the tasks refer to a friend's tasks).

I see two options here:

Create different screen files for user vs. friends tasks (even if all UI elements are identical), and pull any shared components out. The two screens will just call the shared components.
Use one screen file --- but assign as different routeNames in each navigator -- then when the component is called, use information provided by React Navigation to determine which route / Navigator is being used.

I'm currently doing the latter, using navigation.state.routeName to determine the current route called (and from there, setting the state accordingly). I could also store more global navigation state using redux, but this seems unnecessary.

Is there a recommended way to achieve the goal here ?

const UserNav = createStackNavigator({
  UserTasks: {
    screen: Tasks 
});

const FriendsNav = createStackNavigator({
  FriendTasks: {
    screen: Tasks //note using the same screen again
  }
});
createBottomTabNavigator({
    User: UserNav,
    Friends: FriendsNav
})

Tasks screen, using routeName to determine data

class Tasks extends React.Component {
    render() { 

        //Using the active tab seems cleaner than routeName but it is 
        //not clear to me how to get this from React Navigation state
        const route = this.props.navigation.state.routeName; 

        //get state from redux
        const tasks = (route === "UserTasks" ? this.props.user_tasks : this.props.friend_tasks;

        return (//code using tasks)

}

learningAngular learningAngular · Accepted Answer · 2019-02-03T02:35:02

I ended up choosing option 1 - creating different screen files for each tab. Why?

I didn't want to have to manually check the routes at every screen in the stack.
I couldn't figure out to how to determine active tab the without storing it in Redux (GitHub reference), and I didn't want to rely on Redux for this.

React-Navigation: Using same screen in two bottom tabs

1 Answers