React Navigation: Utilizing deep linking with Redux

Question

In React Navigation, deep linking can be utilized by passing uriPrefix prop to the top level navigator, or by passing {containerOptions: {URIPrefix: PREFIX}} as a second parameter to a built-in navigator (e.g. StackNavigator).

When Redux is integrated with React Navigation, the top level navigator is passed a navigation prop.

But, when enabling both Redux and and deep linking on a RN app. uriPrefix and navigation prop both need to be passed to a top level navigator, which throws an error,

This navigator has both navigation and container props, so it is unclear if it should own its own state.

const S1 = () => <View><Text>S1 text</Text></View>;
const S2 = () => <View><Text>S2 text</Text></View>;
const S3 = () => <View><Text>S3 text</Text></View>;

const AppNav = StackNavigator(
  {
    S1: {screen: S1, path: 's1'},
    S2: {screen: S2, path: 's2'},
    S3: {screen: S3, path: 's3'}
  }
);

@connect(state => ({nav: state.nav}))
class App extends Component {
  render() {
    const
      { dispatch, nav } = this.props,
      uriPrefix = Platform.OS == 'android' ? 'http://localhost/' : 'http://';

    return (
      <AppNav
        navigation={addNavigationHelpers({dispatch: this.props.dispatch, state: this.props.nav})}
        uriPrefix={uriPrefix}
      />
    );
  }
}

const navReducer = (state, action) => (AppNav.router.getStateForAction(action, state) || state);
const rootReducer = combineReducers({nav: navReducer});

const RootApp = props =>
  <Provider store={createStore(rootReducer)}>
    <App />
  </Provider>;

export default RootApp;

How can Redux and deep linking (using React Navigation) both be integrated in a RN app?

Farfamed

Answer 1

See @kristfal comment on Redux can not be used with deep linking #1189.

Or @grabbou comment.

Threedecker

Answer 2

I would leverage the redux store. Consider wanting to deep link to book called "Some Title"

• Pass basic query string params to your app launcher eg "?route=Store/books/some-title"

• When the app loads, update your state with the information from the query string. If you want to get fancy you can do most of this with the react router.

As long as your redux actions / reducers are setup correctly your app should load the store page with the book "Some Title" (again, this is a theoretical example)

Claudicant