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?

Answer 1

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

Or @grabbou comment.