react-native-awesome-component
Version:
React Native Awesome Component
62 lines (53 loc) • 6.17 kB
Markdown
This is Custom header component.
**How to use**
```javascript
import { CustomHeader } from "react-native-awesome-component";
const PrimaryNav = createStackNavigator(
{
"Example Screen": {
screen: ExampleScreen,
navigationOptions: ({ navigation }) => {
return {
header: <CustomHeader navigation={navigation} />,
// ONCE YOU USE CUSTOM HEADER, MAKE SURE YOU SET HEADER LEFT AS NULL, TO PREVENT DEFAULT HEADER LEFT
headerLeft: null
};
}
},
LaunchScreen: {
screen: LaunchScreen,
navigationOptions: ({ navigation }) => {
return {
header: <CustomHeader navigation={navigation} />
};
}
}
},
{
initialRouteName: "LaunchScreen"
}
);
```
**Global Setup**
Global const used to set global value. it used to set the style for all of this component. for more detail check [here](./global-const.md
**Props**
| Props | Description | Default |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| navigation: any | props from screen / navigation stack to handle default navigation action and title | - |
| height: number | props to set header height | `55` |
| backgroundColor: string | props to set header background color | `
| iphoneXPadding: boolean | props to set padding top in iphone-x series | `true` |
| isCard: boolean | props to set header shadow | `true` |
| title: string | props to set header title | `''` or navigation screen routeName (if exist) |
| renderTitle: () => void | props to set custom title | - |
| titleStyle: TextStyle | props to set header title style | `{}` |
| iconLeft: string | props to set icon left name | `arrow-left` |
| titleLeftt: string | props to set action title left | - |
| renderLeft: () => void | props to set custom left action | - |
| onPressLeft: () => void | props to set onpress left action | - |
| iconRight: string | props to set icon right name | - |
| titleRight: string | props to set action title right | - |
| renderRight: () => void | props to set custom right action | - |
| onPressRight: () => void | props to set onpress right action | - |
| iconType: HeaderIconType | props to set icon type that used in header `(ant-design, entypo, evil-icons, feather, font-awesome, font-awesome5, fontisto, foundation, ionicons, material-community, material-icons, octicons)` | `font-awesome5` |