We Keep Coding

Could not find "store" in the context of connect

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.

you should provide to <Provider store={store}> store like that
import { createStore } from "redux";
import reducer from '.store/reducer'
const store = createStore(reducer);

Passing onPress redirect to child component React Native

I am struggling a little bit. I have tried to create more components for my React native app but after I did it my ButtonSaving stoped redirecting to Dashboard for some reason. I was trying some ways to pass onRowPress to component but without luck. What do I do incorrectly here please?
Login button is working fine => redirecting to Dashboard
ButtonSaving not working at all => should redirect to Dashboard
AppNavigator.js
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation';
import Homepage from './components/Homepage/Homepage';
import Dashboard from './components/Dashboard/Dashboard';
const AppNavigator = createStackNavigator({
Homepage: Homepage,
Dashboard: { screen: Dashboard},
},
{
initialRouteName: 'Homepage',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: 'white',
opacity: 70,
borderBottomColor: 'white',
borderColor: 'white'
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'bold'
}
}
}
);
const Container = createAppContainer(AppNavigator);
export default Container;
Homepage.js
import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import {NavigationActions} from 'react-navigation';
// COMPONENTS
import ButtonSaving from './ButtonSaving/ButtonSaving';
class Homepage extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false
},
this.handleClick = this.handleClick.bind(this);
this.onRowPress = this.onRowPress.bind(this);
}
handleClick() {
const counterApp = this.state.counter;
this.setState({
counter: counterApp + 1,
dashboard: 'Dashboard'
})
}
onRowPress = ({ navigation }) => {
this.props.navigation.navigate(this.state.dashboard);
}
render() {
return(
<View style={styles.container}>
{/* LOGIN BUTTON */}
<View style={styles.buttonContainer}>
<View style={styles.buttonLogin}>
<Button title="log in"
color="white"
onPress={() => this.props.navigation.navigate('Dashboard')}/>
</View>
</View>
{/* LOGO CONTAINER */}
<View style={styles.logoContainer}>
<Image
style={{height: 147, width: 170}}
source= {require('./REACT_NATIVE/AwesomeProject/logo.png')}
></Image>
</View>
{/* EXPLAINATION OF WALT */}
<Text style={styles.textContainer}>Lorem ipsum lorem upsum></Text>
{/* Needs to be refactored to VIEW */}
<ButtonSaving onPress={() => this.onRowPress}/>
</View>)
}
ButtonSaving.js
import React from 'react';
import { StyleSheet, Text, View, Button, Image, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
class ButtonSaving extends React.Component {
constructor(props) {
super(props);
this.state = {
},
this.onRowPress = this.onRowPress.bind(this);
}
onRowPress = ({ navigation }) => {
this.props.navigation.navigate(this.state.dashboard);
}
render(){
return(
<View style={styleButton.container}>
<LinearGradient
colors={[
'#00b38f',
'#7dcf5a'
]}
style={styleButton.opacityContainer}>
<TouchableOpacity>
<Button
title="Start Saving"
color='white'
onPress={this.onRowPress}/>
</TouchableOpacity>
</LinearGradient>
</View>
)
}
}
const styleButton = StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
width: '100%',
height: 50,
justifyContent: 'center',
marginTop: '39%'
},
opacityContainer: {
height: 48,
borderRadius: 25,
backgroundColor: 'darkgreen',
width: '70%',
justifyContent: 'center',
alignItems: 'center'
}
})
export default ButtonSaving;

You miss to put dashboard in your state in ButtonSaving.js
In Homepage.js when your are calling handleClick ?. Dunno how you got that working...

You say in the onRowPress this:
this.props.navigation.navigate(this.state.dashboard);
but I don't see anywhere that you set this.state.dashboard.
Probabbly you missed set it up.

It was simple refactor and this helped!
<ButtonSaving navigation ={this.props.navigation}/>
I will update solution for others later.

There is no point to save "dashboard" in the Homepage state or the ButtonSaving state.
In Homepage.js you don't need to pass onPress to ButtonSaving
...
<ButtonSaving navigation={this.props.navigation}/>
...
Next in ButtonSaving.js
onRowPress = () => {
this.props.navigation.navigate('Dashboard');
}

Drawer is "eating" parts of the screen label. How to solve?

