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).
- with back action
- with subtitle
- with right 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