rn-custom-header

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.