My application is stored in /src/index.js but i also have a /App.js and a /index.js.

I don't know the difference between these and i think thats the reason im getting this error.

/index.js

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('client', () => App);

/App.js

import App from './src/index';

export default App;

/src/index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider, connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';

import Navigator from './routes/route';
import store from './store/configureStore';


const App = ({ dispatch, nav }) => {

    <Navigator
        navigation={addNavigationHelpers({
            dispatch,
            state: nav,
        })}
    />
};

const mapStateToProps = state => ({
    nav: state.nav,
});



const AppWithNavigation = connect(mapStateToProps)(App);

export default () => {

    <Provider store={store}>
        <AppWithNavigation />
    </Provider>

}

I used create react native package to build this project and then tried to follow some guides to implement react navigation with redux.

My application is stored in /src/index.js but i also have a /App.js and a /index.js.

I don't know the difference between these and i think thats the reason im getting this error.

/index.js

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('client', () => App);

/App.js

import App from './src/index';

export default App;

/src/index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider, connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';

import Navigator from './routes/route';
import store from './store/configureStore';


const App = ({ dispatch, nav }) => {

    <Navigator
        navigation={addNavigationHelpers({
            dispatch,
            state: nav,
        })}
    />
};

const mapStateToProps = state => ({
    nav: state.nav,
});



const AppWithNavigation = connect(mapStateToProps)(App);

export default () => {

    <Provider store={store}>
        <AppWithNavigation />
    </Provider>

}

I used create react native package to build this project and then tried to follow some guides to implement react navigation with redux.

• javascript
• react-native
• react-redux
• react-navigation

• you haven't exported App in index.js that you're importing in App.js – Deepansh Sachdeva Commented Jan 30, 2018 at 11:29

3 Answers 3

Your default export is not returning anything :

export default () => {

    <Provider store={store}>
        <AppWithNavigation />
    </Provider>

}

To return JSX with an arrow function you need to use () => ( <JSX /> ) or the equivalent with curly braces : () => { return ( <JSX /> ) } :

export default () => (    
    <Provider store={store}>
        <AppWithNavigation />
    </Provider>
)

or :

export default () => {
    return (    
       <Provider store={store}>
           <AppWithNavigation />
       </Provider>
   )
}

You forgot to return the ponents

const App = ({ dispatch, nav }) => {
    return(
        <Navigator
            navigation={addNavigationHelpers({
                dispatch,
                state: nav,
            })}
        />
    )
};


export default () => {
    return(
        <Provider store={store}>
            <AppWithNavigation />
        </Provider>
    )
}

I didn't mention this

import React from 'react';

and all other react-native ponents in my other files of screens.

Because I was calling my screen ponent from another file, from App.js file, so I also had to import react and react-native ponents in that file too.