Could not find "store" in context of "Connect(Login)" , and I could't find a solution for it here is my code - react-native

Question

//App.js
import React, { Component } from 'react';
import { StyleSheet, Platform, Image, Text, View } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers/index';
import Profile from './Screens/Profile';
import Signup from './Screens/Signup';
import Login from './Screens/Login';
const middleware = applyMiddleware(thunkMiddleware);
const store = createStore(rootReducer, middleware);
import { ReactReduxContext } from "react-redux";
const Switch = createSwitchNavigator({
Login: Login,
Profile: Profile,
Signup: Signup
}, {
initialRouteName: 'Login',
});
export default createAppContainer(Switch)
class App extends React.Component {
render() {
return (
<Provider>
<Switch />
</Provider>
)
}
}
//Login.js
import React from 'react';
import Firebase from '../config/firebase';
import Signup from '../Screens/Signup';
import Profile from '../Screens/Profile';
import { createSwitchNavigator } from 'react-navigation';
import { View, TextInput, StyleSheet, TouchableOpacity, Text, Button } from 'react-native';
import ReactReduxContext from 'react-redux';
import { bindActionCreators, applyMiddleware, createStore, Provider } from 'redux';
import { connect } from 'react-redux';
import { updateEmail, updatePassword, login } from '../actions/user';
import thunkMiddleware from 'redux-thunk';
function mapDispatchToProps(dispatch) {
return bindActionCreators({ login, updateEmail, updatePassword }, dispatch)
}
const mapStateToProps = state => {
return {
user: user.state
}
}
class Login extends React.Component {
handle = () => {
this.props.login()
this.props.navigation.navigate('Profile')
}
state = {
email: '',
password: ''
}
render() {
return (
<Provider>
<View style={styles.container}>
<TextInput
style={styles.inputBox}
value={this.state.email}
onChangeText={email => this.props.updateEmail(email)}
placeholder='Email'
autoCapitalize='none'
/>
<TextInput
style={styles.inputBox}
value={this.state.password}
onChangeText={password => this.props.updatePassword(password)}
placeholder='Password'
secureTextEntry={true}
/>
<TouchableOpacity style={styles.button} onPress={this.handleLogin}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
<Button title="Don't have an account yet? Sign up"
onPress={() => this.props.navigation.navigate('Signup')} />
</View>
</Provider>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
},
inputBox: {
width: '85%',
margin: 10,
padding: 15,
fontSize: 16,
borderColor: '#d3d3d3',
borderBottomWidth: 1,
textAlign: 'center'
},
button: {
marginTop: 30,
marginBottom: 20,
paddingVertical: 5,
alignItems: 'center',
backgroundColor: '#F6820D',
borderColor: '#F6820D',
borderWidth: 1,
borderRadius: 5,
width: 200
},
buttonText: {
fontSize: 20,
fontWeight: 'bold',
color: '#fff'
},
buttonSignup: {
fontSize: 12
}
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(Login);

Answer 1

In order to access the connect HOC, you first need to provide the store to the UI tree via the Provider
You can do it like this:
class App extends React.Component {
render() {
return (
<Provider store={store}> // this is what is required.
<Switch />
</Provider>
)
}
}
Hope this helps. Cheers!