Header
Headers are navigation components that display information and actions relating to the current screen.
Note:
Make sure that you have completed Step 3 in the setup guide before using Header
.
Usage
Note:
Make sure that you have completed Step 3 in the setup guide before using Header
.
Headers are navigation components that display information and actions relating to the current screen.
LinearGradient Usage
Using LinearGradient in React Native Elements is supported through the
react-native-linear-gradient
package. If you're using expo or create-react-native-app then you can use
linearGradientProps
prop right out the box with no additional setup.
For react-native-cli users, make sure to follow the installation instructions and use it like this:
import { Header } from '@rneui/themed';
import LinearGradient from 'react-native-linear-gradient';
...
<Header
ViewComponent={LinearGradient} // Don't forget this!
linearGradientProps={{
colors: ['red', 'pink'],
start: { x: 0, y: 0.5 },
end: { x: 1, y: 0.5 },
}}
/>
Props
note
Includes all View props.
Name | Type | Default | Description |
---|---|---|---|
hideStatusBar | boolean | false | Define true to hide status bar. |
ViewComponent | React Component | View | Component for container. |
backgroundColor | string | Sets backgroundColor of the parent component. | |
backgroundImage | ImageSourcePropType | Sets backgroundImage for parent component. | |
backgroundImageStyle | ImageStyle | Styling for backgroundImage in the main container. | |
barStyle | StatusBarStyle | Sets the color of the status bar text. | |
centerComponent | HeaderSubComponent | Define your center component here. | |
centerContainerStyle | View Style | Styling for container around the centerComponent. | |
children | (Element | Element[]) & ReactNode | [] | Add children component to the header. |
containerStyle | View Style | Styling around the main container. | |
elevated | boolean | Elevation for header | |
leftComponent | HeaderSubComponent | Define your left component here. | |
leftContainerStyle | View Style | Styling for container around the leftComponent. | |
linearGradientProps | Object | Displays a linear gradient. See usage. | |
placement | center | left | right | center | Alignment for title. |
rightComponent | HeaderSubComponent | Define your right component here. | |
rightContainerStyle | View Style | Styling for container around the rightComponent. | |
statusBarProps | StatusBarProps | Accepts all props for StatusBar. |