Integrate react-native-navigation V2 with redux

Question

In version 1 of RNNavigation, I was sending my store to each screen by this way.

Navigation.registerComponent(RouterConstants.SplashScreen, () => SplashScreen, store, Provider)

But in V2 it seems it's not working.

EDIT:

index.js:

import configureNavigation from './routers/app_navigation'
import createStore from './reducers'

const store = createStore()
configureNavigation(store, Provider)

class App extends React.Component {
 constructor (props) {
   super(props)
   .
   .
   .
   this.startApp()
 }

 startApp () {
  Navigation.setRoot({
    stack: {
      children: [{
        component: {
          name: RouterConstants.SplashScreen
        }
      }]
    }
  })
 }
}

const app = new App()

app_navigation.js:

import SplashScreen from '../containers/splash_screen_container'
.....
...


const initializeRouter = (store, Provider) => {
    Navigation.registerComponent(RouterConstants.SplashScreen, () => SplashScreen, store, Provider)
    ....
    ..

}
export default initializeRouter

Can you add the code for the navigation setup and also the store? — Pritish Vaidya
– Pritish Vaidya, Commented Apr 18, 2018 at 12:09
Ideally it would be text, not an image, but that's better than nothing. Now, I find a lot of results for terms in that error here on SO. Did you see any of them? If so, do they not resolve your problem too? If not, then as Pritish said, you should post the full code needed to understand the error, as we don't know what those variables are just by looking at that 1 line. — underscore_d
– underscore_d, Commented Apr 18, 2018 at 12:12
I am getting an error like 'Application has not been registered.' — Vivek Shah
– Vivek Shah, Commented Dec 6, 2018 at 13:15

Tiz · Accepted Answer · 2018-07-15 23:08:12Z

10

Seems like you can't register to the provider the old way.

Therefore as a workaround, you can create a HOC, that wraps the screen to the provider

Definition

import React from "react";
import { Provider } from "react-redux";

...

function reduxStoreWrapper (MyComponent, store) {
    return () => {
        return class StoreWrapper extends React.Component {
            render () {
                return (
                    <Provider store={store}>
                        <MyComponent />
                    </Provider>
                );
            }
        };
    };
}

Usage

Navigation.registerComponent("RouterConstants.SplashScreen", reduxStoreWrapper(SplashScreen, store))

edited Jul 15, 2018 at 23:08

Tiz

7075 silver badges17 bronze badges

answered Apr 18, 2018 at 13:03

Pritish Vaidya

22.3k4 gold badges62 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Unomono Over a year ago

Hi, is anyone getting this error? - undefined is not a function (evaluating'(0,_reduxStoreWrapper2.default)(_LoginForm2.default, store)')

Pritish Vaidya Over a year ago

It would be great if you could post a question for the issue with relevant details so that users will be able to identify the problem clearly. Thanks

Liza Catherine Ombyaw Over a year ago

What if I have to register 3 screens? Should I create 3 function reduxStoreWrapper... ?

Unomono · Accepted Answer · 2018-08-18 08:40:15Z

Firstly, thanks Pritish for the solution, but building on the above solution, caused an error for me:

undefined is not a function (evaluating'(0,_withReduxStoreWrapper2.default)(_LoginForm2.default, store)'

I modified Navigation.registerComponent() to return a function in the 2nd argument, instead of calling it:

export function registerScreens() {
    const store = createStore(reducers, applyMiddleware(thunk));
    Navigation.registerComponent('LoginForm', () => withReduxStoreWrapper(LoginForm, store));
}

Here is my modified HOC too:

import React, { Component } from 'react';
import { Provider } from 'react-redux';

const withReduxStoreWrapper = (MyComponent, store) =>
    class StoreWrapper extends Component {
        render() {
            return (
                <Provider store={store}>
                    <MyComponent />
                </Provider>
            );
        }
    };

export default withReduxStoreWrapper;

nbeuchat · Accepted Answer · 2019-04-24 23:17:18Z

Defining a Redux store wrapper HOC

A slightly more compact way using an arrow function:

// withReduxStoreWrapper.js
import React from 'react';
import { Provider } from 'react-redux';

const withReduxStoreWrapper = (ReduxScreen, reduxStore) => () => (props) => (
  <Provider store={reduxStore}>
    <ReduxScreen {...props} />
  </Provider>
);

export default withReduxStoreWrapper;

Registering the screens

You can then register the screen as follow:

// index.js
// ...

const registerScreens = (store) => {
  Navigation.registerComponent('MyReduxScreen', withReduxStoreWrapper(MyReduxScreen, store));
  Navigation.registerComponent('MyNormalScreen', () => MyNormalScreen);
}

const store = configureStore();
registerScreens(store);

Collectives™ on Stack Overflow

Integrate react-native-navigation V2 with redux

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related