@react-navigation/elements

What is @react-navigation/elements?

@react-navigation/elements is a package that provides customizable UI components for React Navigation, a popular library for routing and navigation in React Native applications. It includes components like headers, footers, and other UI elements that can be used to create a consistent navigation experience across your app.

What are @react-navigation/elements's main functionalities?

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"
  />
);

Other packages similar to @react-navigation/elements

react-native-elements

react-native-elements is a UI toolkit for React Native that provides a collection of customizable components, including headers, buttons, and more. It offers a broader range of UI components compared to @react-navigation/elements, which is more focused on navigation-related elements.

react-native-paper

react-native-paper is a library that offers a set of Material Design components for React Native. It includes components like Appbar, which can be used as a header, and other UI elements. It provides a more comprehensive set of Material Design components compared to @react-navigation/elements.

native-base

native-base is a UI component library for React Native that provides a wide range of customizable components, including headers, footers, and more. It offers a more extensive set of UI components compared to @react-navigation/elements, which is specifically tailored for navigation.

README

@react-navigation/elements

UI Components for React Navigation.

Installation instructions and documentation can be found on the React Navigation website.