Could not find "store" in the context of connect

Question

import React from 'react';
import { View, TouchableOpacity, StyleSheet, Button, Text, NativeModules, Image } from 'react-native';
import { connect } from 'react-redux'
import { Icon } from 'native-base';

const ShoppingCartIcon = (props) => (
    <View>
        <View style={{
            position: 'absolute', height: 30, width: 30,
            borderRadius: 15, backgroundColor: 'rgba(95,197,123,0.8)', right: 45,
            bottom: 15, alignItems: 'center', justifyContent: 'center', zIndex: 2000
        }}>
            <Text stye={{ color: 'white' }}> {props.cartItems.length} </Text>
        </View>
        <Icon name="cart" ></Icon>
        <Button style={styles.but}
            title="Add"
            onPress={() => {
                this.props.navigation.navigate('ShopScreen');
                this.props.navigation.closeDrawer();
            }}
        />
    </View>

)

const mapStateToProps = (state) => {
    return {
        cartItems: state
    }
}

export default connect(mapStateToProps)(ShoppingCartIcon);

const styles = StyleSheet.create({
    but: {
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 20,
        //justifyContent: 'flex-end',
        //textAlign: 'center',
        //flexDirection:'column',
    }
})

I am trying to use redux but I get this error: Could not find "store" in the context of "Connect(ShoppingCartIcon)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(ShoppingCartIcon) in connect options.

It seems that the problem is from the fact that I wrap my drawer container screen in a Provider but I don't know how to fix it.

Thanks for your help

import React, { Component } from 'react';
import { View, Text, Button, StyleSheet, Image, Platform, TextInput, ScrollView, Title } from 'react-native';
import DrawSt from './App.js'
import { Provider } from 'react-redux'
import store from './store'
//import { NavigationContainer } from '@react-navigation/native'

export default class Start extends React.Component {
    render() {
        return (
            <Provider store={store}>
                    <DrawSt />
            </Provider>

        )
    }
}

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {Icon} from 'react-native-elements';
import {Platform, TouchableOpacity, View, Text} from 'react-native';
import DrawerContainer from './src/screens/DrawerContainer.js'
import { createDrawerNavigator } from 'react-navigation-drawer';

const RootStack = createStackNavigator({

  HomeScreen: {
    screen:Home,
    navigationOptions:{
      headerTitle:"Home",
      headerTitleStyle:{
        alignSelf:'center',
        textAlign:'center',
        flex:2,
        padding: 116.5,
        textAlignVertical:'center',
        justifyContent:'center',
        marginBottom:Platform.OS==='ios'?30:null,
      },
    }
  },
  
    HomeLoginScreen: {
    screen: HomeLogin,
    navigationOptions: ({navigation})=>({
      headerRight: (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={30} />
        </TouchableOpacity>
      ),
      headerTitleStyle:{
        alignSelf:'center',
        textAlign:'center',
        flex:2,
        padding: 70,
        textAlignVertical:'center',
        justifyContent:'center',
        marginBottom:Platform.OS==='ios'?30:null,
      },
    })
  },
    MilkScreen:{
    screen: milk,
    navigationOptions:{
      headerRight: (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={30} />
        </TouchableOpacity>
      ),
      headerTitleStyle:{
        alignSelf:'center',
        textAlign:'center',
        flex:2,
        padding: 116.5,
        textAlignVertical:'center',
        justifyContent:'center',
        marginBottom:Platform.OS==='ios'?30:null,
      },
    }
  },
    DrinkScreen:{
    screen: drinks,
    navigationOptions:{
      headerTitleStyle:{
        alignSelf:'center',
        textAlign:'center',
        flex:2,
        padding: 70,
        textAlignVertical:'center',
        justifyContent:'center',
        marginBottom:Platform.OS==='ios'?30:null,
      },
    }
  },
  
  
  //and others
 
 },

  {
    initialRouteName: 'HomeScreen',
  },
);

const DrawerStack = createDrawerNavigator(
  {
    Main:RootStack
  },
  {
    drawerPosition: 'left',
    initialRouteName: 'Main',
    drawerWidth: 250,
    contentComponent: DrawerContainer
  }
)

DrawSt = createAppContainer(DrawerStack)

export default DrawSt;

Could not find "store" in the context of "Connect(ShoppingCartIcon)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(ShoppingCartIcon) in connect options.

Answer 1

you should provide to <Provider store={store}> store like that

 import { createStore } from "redux";
 import reducer from '.store/reducer'

 const store = createStore(reducer);