I am developing a drawer for navigation between screens of my application. I have a Home screen, which label is "Home", when compiling the application Drawer only displays "Hom" instead of displaying the full name (Home)
Environment:
react-native 0.60
react-native-cli: 2.0.1
react-navigation: 3
import {
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Dimensions,
Image,
} from 'react-native';
import {
createDrawerNavigator,
createAppContainer,
DrawerItems
} from 'react-navigation';
import { HomeScreen, HomeLogin } from './src/screens';
const DEVICE_WIDTH = Dimensions.get('window').width;
const App = () => {
return <Apps />;
};
const CustomDrawerComponent = props => (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView>
<View
style={{
height: 180,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Image
source={require('./src/assets/nologin-user.png')}
style={{ height: 150, width: 150, borderRadius: 75 }}
/>
</View>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
);
const AppDrawerNavigator = createDrawerNavigator(
{
Home:{
screen:HomeScreen,
navigationOptions:{
drawerLabel:'Home',
},
}
},
{
drawerWidth: DEVICE_WIDTH - 100,
contentComponent: CustomDrawerComponent,
contentOptions:{
activeTintColor:'#006bb3',
labelStyle:{
fontSize:13,
},
}
}
);
const Apps = createAppContainer(AppDrawerNavigator);
export default App;
I expected the drawer to display "Home" not "Hom"
Problem

The problem is in the source of the phone. If you use an Oppo smartphone to emulate and are experiencing this error try using the native android font.

Is there a way to navigate to a different screen from the menu built in my Parent Component?

I am trying to add a simple customized navigation menu to my react-native app, but the issue that I am coming across right now is that I can't seem to find a way to navigate to the selected menu items corresponding screen. I tried the normal this.props.navigation.navigate('Home'), but it seems that there is no navigation prop, which makes sense because in my app I am assuming that the prop for navigation is passed down to the screens from my app.js through the use of <AppContainer />.
I have tried using the MainNavigator object in my App.js but it doesn't seem to be working and doesn't have a navigate function or anything like that.
I have also tried changing the structure of my render function in App.js a little bit but it still does not seem to be having much of an effect.
This is my App.js
import React, { Component } from 'react';
import {
View,
Text,
TouchableOpacity
} from 'react-native';
import {
createStackNavigator,
createAppContainer } from 'react-navigation';
// SCREEN
import MainScreen from './screens/MainScreen';
import CostAnalysis from './screens/CostAnalysis';
import DriverLog from './screens/DriverLog';
// SIDE MENU
import SideMenu from 'react-native-side-menu';
// REDUX IMPORTS
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { recordReducer } from './reducers/recordReducer';
import { databaseReducer } from './reducers/databaseReducer';
const MainNavigator = createStackNavigator({
Home: {screen: MainScreen},
DriverLog: {screen: DriverLog},
CostAnalysis: {screen: CostAnalysis},
}, {
defaultNavigationOptions: {
header: null
}
});
const AppContainer = createAppContainer(MainNavigator);
const rootReducer = combineReducers(
{records: recordReducer,
database: databaseReducer});
const store = createStore(rootReducer);
class App extends Component {
render() {
const menu = (<View style={{
backgroundColor: '#f0f0f0',
alignContent: 'center',
textAlign: 'center', height: '100%', width: '100%', paddingTop: '40%'}}>
<Text style={styles.menuTitle}>{'S K I P\nD R I V E R\nL O G'}</Text>
<TouchableOpacity onPress={() => {this.props.navigation.navigate('Home')}}>
<Text style={styles.menuItem}>HOME</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {MainNavigator.navigate('DriverLog')}}>
<Text style={styles.menuItem}>DRIVING LOG</Text>
</TouchableOpacity>
</View>);
return (
<SideMenu menu={menu} >
<Provider store={store}>
<AppContainer />
</Provider>
</SideMenu>
);
}
}
const styles = {
menuTitle: {
marginBottom: 60,
fontSize: 40,
textAlign: 'center',
color: '#e74c3c'
},
menuItem: {
marginBottom: 10,
fontSize: 26,
textAlign: 'center'
}
}
export default (App);
Ideally I don't have to re-structure my entire app as I have made a lot of progress in other areas, but I would really like the menu to simply link to the correct places.
I'm still very new to react-native so I really don't know what else to try. If anyone can give me a hand it would be greatly appreciated!
Thanks :)
PS: See a picture of the menu to illustrate what I mean
Menu Screenshot

you have to implement the constructor
class App extends Component {
constructor(props) {
super(props);
}
}
or
if you are using a drawer use it as a separate component
import React, { Component } from 'react';
import {
View,
Text,
TouchableOpacity
} from 'react-native';
class SideDrawer extends Component{
constructor(props) {
super(props);
}
render(){
return(
<View style={{
backgroundColor: '#f0f0f0',
alignContent: 'center',
textAlign: 'center', height: '100%', width: '100%', paddingTop: '40%'}}>
<Text style={styles.menuTitle}>{'S K I P\nD R I V E R\nL O G'}</Text>
<TouchableOpacity onPress={() => {this.props.navigation.navigate('Home')}}>
<Text style={styles.menuItem}>HOME</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {MainNavigator.navigate('DriverLog')}}>
<Text style={styles.menuItem}>DRIVING LOG</Text>
</TouchableOpacity>
</View>
)
}
}
export default sideDrawer
then in your navigator
const HomeNavigator = StackNavigator(
Home: {screen: MainScreen},
DriverLog: {screen: DriverLog},
CostAnalysis: {screen: CostAnalysis},
}
const MainNavigator = DrawerNavigator({
Home: {
screen: HomeNavigator,
},
}, {
contentComponent: sideDrawer,
drawerWidth: width * .7,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
});

Why my text is not displaying in the center?

I started playing with react-native and I got a problem with centering a text, it's a very simple code but idk why it's not working
I was playing with animations too and none of all the examples that I did didn't work
So I have a View with a Text and the styles, with the flex should be enought, but isn't
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeView extends Component {
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>Hello World</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
alignItems: 'center',
justifyContent: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
}
});
Here is the App class
import React from 'react';
import { StyleSheet,View} from 'react-native';
import HomeView from './components/HomeView';
const App = () => {
return (
<View>
<HomeView/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
And the index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

You are not closing your class with } after render().

Inside of the App class you need to render the View with container style
so it would be
const App = () => {
return (
<View style={styles.container}>
<HomeView/>
</View>
);
};
so it has flex: 1 and then can take the full space and align itself properly.