React native nested stack navigation showing empty screen

Question

I am trying to achieve nested react native navigation using Stack navigator following this example from website. I have also checked other question in SO but not able to find my mistake.

In Home.tsx component I have two nested route HomeView and Products. On click of a link in HomeView.tsx I am executing categoryClick in Home.tsx and inside this function , I want to navigate to Products.tsx componet. The navigation is working as expected but the nested routed defined in screen for Products component is not working as expected. it is showing an empty screen. Please help to understand my mistake

Home.tsx

import React, {useState} from "react";
import {View} from "react-native";
import Header from "../header/Header";
import HomeStyles from './Home.scss';

import {createNativeStackNavigator} from "@react-navigation/native-stack";
import Products from "../products/Products";
import HomeView from "../home-view/HomeView";

export interface HomeProps {}

export function Home({route, navigation}) {
  let [loader, setLoader] = useState(false)
  const Stack = createNativeStackNavigator()

  function categoryClick(e: number) {
    // expectation is it will navigate to `Ab` screen on loading `Products`
    navigation.navigate('Products', {
      screen: 'Ab',
      params: {}
    })
  }

  return (
    <View style={
      HomeStyles.homeContainer}>
      <View style={HomeStyles.homeHeader}>
        <Header/>
      </View>

      <Stack.Navigator initialRouteName='Products'>
        <Stack.Screen name='HomeView'
                      options={{headerShown: false}}>
          {(props) => <HomeView
            catrgotryClick={categoryClick}
            {...props} />}
        </Stack.Screen>
        <Stack.Screen
          name='Products'
          component={Products}
          options={{headerShown: false}}/>
      </Stack.Navigator>


    </View>
  );
}

export default Home;

Products.tsx

import { Route, Link } from 'react-router-dom';
import ProductsStyles from  './Products.scss';
import {Text, View} from "react-native";
import React, {useEffect, useState} from "react";
import {RouteProp, useNavigation} from "@react-navigation/native";
import Ab from "../ab/Ab";
import Hi from "../hi/Hi";
import Ac from "../ac/Ac";
import Je from "../je/Je";
import {createNativeStackNavigator} from "@react-navigation/native-stack";


export interface ProductsProps {
  route:RouteProp<any>;
  navigation:any
}


export function Products(props:ProductsProps) {
  const ProductStack = createNativeStackNavigator();
  return (
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
     <ProductStack.Navigator>
       <ProductStack.Screen name='Ab' options={{headerShown:false}}
        component={Ab}/>
        <ProductStack.Screen name='Hi' component={Hi}/>
        <ProductStack.Screen name='Ac' component={Ac}/>
        <ProductStack.Screen name='Je' component={Je}/>
      </ProductStack.Navigator>
      </View>
 );
}

export default Products;

Answer 1

We can't put Navigator inside View, so you need to change the Products.tsx file to

import { Route, Link } from 'react-router-dom';
import ProductsStyles from  './Products.scss';
import {Text, View} from "react-native";
import React, {useEffect, useState} from "react";
import {RouteProp, useNavigation} from "@react-navigation/native";
import Ab from "../ab/Ab";
import Hi from "../hi/Hi";
import Ac from "../ac/Ac";
import Je from "../je/Je";
import {createNativeStackNavigator} from "@react-navigation/native-stack";


export interface ProductsProps {
  route:RouteProp<any>;
  navigation:any
}


export function Products(props:ProductsProps) {
  const ProductStack = createNativeStackNavigator();
  return (
     <ProductStack.Navigator>
       <ProductStack.Screen name='Ab' options={{headerShown:false}}
        component={Ab}/>
        <ProductStack.Screen name='Hi' component={Hi}/>
        <ProductStack.Screen name='Ac' component={Ac}/>
        <ProductStack.Screen name='Je' component={Je}/>
      </ProductStack.Navigator>
 );
}

export default Products;