title: Can a normal page become a Header?
body: <p>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 :</p>
  <pre><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 (
      &lt;View style={styles.container}&gt;
        &lt;View style = {styles.backgroundContainer}&gt;
          &lt;Image source={logo} style={{ width: 190, height: 40 }} /&gt; 
          &lt;Text style={styles.text1}&gt;|&lt;/Text&gt;
          &lt;Text style={styles.text2}&gt;Welcome to the Team&lt;/Text&gt;
          &lt;TouchableOpacity style={styles.button}&gt;
              &lt;Text style={styles.text3}&gt;A LA CARTE&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity style={styles.button2}&gt;
              &lt;Text style={styles.text3}&gt;PLAY&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;Text style={styles.text21}&gt;Teams&lt;/Text&gt;
          &lt;Text style={styles.text0}&gt;|&lt;/Text&gt;
          &lt;Text style={styles.text22}&gt;Projets&lt;/Text&gt;
          &lt;Text style={styles.text00}&gt;|&lt;/Text&gt;
          &lt;Text style={styles.text23}&gt;Glossaire&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  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: &quot;#666&quot;,
      backgroundColor: &quot;#eaeaea&quot;
    },
    button: {
       backgroundColor: &quot;#61C3D7&quot;,
      position:'absolute',
  justifyContent: &quot;center&quot;,
  alignItems: &quot;center&quot;,
  borderRadius:3,
  height:45,
  padding: 15,
  width:120,
  top:-10,
  right:170
    },
  </code></pre>
  <pre><code>button2: {
    backgroundColor: &quot;#26AA90&quot;,
    position:'absolute',
    justifyContent: &quot;center&quot;,
    alignItems: &quot;center&quot;,
    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}
  });
  </code></pre>
  <p>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 &quot;position: 'absolute'&quot; in each of my styles each time I'm using it.</p>