rn-custom-header
v1.0.2
Published
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.
Downloads
18
Maintainers
Readme
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.
Table of Contents
Installation
To use rn-custom-header in your React Native project, simply install it using npm or yarn:
npm install rn-custom-header
or
yarn add rn-custom-header
Usage
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.
How to use
import CustomHeader from "rn-custom-header";
function App() {
return (
<CustomHeader
useText={true}
source1={require("./src/assets/menus.png")}
source2={require("./src/assets/dots.png")}
/>
);
}
Props
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 | | --------- | --------- | --------- |
How to use
import Header from "rn-custom-header";
function App() {
return (
<Header
source1={require("./src/assets/back.png")}
source2={require("./src/assets/search-interface-symbol.png")}
source3={require("./src/assets/dots.png")}
useText={true}
/>
);
}
Props
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 | | --------- | --------- | --------- |
How to use
Contributors
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!
License
This package is released under the MIT License.