I'm trying to make my bottomTabNavigator hide when I click on a screen and then become visible again once you scroll. Here is my code for my StackNavigator and BottomTabNavigator:
function UsersScreenNavigator() { const Stack = createNativeStackNavigator(); return (<Stack.Navigator screenOptions={{headerShown: false}}><Stack.Screen name="Users" component={BottomTabNavigator} options={{headerShown: false}}/><Stack.Screen name="Profile" component={Profile} options={{headerShown: false}}/><Stack.Screen name="Settings" component={Settings} options={{headerShown: false}}/><Stack.Screen name="EditProfile" component={EditProfile} options={{headerShown: false}}/><Stack.Screen name="BackButton" component={BackButton} options={{headerShown: false}}/></Stack.Navigator> ); } function BottomTabNavigator() { const {buttonShell, buttonText} = styles; const Tab = createBottomTabNavigator(); const Icon = createIconSet(glyphMap, 'Fuze', 'Fuze.ttf'); let [fontsLoaded] = useFonts({'Fuze': require('../../../assets/Fuze.ttf'), Roboto_500Medium }); if (!fontsLoaded) { return <></>; } else { return (<Tab.Navigator initialRouteName="Users" screenOptions={{ headerShown: false, tabBarShowLabel: false, tabBarStyle: {borderColor: '#DBDBDB', height: 100, paddingTop: 16}, }}> { bottomTabs.map((bottomTab) => { return (<Tab.Screen key={`screen-${bottomTab.title}`} name={bottomTab.title} component={bottomTab.componentName} options={{ unmountOnBlur: true, tabBarIcon: (({focused}) => { return !focused ?<Icon name={bottomTab.icon} size={32}/> :<View style={buttonShell}><Text style={buttonText}>{bottomTab.title}</Text></View> }) }} /> ) } ) }</Tab.Navigator> ) }}Here is my screen I want to hide the bottomNavigator on and the array of screens I map to my navigator:
export const bottomTabs = [ { title: 'User', componentName: Users, icon: 'icon-User' }, { title: 'Check-in', componentName: CheckInScreenNavigator, icon: 'icon-CheckIn' }, { title: 'Hub', componentName: HubScreenNavigator, icon: 'icon-Hub' }, { title: 'Chats', componentName: Chats, icon: 'icon-Chats' }] function Users() { const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; let [fontsLoaded] = useFonts({ Roboto_400Regular, Roboto_500Medium }); if (!fontsLoaded) { return <></>; } else { return (<View><ScrollView><View style={{flex: 1}}><ProfileButton/><Image style={{height: windowHeight - 100, width: windowWidth}} source={mockUsers[0].pictures[0]}/><UserProfileInfo/></View><View><Text style={{ fontSize: 16, fontFamily: 'Roboto_400Regular', marginTop: 32, marginBottom: 16, marginLeft: 32 }}>About</Text><View style={{marginLeft: 32}}><Text style={{fontSize: 14, color: '#878787', fontFamily: 'Roboto_400Regular'}}> {mockUsers[0].about}</Text></View><Text style={{ fontSize: 16, fontFamily: 'Roboto_400Regular', marginTop: 32, marginBottom: 16, marginLeft: 32 }}>Interests</Text><View style={{flexDirection: 'row', flexWrap: 'wrap', marginLeft: 32, marginRight: 32}}> {mockUsers[0].userInterests?.map((interest, index) => { return (<View style={{backgroundColor: '#000', borderRadius: 44, minHeight: 44, justifyContent: 'center', marginRight: 8, marginBottom: 16}}><Text key={`interest-${index}`} style={{ color: '#FFF', fontFamily: 'Roboto_500Medium', fontSize: 18, paddingTop: 8, paddingLeft: 24, paddingBottom: 8, paddingRight: 24, }}>{interest}</Text></View> ) })}</View><Text style={{ fontSize: 16, fontFamily: 'Roboto_400Regular', marginTop: 32, marginBottom: 16, marginLeft: 32 }}>Questions and answers</Text><AnsweredQuestionInput /><AnsweredQuestionInput /><AnsweredQuestionInput /><Text style={{ fontSize: 16, fontFamily: 'Roboto_400Regular', marginTop: 32, marginBottom: 16, marginLeft: 32 }}>Pictures</Text><Pictures userPictures={mockUsers[0].pictures} blur={true}/></View></ScrollView><LikeAndDislike /></View> ); }}Apologies for the un-neat code I am mid writing this and cannot find a way to hide the tabBar.