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.