How to hide and show custom navbar on specific screens in react native?

I'm using react native. I have created custom navbar and placed that in the bottom of app.js so I don't need to import it on many other screens. but there are some exceptional screens where I don't want to show that navbar just like splash screen or signUp, SignIn. I'm unable to hide that. I couldn't figure out what possible I can do?

navigation-component.js

import React ,{useState}from "react";
// import { Ionicons } from '@expo/vector-icons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    TouchableHighlight
  } from 'react-native';

import MaterialCommunityIcons  from 'react-native-vector-icons/MaterialCommunityIcons';
import { useNavigation } from '@react-navigation/native';


    const NavigationComponent =(props)=>{
        const [TabIndex,setTabIndex] = useState(0)
        const [activeTab,setActiveTab] = useState(true)
        const [tabOptions,setTabOptions] = useState([
            {key: 0,name:"home"},
            {key: 1,name:"format-list-bulleted-square"},
    
            ])
        const navigation = useNavigation();
    
        const onPressHandler = (index)=>{
        setTabIndex(index)
        switch (index) {
            case 0:
                navigation.navigate("dashboard")
                break;
            
            case 1:
                navigation.navigate("map")
                break;
            }
        }
    
        return(
            <View style={styles.container}>
                 {tabOptions.map((tab, index, key) => (
                   <View style={styles.innerContainer} key={index}>
                         <MaterialCommunityIcons 
                             name={tab.name}       
                             size={
                                TabIndex==index && activeTab ?    
                                 40:
                                 32
                             }
                             color={
                                TabIndex==index && activeTab ?    
                                 "green":
                                 "black"
                             }
                             onPress={()=>onPressHandler(index)} 
                            style={
                                TabIndex==index && activeTab ?    
                                styles.Activtetab:
                                styles.NonActivtetab
                             } />
                     </View>
                 ))}
              </View>
    
        )
    }

app.js

class App extends React.Component {
  componentDidMount(){
    try {
        const granted = PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
        )
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("You can use the location")
        } else {
        null
        }
    } catch (err) {
        console.warn(err)
    }
}
render(){
  return (
    <View style={{flex:1,backgroundColor:"white"}}>

      <Provider store={store} >
      <NavigationContainer>
        <Stack.Navigator screenOptions={{headerShown:false}} initialRouteName="splash">
          <Stack.Screen name="splash" component={SplashScreen} />
          <Stack.Screen name="dashboard" component={DashboardScreen} />

          <Stack.Screen name="map" component={Map} />
          <Stack.Screen name="CreateGroundProfile-step1" component={Step1} />
          <Stack.Screen name="CreateGroundProfile-step2" component={Step2} />

          <Stack.Screen name="signIn" component={SignInScreen} />
          <Stack.Screen name="otpForm" component={OTPScreen}/>
          <Stack.Screen name="setPassword" component={SetPasswordScreen}/>     
          <Stack.Screen name="forgetPassword" component={ForgetPasswordScreen}/>  
          
        </Stack.Navigator>
      
        <NavigationComponent />

      </NavigationContainer>
  
      </Provider>
    </View>


  ) 
 }
};