Installations

npm install react-native-header-search-bar-custom

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.18.0

NPM Version

6.13.4 Pull Requests

Open

3

Total

35

Closed

0

Merged

32

Issues

Open

0

Total

1

Closed

1

Releases

10

iPhoneXFamily Notch StatusBar Design Hotfix 📏

0.1.10

Updated on Mar 09, 2020

Design is a bit changed for StatusBar 🧮

0.1.9

Updated on Mar 09, 2020

Android: TextInput Design Hotfix 🤩

0.1.8

Updated on Dec 20, 2019

New version 0.1.7: onFocus for SearchBox 😇

0.1.7

Updated on Dec 20, 2019

InputTextDisable design bug is fixed for android 🔥

0.1.6

Updated on Dec 20, 2019

iPhones without notch design problem is fixed. Also better style coding

0.1.5

Updated on Dec 20, 2019

View All 10 releases

Languages

5

JavaScript

Objective-C

Ruby

Java

Starlark

JavaScript (48.61%)

Objective-C (18.67%)

Ruby (12.41%)

Java (11.73%)

Starlark (8.57%)

Developer

WrathChaos

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

122 Stars

101 Commits

9 Forks

2 Watchers

7 Branches

3 Contributors

Updated on Apr 19, 2025

Maintainers

1

View All 3 Contributors

Package Meta Information

Latest Version

0.1.8

Package Id

react-native-header-search-bar-custom@0.1.8

Unpacked Size

17.18 kB

Size

5.12 kB

File Count

12

NPM Version

6.13.4

Node Version

10.18.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

7

react react-native react-native-androw react-native-vector-icons react-native-safe-area-context react-native-dynamic-vector-icons @freakycoder/react-native-helpers

React Native Header Search Bar React Native Header Classic Search Bar

Installation

Add the dependency:

React Native:

1npm i react-native-header-search-bar

Peer Dependencies

IMPORTANT! You need install them.

1"react": ">= 16.x.x",
2"react-native": ">= 0.55.x",
3"react-native-androw": ">= 0.0.33",
4"react-native-vector-icons": ">= 6.6.0",
5"react-native-safe-area-context": ">= 0.6.1",
6"react-native-dynamic-vector-icons": ">= 0.2.1",
7"@freakycoder/react-native-helpers": ">= 0.0.21"

Component Options

HeaderSearchBar
HeaderClassicSearchBar

Import

1import {
2  HeaderSearchBar,
3  HeaderClassicSearchBar
4} from "react-native-header-search-bar";

HeaderSearchBar Usage

1<HeaderSearchBar onChangeText={text => console.log(text)} />

HeaderClassicSearchBar Usage

1<HeaderClassicSearchBar onChangeText={text => console.log(text)} />

Configuration - Props

Main Props

Property	Type	Default	Description
backgroundColor	color	#fff	change the background color
shadowColor	color	#000	change the main shadow color
firstTitle	string	Find your	set the first title itself
secondTitle	string	Favorite Art Work	set the second title itself
firstTitleColor	color	#959597	change the first title's text color
secondTitleColor	color	#34343b	change the second title's text color
firstTitleFontSize	number	18	change the first title font size
secondTitleFontSize	number	18	change the second title font size
iconComponent	component	hamburger icon	set your own component instead of hamburger icon component
onPressHamburgerIcon	function	null	set your own function when hamburger icon is on pressed

SearchBox Props

Property	Type	Default	Description
iconName	string	search	set the icon name
iconType	string	EvilIcons	set the icon type
iconSize	number	25	set the icon size
iconColor	color	#000	set the icon color
onChangeText	function	function	set your own logic for changing text
value	string	undefined	set the value for search box's text input
searchBoxText	string	What are you looking for?	set the search box's text
searchBoxTextStyle	style	default	set your own style for text input's style
searchBoxOnPress	function	function	set your own logic when tapping the search box itself
searchBoxWidth	number	95%	change the search box's width
searchBoxBorderRadius	number	8	change the search box's border radius
searchBoxBackgroundColor	color	#f5f5f5	change the search box's background color
iconComponent	component	Icon	set your own icon component instead of Icon
disableTextInput	boolean	false	disable or enable the text input itself

Future Plans

~~LICENSE~~
~~Header Classic Search Bar Component~~
Write an article about the lib on Medium

Inspiration

Header Search Bar Component is designed by: Jawadur Rahman

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Header Search Bar is available under the MIT license. See the LICENSE file for more info.

No vulnerabilities found.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More