wrathchaos / react-native-header-search-bar

Fully customizable header search bar for React Native

Header Search Bar	Header Classic Search Bar

Installation

Add the dependency:

React Native:

npm i react-native-header-search-bar

Peer Dependencies

IMPORTANT! You need install them.

"react-native-androw": ">= 0.0.33",
"react-native-vector-icons": ">= 6.6.0",
"react-native-safe-area-context": ">= 0.6.1",
"react-native-dynamic-vector-icons": ">= 0.2.1",
"@freakycoder/react-native-helpers": ">= 0.0.21"

Component Options

• HeaderSearchBar
• HeaderClassicSearchBar

Import

import {
  HeaderSearchBar,
  HeaderClassicSearchBar
} from "react-native-header-search-bar";

HeaderSearchBar Usage

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

HeaderClassicSearchBar Usage

<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, [email protected]

License

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

react-native-header-search-bar's Issues

Androd: Container background problem

Container bottom looks too long in android