React Navigation -- Using two navigators on a single screen

Question

I'm trying to create a screen that has two navigators in it where screen is a stack navigator, and on the same screen is a tab navigator nested in it whose contents are visible on 3/5 of the screen. This is my current configuration

const HomeStack = () => {
 return (
     <Stack.Navigator initialRouteName="Home" headerMode="none">
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="ServiceConfig" component={ServiceConfig}/>
     </Stack.Navigator>
 );
}

App.js

<View style={{flex: 1}}>
  <HomeTabView />
</View>

HomeScreen.js

export default function HomeTabView() {
return (
    <TopTab.Navigator
        initialRouteName="Recommended"
        initialLayout={{width: Dimensions.get('window').width}}>
        <TopTab.Screen name="Recommended" component={ListServices} />
        <TopTab.Screen name="Recent" component={ListServices} />
    </TopTab.Navigator>
);
}

HomeTabView.js

This is the desired appearance

Answer 1

It should be work in following way

const HomeStack = () => {
 return (
     <Stack.Navigator initialRouteName="Home" headerMode="none">
         <Stack.Screen name="Home" component={HomeTabView} />
         <Stack.Screen name="ServiceConfig" component={ServiceConfig}/>
     </Stack.Navigator>
 );
}

And your tab view should be like:

export default function HomeTabView() {
return (
    <TopTab.Navigator
        initialRouteName="Recommended"
        initialLayout={{width: Dimensions.get('window').width}}>
        <TopTab.Screen name="Recommended" component={HomeScreen} />
        <TopTab.Screen name="Recent" component={ListServices} />
    </TopTab.Navigator>
);
}

And ListServices can be the part of HomeScreen

And your app code should be like :

<View style={{flex: 1}}>
  <HomeStack/>
</View>

Answer 2

in the home stack you render the normal Home screen, In the home screen, you added what's u want, then for the Top Tab you should implement a top tap navigation then import it in the home screen like a component

Like this

const HomeStack = () => {
 return (
     <Stack.Navigator initialRouteName="Home" headerMode="none">
         ....
         <Stack.Screen name="Home" component={HomeScreen} />
         ....
     </Stack.Navigator>
 );
}

TopTab.js

import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';


const TopTabs = createMaterialTopTabNavigator();

export const MyTopTabs = () => {
  return (
    <TopTabs.Navigator
      tabBarOptions={{
        style: {
          marginVertical: 10,
          backgroundColor: '#fff',
          borderRadius: 20,
          elevation: 0,
          marginHorizontal: 20,
        },
        tabStyle: {
          borderRadius: 20,
          height: 60,
        },
        labelStyle: {
          fontSize: 18,
        },
        activeTintColor: '#fff',
        inactiveTintColor: '#000',
        indicatorStyle: {
          backgroundColor: '#000',
          height: '100%',
          borderRadius: 20,
        },
      }}
      lazy={true}>
      <TopTabs.Screen
        name=" prescription"
        options={{
          title: 'titlee..',
        }}
        component={OpenedAppointments}
      />
      <TopTabs.Screen
        name="nonPresicrpstion"
        options={{
          title: 'title here',
        }}
        component={CompletedAppointments}
      />
    </TopTabs.Navigator>
  );
};


In home screen

<View style={{flex: 1}}>
         ..... Your stuff
        <TopTab />
</View>