Header Search Bar | Header Classic Search Bar |
Add the dependency:
npm i react-native-header-search-bar
"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"
- HeaderSearchBar
- HeaderClassicSearchBar
import {
HeaderSearchBar,
HeaderClassicSearchBar
} from "react-native-header-search-bar";
<HeaderSearchBar onChangeText={text => console.log(text)} />
<HeaderClassicSearchBar onChangeText={text => console.log(text)} />
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 |
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 |
-
LICENSE -
Header Classic Search Bar Component - Write an article about the lib on Medium
Header Search Bar Component is designed by: Jawadur Rahman
FreakyCoder, kurayogun@gmail.com
React Native Header Search Bar is available under the MIT license. See the LICENSE file for more info.