React Native (Netflix app) Android build error - "Could not find 'store' in either the context or props of Connect(App)"

Question

I am trying to make the android build like 'Netflix' app using this GitHub project from https://github.com/mariodev12/react-native-netflix. As it is a react native project, it works fine in iOS. But while taking android build, it results the following error: 'Could not find 'store' in either the context or props of "Connect(App)" Either wrap the root component in a or explicitly pass "store" as a prop to "Connect(App)"

The code of index.android.js are as follows:

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

and App.js is:

import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet
} from 'react-native'

import {connect} from 'react-redux'

import Header from './components/Header'
import List from './components/List'
import Menu from './components/Menu'
import Slide from './components/Slider'
import Genres from './components/Genres'

import SideMenu from 'react-native-side-menu'

class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            isOpen: false,
            itemSelected: 'Home'
        }
        this.getTwoRows = this.getTwoRows.bind(this)
        this.itemSelected = this.itemSelected.bind(this)
    }

    static navigationOptions = {
        headerVisible: false
    }

    toggle(){
        this.setState({
            isOpen: !this.state.isOpen
        })
    }

    itemSelected(item){
        this.setState({
            itemSelected: item,
            isOpen: false
        })
    }

    updateMenu(isOpen){
        this.setState({isOpen})
    }

    getTwoRows(){
        const {shows} = this.props
        const array = shows.slice(0)
        const val = Math.floor(array.length / 2)
        const newArray = array.splice(0, val)
        return [
            array,
            newArray
        ]
    }

    render(){
        return (
            <View style={{flex: 1}}>
                <SideMenu
                    menu={<Menu 
                        navigation={this.props.navigation}
                        itemSelected={this.itemSelected} 
                        itemSelectedValue={this.state.itemSelected}
                    />}
                    isOpen={this.state.isOpen}
                    onChange={(isOpen) => this.updateMenu(isOpen)}
                    style={{flex: 1}}
                >
                    <View style={[{flex: 1}, styles.container]}>
                        <Header navigation={this.props.navigation} toggle={this.toggle.bind(this)} />
                        {this.state.itemSelected == 'Home' ? <View style={{flex: 1}}>
                            <Slide />
                            <List
                                getTwoRows={this.getTwoRows} 
                                navigation={this.props.navigation}
                            />
                        </View> : 
                        <Genres
                            navigation={this.props.navigation} 
                            item={this.state.itemSelected}
                        />}
                    </View>
                </SideMenu>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'black'
    }
})

export default connect(state => ({shows: state.shows}))(App)

I am struggling with this for last one week. Could you please help me to resolve this issue? Thanks.

Answer 1

You are missing the part where you create a redux store and provide it to your component using Provider. Take a look at the Redux docs for more info.

import { AppRegistry } from 'react-native';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './src/app'

const store = createStore(/* your reducers / middleware */);

const AppWithStore = () => (
  <Provider store={store}>
    <App />
  </Provider>
)

AppRegistry.registerComponent('NetflixApp', () => AppWithStore);

Answer 2

Android and iOS index are pointing to different app file. This error message is caused due missing of a Provider given to app.js file. You can try wrapping your return content with a Provider, just as index.js file is set.