@react-navigation/elements

Header Component

The Header component allows you to create a customizable header for your screens. You can set the title, style, and other properties to match your app's design.

import { Header } from '@react-navigation/elements';

const MyHeader = () => (
  <Header
    title="My Screen"
    headerStyle={{ backgroundColor: '#f4511e' }}
    headerTintColor="#fff"
    headerTitleStyle={{ fontWeight: 'bold' }}
  />
);

Footer Component

The Footer component allows you to add a footer to your screens. You can customize its style and content to fit your app's needs.

import { Footer } from '@react-navigation/elements';

const MyFooter = () => (
  <Footer
    footerStyle={{ backgroundColor: '#f4511e' }}
    footerTintColor="#fff"
  >
    <Text style={{ color: '#fff' }}>Footer Content</Text>
  </Footer>
);

Customizable Back Button

The HeaderBackButton component provides a customizable back button for your navigation headers. You can set its appearance and behavior to match your app's design.

import { HeaderBackButton } from '@react-navigation/elements';

const MyBackButton = ({ navigation }) => (
  <HeaderBackButton
    onPress={() => navigation.goBack()}
    tintColor="#fff"
  />
);