Skip to main content

Header

The Header component provides a consistent top bar UI for screens in your React Native app. It supports back navigation, screen titles with optional subtitles, and action buttons (e.g., notifications or settings icons).

Vector icon

Usage

import {Header, Screen, Text} from '@/components';
import useHeader from '@/hooks/useHeader';
import React from 'react';

const HomeScreen = () => {
useHeader(() => (
<Header>
<Header.BackAction />
<Header.Content title="hellow" subTitle="John Doe" />
<Header.Action variant="vector" icon="bell" />
</Header>
));

return <Screen background="primary50" />;
};

export default HomeScreen;

hooks

useHeader

Use this custom hook to declaratively configure the header for a screen.

Usage of useHeader

useHeader(header: () => ReactElement, deps?: DependencyList)

Props

children

Type: React.ReactNode

Extends ...BoxProps<Theme> from the Box component