Hello react native gurus,
I have a created a TabNav project using Expo SDK,
now, in the MainTabNavigator which include three tabs :
first Store, Pedometer, Profile.
I imported the StoreNavigator for store screen.
this is my tabNav code:
export default TabNavigator(
{
Store: {
screen: **StoreNavigator**,
},
Pedometer: {
screen: PedometerScreen,
},
Profile: {
screen: SettingsScreen,
},
},
this is my StoreNavigator code :
import React, { Component } from 'react';
import { StackNavigator} from 'react-navigation';
import DairyScreen from '../screens/DairyScreen';
import FruitsScreen from '../screens/FruitsScreen';
import VegetablesScreen from '../screens/VegetablesScreen';
import HomeScreen from '../screens/HomeScreen';
const StoreNavigator = StackNavigator(
{
Store:{
screen : HomeScreen
},
VegetablesScreen:{
screen: VegetablesScreen,
},
FruitsScreen:{
screen: FruitsScreen
},
DairyScreen : {
screen : DairyScreen
}
});
export default StoreNavigator;
until now everything is fineā¦
in the HomeScreen i have a ContentContainer component, and i have passed ānavigation={this.props.navigation}ā .
now this is the code for the ContentContainer Component :
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import CustomImage from './CustomImage';
import { StackNavigator } from 'react-navigation';
export default class ContentContainer extends Component {
render() {
return (
<View style={styles.contentContainer}>
<View style={styles.vegetable}>
<CustomImage
imageSource ={require('../assets/images/vegetables.jpg')}
header = 'Vegetables'
paragraph ='Check out our Vegetables Inventory Here'
onPress= {() => this.props.navigation.navigate('VegetablesScreen')}
/>
</View>
<View style={styles.fruit}>
<CustomImage
imageSource ={require('../assets/images/fruit.png')}
header = 'Fruits'
paragraph = 'Check out our Fruits Inventory Here'
/>
</View>
<View style={styles.dairy}>
<CustomImage
imageSource= {require('../assets/images/dairy.jpg')}
header ='Dairy'
paragraph = 'Check out our Dairies Inventory Here'
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
contentContainer:{
flex: 1,
flexDirection: 'column',
flexWrap: 'wrap',
padding: 5,
},
fruit:{
flex:1,
padding: 5
},
vegetable :{
flex: 2,
padding:5
},
dairy:{
flex: 3,
padding: 5
}
})
Here is the Problem:
in the first CustomImage component:
<CustomImage
imageSource ={require('../assets/images/vegetables.jpg')}
header = 'Vegetables'
paragraph ='Check out our Vegetables Inventory Here'
onPress= {() => this.props.navigation.navigate('VegetablesScreen')}
/>
onPress= {() => this.props.navigation.navigate(āVegetablesScreenā)} doesnāt do a thing.
and for the life of me i canāt figure out why!!!
this my repository => https://github.com/oflarcade/SahaApp