react native rendering useless gap(area) issue with flex - react-native

Question

I am a newcomer for React Native with expo, so still struggling with the flex even though reading many documents. As an attached image, there is a gap, red rectangle area in the image, between header and router style in the Home component. I tried to remove that area but have no idea so far. Could you give me any advice?
Component: Home
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, Dimensions } from 'react-native';
import LocationBar from "./locationBar";
import { Router, Scene } from 'react-native-router-flux';
import Item from "../Item/item";
import Main from "./main";
export default function Home() {
return (
<>
<View style={styles.header}>
<LocationBar />
</View>
<Router style={styles.router}>
<Scene key="root">
<Scene key="main" component={Main} initial={true} />
<Scene key="item" component={Item} />
</Scene>
</Router>
</>
);
}
const width_proportion = '100%';
const height_proportion = '15%';
const styles = StyleSheet.create({
header: {
flex:0.15,
backgroundColor: 'yellow',
width: width_proportion,
},
router: {
flex: 1,
backgroundColor: 'blue',
width: width_proportion,
justifyContent: 'center',
alignItems: 'center'
},
});
Component: Item
import * as React from 'react';
import { View, StyleSheet, Dimensions, Text, Button, FlatList, } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const initialLayout = { width: Dimensions.get('window').width };
export default function Item({ menu, itemId }) {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
return (
<>
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
>
);
}
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
Component: Location
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import * as Location from "expo-location";
export default function LocationBar() {
const [lat, setLat] = useState();
const [lon, setLon] = useState();
useEffect(() => {
...
});
return (<View style={styles.container}>
<MaterialIcons name="location-on" size={30} />
<Text>
({lat}-{lon})
</Text>
</View>);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
marginTop: 10
},
});

Answer 1

I got the answer from this post! hideNavBar={true} is the key to hide that area