Two Tabs are getting displayed at the top ( React Native)

Question

I am trying to add stack and tab both to the view here, but two tabs are being displayed at the top . I couldnt find the solution anywhere im doing this way because i want to open another screen which is not in the tab navigation eg: when i click on Person button i need to open details screen which is not in tab navigation

You can refer the image here

if you see the above image im getting same as when i clicked on Profile its display

Person
Person

at the top

here is my code

import React from 'react';
import { Text, View, Dimensions } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Card,Searchbar, Title, Paragraph, Avatar, Button   } from 'react-native-paper';
import {Image , ScrollView, SafeAreaView, TextInput, BottomNavigation } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { MaterialIcons, Ionicons  } from '@expo/vector-icons'; 
import Cards from './Components/CryptoCard';
import Home from './Screens/Home';
import Details from './Screens/Details';
import Favourites from './Screens/Favourites';
import Profile from './Screens/Profile';
import Trends from './Screens/Trends';


const fullScreenWidth = Dimensions.get('window').width;
const Stack = createStackNavigator();

function HomeStackScreen() {
  return (
  <Stack.Navigator> 
    <Stack.Screen name="Crypto Home" component={Home} />
    <Stack.Screen name="Details" component={Details} />
  </Stack.Navigator>)
}


function ProfileStackScreen() {
  return (<Stack.Navigator> 
    <Stack.Screen name="Profile" component={Profile} />
  </Stack.Navigator>)
}

function TrendsStackScreen() {
  return (<Stack.Navigator> 
    <Stack.Screen name="Global Crypto Stats" component={Trends} />
  </Stack.Navigator>)
}

function FavouritesStackScreen() {
  return (
    <Stack.Navigator> 
    <Stack.Screen name="Favourites" component={Favourites} />
  </Stack.Navigator>)
}

const Tab = createBottomTabNavigator();

export default function Navigation(props) {
   return (
     <NavigationContainer>
       <Tab.Navigator
      initialRouteName="Crypto Home"
      activeColor="#ffffff"
      labelStyle={{ fontSize: 12 }}
      style={{ backgroundColor: 'black', marginBottom:'auto' }}
      >
     <Tab.Screen
        name="Global Crypto Stats"
        component={TrendsStackScreen}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({ color }) => (
             <Ionicons name="trending-up" size={24} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Favourites"
        component={FavouritesStackScreen}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({ color }) => (
            <MaterialIcons name="favorite" size={26} color={color} />
          ),
        }}
      />
       <Tab.Screen
        name="Crypto Home"
        component={HomeStackScreen}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
     
      <Tab.Screen
        name="Profile"
        component={ProfileStackScreen}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
     </NavigationContainer>
   )
}

and this is the App.js

import Navigation from './Navigation';

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

Answer 1

You can use this:

navigation.navigate('Crypto Home', { screen: 'Details' });

You should call screen name from tab navigator before. If called screen is a navigator, now you can call screen from this navigator with screen: ScreenName

Answer 2

Please go through this, it may help you to Hide Header