App.js

import * as React from 'react';
import { Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';

const HomeScreen = (props) =>
{
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text onPress={()=>{
        props.navigation.navigate('Home2')
      }}>
        Home!
      </Text>
    </View>
  );
}
const HomeScreen2 = () =>
{
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'lightblue'}}>
      <Text style={{flex: 1}}>Home 2!</Text>
      <View style={{flex: 0, backgroundColor: 'lightgreen', height: 50, width: '100%'}}>
        <Text>
          This is bottom
        </Text>
      </View>
    </View>
  );
}

const StackNav = createStackNavigator()
const HomeStack = ({route,navigation}) =>
{
  navigation.setOptions({
    tabBarVisible: route.state ? route.state.index <= 0 : null
  })
  return(
    <StackNav.Navigator>
      <StackNav.Screen name={"Home"} component={HomeScreen}/>
      <StackNav.Screen name={"Home2"} component={HomeScreen2}/>
    </StackNav.Navigator>
  )
}

const Bottom = createBottomTabNavigator();
const BottomNav = () =>
{
  return(
    <Bottom.Navigator>
      <Bottom.Screen name="Home" component={HomeStack}/>
    </Bottom.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <BottomNav/>
    </NavigationContainer>
  );
}