React Navigation: Using Deep Communication with Redux

Question

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

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

But when you enable both Redux and deep binding in the RN application. uriPrefix and navigation prop both must be passed to the top level navigator, which causes an error,

This navigator has both navigation and container details, so it is unclear whether it should have 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 I integrate Redux and deep binding (using React Navigation) into an RN application?

Answer 1

See @kristfal Redux comment cannot be used with deep binding # 1189.

Or @grabbou comment.

Answer 2

I would use a reduction shop. Think about wanting a deep link to a book called "Some Title"

• Pass the main parameters of the query string to the launchpad of your application, for example, "? Route = Store / books / some-title"

• When the application loads, update your status with the information from the query string

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