7

Is there any way to configure react-navigation so that single screen can handle multiple links?

Each screen in StackNavigator can have an optional property path which enabled deep links, StackNavigator also accepts paths option that lets u override paths per specific screen but it's still one-to-one mapping. Is there a way to declare unlimited amount of paths that should be handled by single screen?

Max Komarychev
  • 2,836
  • 1
  • 21
  • 32

1 Answers1

7

You can use variables for unlimited number of paths like its shown in StackNavigator docs

Example from docs

StackNavigator({
  // For each screen that you can navigate to, create a new entry like this:
  Profile: {
    // `ProfileScreen` is a React component that will be the main content of the screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

Update

You can create a custom route handler for more detailed control over paths shown here.

Example from docs

import { NavigationActions } from 'react-navigation'

const MyApp = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
}, {
  initialRouteName: 'Home',
})
const previousGetActionForPathAndParams = MyApp.router.getActionForPathAndParams;

Object.assign(MyApp.router, {
  getActionForPathAndParams(path, params) {
    if (
      path === 'my/custom/path' &&
      params.magic === 'yes'
    ) {
      // returns a profile navigate action for /my/custom/path?magic=yes
      return NavigationActions.navigate({
        routeName: 'Profile',
        action: NavigationActions.navigate({
          // This child action will get passed to the child router
          // ProfileScreen.router.getStateForAction to get the child
          // navigation state.
          routeName: 'Friends',
        }),
      });
    }
    return previousGetActionForPathAndParams(path, params);
  },
});
bennygenel
  • 23,896
  • 6
  • 65
  • 78
  • thank you for your answer, perhaps I wasn’t clear in the question, can you give an example of the config which will open Profile for the following urls: people/john, friends/john people/friends/john, etc, example a bit exaggerated, hope you got the idea, thanks – Max Komarychev Mar 09 '18 at 16:17
  • one more thing is that different urls can have different set of parameters like: people/:name, friends/:name, anotherpath/:param1/more/segments/param2 etc – Max Komarychev Mar 09 '18 at 16:19
  • Thanks, sadly the only way to do that, I hoped for something built in though. – Max Komarychev Apr 02 '18 at 20:15
  • 1
    @MaxKomarychev have you figured out the way? I need that too – Zennichimaro Sep 22 '20 at 05:40
  • @Zennichimaro it was a while but I believe I ended up creating custom router pretty much similar to what is the answer. But it was 2-3 major versions ago, perhaps there is a nicer way to do this now. – Max Komarychev Sep 24 '20 at 12:08