| Header Search Bar | Header Classic Search Bar |
|
|
Installation
Add the dependency:
React Native:
npm i react-native-header-search-barPeer 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.