react-native-custom-headers
v1.0.1
Published
The custom headers for react-native using react-navigation
Downloads
4
Maintainers
Readme
<<<<<<< HEAD
react-native-custom-headers
Custom headers for react-native using react-navigation for managing navigations in react-native apps.
REACT-NATIVE-CUSTOM-HEADERS!
react-native custom headers for creating custom headers for the app using the react-navigation package for managing navigations in their app.
Installation
npm install react-native-custom-headers --save
PROPS
| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| navigation
| ---- | navigation
| REQUIRED Pass the navigation prop|
| headerName
| String
| Empty
| Enable Header Title |
| showHeaderImage
| Boolean
| ------- | Enable Header Image |
| headerImagePath
| path
| ------- | Required (if showHeaderImage is taken true) |
| headerColor
| String
| ------- | Header Bar Color |
| headerTextStyle
| Stylesheet
| ------- | Custom stylesheet to Header Title |
Screenshots
![Alt text]
![Alt text]
HOW TO USE?
Import it using:
import Header from 'react-native-custom-headers;
and then,
<Header navigation={this.props.navigation}
showHeaderImage={false}
backImagePath ={require('./resources/back.png')}
headerImagePath = {require('./resources/logo.png')}
headerName={'SUB CATEGORY'}/>
`
You can also use this component with react-navigation custom header call like this,
navigationOptions: {
header: props => <Header {...props} />,
},
OR,
Reclaim: {
screen: GiftReclaimSection,
navigationOptions: {
tabBarLabel: 'Reclaim',
header: <Header/>,
}
}
OR like this also,
static navigationOptions = {
header: <Header/>,
};
second commit