Skip to content

WrathChaos/react-native-header-search-bar

Repository files navigation

React Native Header Search Bar

Battle Tested ✅

Fully customizable header search bar for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

Header Search Bar Header Classic Search Bar
React Native Header Search Bar React Native 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, kurayogun@gmail.com

License

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