Why my panel is hiding the body of my views? - react-native

Question

i want to build a built a navigation with BottomTabNavigator but i dont know what happen i never see the body of my screens, something is hidding the body, i created a demo to demostrate you the wrong, but its too simple.
this is the file App.js
import React from 'react'
//import { Provider } from 'react-native-paper'
import { Provider, useSelector } from 'react-redux'
import { createStore } from 'redux'
import { NavigationContainer } from '#react-navigation/native'
import { View, Text } from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
const Stack = createStackNavigator()
function HomeScreen() {
return (
<View
style={{
flexDirection: 'row',
height: 100,
padding: 20,
}}
>
<View style={{ backgroundColor: 'blue', flex: 0.3 }} />
<View style={{ backgroundColor: 'red', flex: 0.5 }} />
<Text>Hello World!</Text>
</View>
)
}
function SettingsScreen() {
return (
<View
style={{
backgroundColor: 'red',
flex: 1,
color: 'green',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text>Settings!</Text>
</View>
)
}
const Tab = createBottomTabNavigator()
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="main">
<Stack.Screen name="loginScreen" component={SettingsScreen} />
<Stack.Screen name="main" component={MyTabs} />
</Stack.Navigator>
</NavigationContainer>
)
}
i am trying to do, before to user is logged i would like to hidde the tabs
something is hidding
edit 1: why i have 2 headers?

Answer 1

On the web, #react-navigation/bottom-tabs mistakenly treat screens in the tab as inactive and detaches them.
The solution is to disable detach inactive screens for bottom tab.
import React from "react";
//import { Provider } from 'react-native-paper'
import { Provider, useSelector } from "react-redux";
import { createStore } from "redux";
import { NavigationContainer } from "#react-navigation/native";
import { View, Text } from "react-native";
import { createStackNavigator } from "#react-navigation/stack";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
const Stack = createStackNavigator();
function HomeScreen() {
return (
<View
style={{
flexDirection: "row",
height: 100,
padding: 20,
}}
>
<View style={{ backgroundColor: "blue", flex: 0.3 }} />
<View style={{ backgroundColor: "red", flex: 0.5 }} />
<Text>Hello World!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View
style={{
backgroundColor: "red",
flex: 1,
color: "green",
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator detachInactiveScreens={false}>
<Tab.Screen name="Home" component={HomeScreen} options={{headerShown:false}} />
<Tab.Screen name="Settings" component={SettingsScreen} options={{headerShown:false}}/>
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="main" >
<Stack.Screen name="loginScreen" component={SettingsScreen} options={{headerShown:false}}/>
<Stack.Screen name="main" component={MyTabs} options={{headerShown:false}} />
</Stack.Navigator>
</NavigationContainer>
);
}

Answer 2

Moving between screens
You can create a state for handling user logged in status or you can also use redux for it so It will automatically navigate to the main screen after user logged in
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
{state.userToken == null ? (
// No token found, user isn't signed in
<Stack.Screen name="loginScreen" component={LoginScreen} />
) : (
// User is signed in
<Stack.Screen name="main" component={MyTabs} />
)}
</Stack.Navigator>
</NavigationContainer>
);
}
More details Here