Navigation Container not showing without <ScrollView> - react-native

Question

I'm a React Native student. I'm sorry if this is a basic issue.
I have only one component in my project that is called Main - this component is imported in App.js. (Important: I removed all styles in App.js already)
So - here's my code in Main.JS.
import * as React from 'react';
import { Text, View } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { NavigationContainer } from '#react-navigation/native';
import Search from '../Search'
import ClientsRegister from '../ClientRegister'
import { ScrollView } from 'react-native-gesture-handler';
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<ScrollView>
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
} else if (route.name === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
</ScrollView>
);
}
See the <ScrollView>? Of course - that's not the right thing to do. But If I use <View> only - the navigation bar disappears.
So - here are both cases for you. I Think it will be really gigantic here... but here are the prints.
With <ScrollView>
With <View>
What am I doing wrong here? I Need to use the VIEW, of course, but it's not appearing. Oh, for the case it was hiding at the bottom, behind the control buttons, I tried to put <View style={{marginBottom:100}}> but didn't work either.
(I really need to charge my phone, don't I?)

Answer 1

Hello similar to what #Meyer Buaharon said - to fix this you need to change:
<View>
<NavigationContainer>
...
</NavigationContainer>
</View>
To:
<View style={{flex: 1}}>
<NavigationContainer>
...
</NavigationContainer>
</View>
This means the View fills the entire screen.

Answer 2

I had a similar problem that the scroll view show the content and the view doesn't
<View style={{flex:'1'}}>
...
</View>
Hope this solves it

Answer 3

Maaaan....
Idk why but I moved the code directly to App.js instead doing it in Main.js and importing.
Now it's working.
I really hate life sometimes. (Just kidding...don't really hate life)