rn-custom-header A customizable rn-custom-header component for React Native projects. Use this open source library in your fresh React Native project for instant startup.
npm install rn-custom-headerrn-custom-header
A customizable rn-custom-header component for React Native projects. Use this open source library in your fresh React Native project for instant startup.
Table of Contents
To use rn-custom-header in your React Native project, simply install it using npm or yarn:
``bash`
npm install rn-custom-header
or
yarn add rn-custom-header
To use the rn-custom-header component in your app, import it from the rn-custom-header package and render it as the second component in your app after splash screen. You can customize the appearance and behavior of the rn-custom-header by passing in props.
`js
import CustomHeader from "rn-custom-header";
function App() {
return (
source1={require("./src/assets/menus.png")}
source2={require("./src/assets/dots.png")}
/>
);
}
`
The InitialCustomBottomBar component accepts the following props:
| Prop Name | Data Type | Description |
| -------------- | ------------------- | ----------------------- |
| useText | bool | Text under header |
| ------------- | --------- | ----------- |
| source1 | specified path(req) | Image source |
| --------- | --------- | --------- |
| source2 | specified path(req) | Image source |
| --------- | --------- | --------- |
| containerStyle | any | Your container style |
| --------- | --------- | --------- |
| imageStyle | any | Your image style |
| --------- | --------- | --------- |
| title | any | Your header title |
| --------- | --------- | --------- |
| textStyle | any | Your text style |
| --------- | --------- | --------- |
| onPressRight | any | Your image onPressRight |
| --------- | --------- | --------- |
| onPressLeft | any | Your image onPressLeft |
| --------- | --------- | --------- |
`js
import Header from "rn-custom-header";
function App() {
return (
source2={require("./src/assets/search-interface-symbol.png")}
source3={require("./src/assets/dots.png")}
useText={true}
/>
);
}
`
The Header component accepts the following props:
| Prop Name | Data Type | Description |
| -------------- | ------------------- | ----------------------- |
| useText | bool | Text under header |
| ------------- | --------- | ----------- |
| source1 | specified path(req) | Image source |
| --------- | --------- | --------- |
| source2 | specified path(req) | Image source |
| --------- | --------- | --------- |
| source3 | specified path(req) | Image source |
| --------- | --------- | --------- |
| containerStyle | any | Your container style |
| --------- | --------- | --------- |
| imageStyle | any | Your image style |
| --------- | --------- | --------- |
| title | any | Your header title |
| --------- | --------- | --------- |
| textStyle | any | Your text style |
| --------- | --------- | --------- |
| onPressRight | any | Your image onPressRight |
| --------- | --------- | --------- |
| onPressLeft1 | any | Your image onPressLeft1 |
| --------- | --------- | --------- |
| onPressLeft2 | any | Your image onPressLeft2 |
| --------- | --------- | --------- |
We would like to thank the following developers for their contributions to this project:
To all our contributors, thank you for your hard work and dedication!
This package is released under the MIT License.
`
``