Custom Header using React Navigation

From the collection React Native

Basic Info:

• https://reactnavigation.org/docs/elements/#header
• https://reactnavigation.org/docs/stack-navigator#header-related-options

Example

import { Image, StyleSheet, View, Text, Touchable, TouchableOpacity } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen, LoginScreen } from '../views';
import { basicS } from '../styles/globalStyles';

const Stack = createNativeStackNavigator();

function MyHeader() {
  return (
    <View>
      <View style={styles.headerTop}>
        <Image source={require('../../assets/images/logo-rast.png')} style={styles.logo}/>
        <TouchableOpacity>
          <Text style={\[basicS.path, styles.btSair\]}>Sair</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.headerBottom}>
        <Text style={\[basicS.path, {color: '#000', fontSize: 20, lineHeight: 20}\]}>Olá, \[Primeiro nome\]</Text>
        <Text style={\[basicS.path, {color: '#000', fontSize: 20, lineHeight: 20}\]}>\[26/05/2024\]</Text>
      </View>
    </View>
  );
}

export const MainStackNavigation: React.FC = () => {

  
  return (
    <Stack.Navigator screenOptions={{ 
      gestureEnabled: false,
      header: ({ options, route }) => (
        <MyHeader />
      ),
    }}>
      <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }} />
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
    </Stack.Navigator>
  )
}

const styles = StyleSheet.create({
  headerTop:{
    backgroundColor: '#000', 
    height: 60, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    paddingHorizontal: 10
  },
  logo: {
    height: 40, 
    width: 130, 
    resizeMode: 'contain'
  },
  btSair: {
    color: '#fff', 
    fontSize: 20, 
    lineHeight: 20
  },
  headerBottom: {
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    paddingVertical: 5, 
    paddingHorizontal: 10, 
    backgroundColor: '#ccc'
  }
}) 

Screen Shot https://amarilis-schneider.com.br/Imagens_online/react-native-custom-header.png