Actions.create + redux + connect state = Red screen

[coolmic]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.28 (v3 is not supported)
• react-native v0.48.4

Expected behaviour

Use Action.create to create a NavigationContainer.
Then connect it to redux

It works very well in RNRF 4.0.0-beta.23

Actual behaviour

Red screen with this message :

This navigator has both navigation and container props, so it is unclear if it should own its own state. Remove props: "uriPrefix" if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass a navigation prop.

Steps to reproduce

I have something like

const mapStateToProps = state => ({ state: state.nav });
const ReduxRouter = connect(mapStateToProps)(Router);
export default ReduxRouter;


const navigator = Actions.create(
  <Lightbox>
    <Stack hideNavBar key="root">
      {signOutStack}
      {signInStack}
    </Stack>
    <Scene key="errorAlert" component={ErrorAlert} />
  </Lightbox>,
);

const RootRouter = () => <ReduxRoute scenes={navigator} />;
export default connect()(RootRouter);

I found the problem

In https://github.com/aksonov/react-native-router-flux/blob/master/src/Router.js#L89 ,
you use uriPrefix={uriPrefix} (added in 8485389#diff-88682cc47d1e91a07a52d4b73c5828a3 ).

It conflict with https://github.com/react-navigation/react-navigation/blob/master/src/createNavigationContainer.js#L43-L57

because containerProps is now equals to { uriPrefix: undefined }.

if you remove the uriPrefix, the application works without issue.

[avencat]

Hi, any news on this? :/ I have the same error after upgrading from beta 23 to 28...

[prudhvir3ddy]

@avencat is it working on beta 23 ? and any solution please tell me

[dvvtms]

hy @coolmic, can give any solution or workaround?

[avencat]

@prudhvir3ddy yes it's working on beta 23! ;)

[coolmic]

React-navigation will stop supporting redux in the near future.
react-navigation/react-navigation#4490
https://reactnavigation.org/docs/en/redux-integration.html

Warning: in the next major version of React Navigation, to be released in Fall 2018, we will no longer provide any information about how to integrate with Redux and it may cease to work. Issues related to Redux that are posted on the React Navigation issue tracker will be immediately closed. Redux integration may continue to work but it will not be tested against or considered when making any design decisions for the library.

I decided to refactor my app, so it doesn't use redux for navigation.