Where to put all the screens which are common in multiple stack navigators? - React Navigation v5

Question

Following is the hierarchy of my app navigators

├── appNavigator ( Bottom Tab Navigator)

• ├── feed (Stack Navigator)

  • postDetailScreen
  • pageDetailScreen
  • ProfileDetailScreen
  • ...other screens

• ├── notifications (Stack Navigator)

  • ProfileDetailScreen
  • PageDetailScreen
  • PostDetailScreen
  • ...other screens

• ├── profile (Stack Navigator)

  • ProfileDetailScreen
  • PageDetailScreen
  • PostDetailScreen
  • ...other screens

Now the problem is I have to duplicate the screens (ProfileDetail, PostDetail and PageDetail) which are common among all the stacks in order for them to be accessible within the stacks.

Is there a better solution for this usecase. Where should I put the common screens so that they are available in all the children stack and I don't have to duplicate them everywhere.

Here's an open github issue which I went through but could not find a good solution Isuue

Answer 1

Since you have multiple screens in common and some different data (title, description, etc), you can create only one common stack navigator with multiple screens, and then you can call it from anywhere else.

Your stack navigator can be like this:

export default class StackNavigator extends React.Component {

    render() {

        const { stackName1, stackComponent1, stackName2, stackComponent2, stackName3, stackComponent3 } = this.props;

        // console.log("props");
        // console.log(stackName1);
        // console.log(stackComponent1);

        return (
            <Stack.Navigator initialRouteName={stackName1}>
                <Stack.Screen
                    name={stackName1}
                    component={stackComponent1}
                    initialParams={{key: "value"}}
                />
                <Stack.Screen
                    name={stackName2}
                    component={stackComponent2}
                    initialParams={{key: "value"}}
                />
                <Stack.Screen
                    name={stackName3}
                    component={stackComponent3}
                    initialParams={{key: "value"}}
                />
            </Stack.Navigator>
        )
    }
}

Then call the navigator like this from any screen(feed, notifications, profile):

<StackNavigator stackName1="PostDetailScreen" stackComponent1={PostDetailScreen} stackName2="PageDetailScreen" stackComponent2={PageDetailScreen} stackName3="ProfileDetailScreen" stackComponent3={ProfileDetailScreen}/>

Also if you want to send extra params to every single page from stack navigator, you can send those via initialParams={{key: "value"}} which I have added into every single screen of stack navigator. If you want to receive this props from the specific screen just access the key by this.props.route.params.key which is described here.

If you have more screens on the stack, then you can pass components' info in an array.