Header
Header component.
import { Header } from "@redshank/native";
Examples
Default
Default header element.
Scroll Effect
Scroll animation in header, manipulation title, color, background, etc.
Using context
Using `useHeaderNavigation` for set props to header values.
APIs
Header
Api props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| background | ThemeColor string | ThemeColor | Background header in static state | background |
| backgroundSticky | ThemeColor string | ThemeColor | Background header when apply animation scroll | background prop |
| heightDynamic | number | Number | Height where the scroll animation will begin to be applied | 0 |
| leftIcon | ReactNode | React Element | Optional icon or element left | - |
| statusBarHeight | number | Number | Status bar height, by default it is calculated based on safe area and OS | calculated |
| rightIcon | ReactNode | React Element | Optional icon or element right | - |
| style | StyleProp<ViewStyle> | object | Style object for wrapper children element | - |
| title | ReactNode string | ReactNode Text | Required. Title to header | - |
| titleOnScroll | ReactNode string | ReactNode Text | Title to header when make scroll animation | - |
| titleOnScrollPosition | TitlePosition | TitlePosition | Position for title when scroll is applied | center |
| titlePosition | TitlePosition | TitlePosition | Position for title when header is initial or static | iOS: center Other: left |
| titleStyle | StyleProp<TextStyle> | object | Style object for title prop | - |
useHeaderNavigation
Api props for useHeaderNavigation() hook, useful to use a single header component and change it according to your screen
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| setValues | (values: HeaderProps or null) => void; | HeaderProps | Change context value for set values to header | - |
| header | HeaderProps null | HeaderProps | Some header props | null |
Title Position
type TitlePosition = 'left' | 'center' | 'right';
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.