Can a normal page become a Header? - reactjs

Question

I've got a page that I created and I would like to use it as a header.
The issue is that it would push any other page/text that I use to the bottom of the page.
Any solution? I'm new to react native.
Here is my code :
import React from 'react';
import { Image, StyleSheet, Button, View, SafeAreaView, Text, Alert, TouchableOpacity } from 'react-native';
import logo from '../../../assets/logo.png';
export default function App() {
return (
<View style={styles.container}>
<View style = {styles.backgroundContainer}>
<Image source={logo} style={{ width: 190, height: 40 }} />
<Text style={styles.text1}>|</Text>
<Text style={styles.text2}>Welcome to the Team</Text>
<TouchableOpacity style={styles.button}>
<Text style={styles.text3}>A LA CARTE</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button2}>
<Text style={styles.text3}>PLAY</Text>
</TouchableOpacity>
<Text style={styles.text21}>Teams</Text>
<Text style={styles.text0}>|</Text>
<Text style={styles.text22}>Projets</Text>
<Text style={styles.text00}>|</Text>
<Text style={styles.text23}>Glossaire</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
backgroundContainer: {
position: 'absolute',
top: 0,
bottom: 0,
left: 10,
right: 0,
},
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
marginTop: 12,
},
code: {
marginTop: 12,
padding: 12,
borderRadius: 8,
color: "#666",
backgroundColor: "#eaeaea"
},
button: {
backgroundColor: "#61C3D7",
position:'absolute',
justifyContent: "center",
alignItems: "center",
borderRadius:3,
height:45,
padding: 15,
width:120,
top:-10,
right:170
},
button2: {
backgroundColor: "#26AA90",
position:'absolute',
justifyContent: "center",
alignItems: "center",
borderRadius:3,
height:45,
padding: 15,
width:120,
top:-10,
right:20
},
text0: {
position: 'absolute',
color:'#D3D3D3',
fontSize: 24,
fontWeight: 300,//Semibold
right: 405
},
text00: {
position: 'absolute',
color:'#D3D3D3',
fontSize: 24,
fontWeight: 300,//Semibold
right: 495
},
text1: {
position: 'absolute',
fontSize: 24,
fontWeight: 300,//Semibold
left: 190
},
text2: {
position: 'absolute',
fontSize: 17,
fontWeight: 600,//Semibold
top: 5,
left: 210
},
text21: {
position: 'absolute',
fontSize: 17,
fontWeight: 600,//Semibold
top: 5,
right: 525
},
text22: {
position: 'absolute',
fontSize: 17,
fontWeight: 600,//Semibold
top: 5,
right: 425
},
text23: {
position: 'absolute',
fontSize: 17,
fontWeight: 600,//Semibold
top: 5,
right: 325
},
text3: {
fontSize: 17,
textAlign: 'center',
fontWeight: 400,
color:'#FFFFFF',
top: 5,
width: 100,
left: 210}
});
This is the index.tsx of my Header directory and I called it with a in my App.tsx.
I wish to make it so that I can call this Header in each of my pages and not have to use "position: 'absolute'" in each of my styles each time I'm using it.