postion view first on screen and after scroll view react native - css

Question

I am trying to make a custom header in react native tsx and for that I made a function renderHeader that I call before scroll view because I don't want it to be scrollable ...
but it does not work
Please help me
and the code :
import { ScrollView, StyleSheet, Text, View, StatusBar } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
export default function App() {
const heightBar=StatusBar.currentHeight;
const renderHeader = () => {
return (
<View style={styles.headerContainer}>
<Text>hey</Text>
</View>
);
};
return (
<SafeAreaView style={styles.container}>
{renderHeader()}
<ScrollView style={styles.ScrollView}>
<Text>buna</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
headerContainer: {
position: 'absolute',
flex:1,
paddingTop: StatusBar.currentHeight,
backgroundColor: 'pink',
height: 10,
borderBottomColor: 'black',
},
container: {
flex: 1,
backgroundColor: 'white',
},
ScrollView: {
flex: 1,
marginHorizontal: 20,
},
});
Thanks in Advance !
enter image description here
header is way up than statusbar.currentHeight

Answer 1

Your problem is in layout:
headerContainer: {
position: 'absolute',
flex:1,
paddingTop: StatusBar.currentHeight,
backgroundColor: 'pink',
height: 10,
borderBottomColor: 'black',
},
There is no need to pisition header "absolute". Remove it, or set it to relative.
Also don't set height and flex at the same time. It looks like you don't understand what flex does. If it is so, please do your research, it is very important.
minimal example what i think you want to achieve:
import { ScrollView, StyleSheet, Text, View, StatusBar, SafeAreaView } from 'react-native';
export default function App() {
const renderHeader = () => {
return (
<View style={styles.headerContainer}>
<Text>hey</Text>
</View>
);
};
return (
<SafeAreaView style={styles.container}>
{renderHeader()}
<ScrollView style={styles.ScrollView}>
<Text>buna</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
headerContainer: {
backgroundColor: 'pink',
borderBottomColor: 'black',
},
container: {
flex: 1,
backgroundColor: 'blue',
},
ScrollView: {
flex: 1,
marginHorizontal: 20,
},
});