[Solved]Nested Navigation Help?

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!!! :confused:

this my repository => https://github.com/oflarcade/SahaApp

onPress is never passed through to the TouchableOpacity in CustomImage: https://github.com/oflarcade/SahaApp/blob/d3f85e55a19f53e3b8661a0f61bf138c2e1b3185/components/CustomImage.js

<TouchableOpacity style={styles.touchableopacity}>

should be

<TouchableOpacity style={styles.touchableopacity} onPress={this.props.onPress}>

2 Likes

Thank you for the early reply,
I will try this and update this thread to maybe be a reference for nested navigation even though it is not a clean one :slight_smile:

Updating : @notbrent thank you so much, it worked, also can i hide the tabnavigator header,
i did manage to hide the stacknavigator header, but the since it is nested, after i click on the vegetables screen i still get a header(i reckon it is the tab header) , i googled a bit and the proposed solution was to put the tabnavigator inside the stacknavigator, oposite to my solution?

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.