react-native-seach-header
Easy to use React Native search header component based on material design patterns.
Installation
$ npm install react-native-search-header --save
Example
To use search header you simply import the component factory function to create a renderable component:
;;; const DEVICE_WIDTH = Dimensionswidth; const styles = StyleSheet; const Demo = { const searchHeaderRef = React; return <View style = stylescontainer > <StatusBar barStyle = 'light-content' /> <View style = stylesstatus /> <View style = stylesheader > <Text style = styleslabel > Demo </Text> <Button title = 'Search' color = '#f5fcff' onPress = searchHeaderRefcurrent /> </View> <SearchHeader ref = searchHeaderRef placeholder = 'Search...' placeholderColor = 'gray' pinnedSuggestions = `react-native-search-header` `react-native` `javascript` onClear = { console; } onGetAutocompletions = async { if text const response = await ; const data = await response; return data1; else return ; } /> <View style = stylesbutton > <Button title = 'Open Search' color = '#f5fcff' onPress = searchHeaderRefcurrent /> </View> <View style = stylesbutton > <Button title = 'Clear' color = '#f5fcff' onPress = { searchHeaderRefcurrentclear; } /> </View> </View> ;} AppRegistry;
Public Methods Access via Reference
These are methods that are accessible via "ref":
Methods | description |
---|---|
isHidden | Call to check if the SearchHeader is visible. |
show | Call to show the SearchHeader. |
hide | Call to hide the SearchHeader. |
clear | Call to clear the SearchHeader text input. |
clearSuggestion | Call to clear search suggestion list. |
Props
Below are the props you can pass to the React Component to customize the SearchHeader.
Prop | Type | Default | description |
---|---|---|---|
headerHeight | string | #5d5d5d |
Custom header bar height |
headerBgColor | string | #5d5d5d |
Custom header background color |
inputColor | string | #5d5d5d |
Search text input color |
inputBgColor | string | transparent |
Search text input background color |
placeholderColor | string | #bdbdbd |
Text input placeholder color |
suggestionEntryColor | string | #bdbdbd |
Search suggestion text color |
iconColor | string | #5d5d5d |
SearchHeader component icon button color |
topOffset | number | 24 | The offset above the SearchHeader component. Default to 24 (ios) or 0 (android) |
dropShadowed | boolean | true | Enable drop shadow styling |
visibleInitially | boolean | false | Set to false to hide and to true to show the SearchHeader component |
autoFocus | boolean | true | Enable text input auto focus when open |
autoCorrect | boolean | true | Enable text input autocorrect |
persistent | boolean | false | Enable persistent search |
enableSuggestion | boolean | true | When enabled, search suggestion list will be display accordingly |
suggestionHistoryEntryRollOverCount | number | 16 | The max number of search suggestion history items |
pinnedSuggestions | array | [] | An array of pinned search suggestions |
placeholder | string | Search... |
A string placeholder when there is no text in text input |
entryAnimation | string | from-left-side |
Set the direction of SearchHeader entry animation. Possible values are from-left-side , from-right-side |
iconImageComponents: | function | Internal | An array of custom icon image components for the buttons |
onGetAutocompletions | function | None | This function is called during search input change to get a string array of search autocompletions |
onClear | function | None | This function is called when text input is cleared |
onSearch | function | None | This function is called after return/done key is pressed. Return text input event |
onEnteringSearch | function | None | This function is called after text is entered/changed in text input. Return text input event |
onFocus | function | None | This function is called when text input in focused |
onBlur | function | None | This function is called when text input in blurred |
onHide | function | None | This function is called right after hide animation is completed |
onShow | function | None | This function is called right after show animation is completed |
Style Overrides
SearchHeader component default style can be override. Below are examples of how to override each default style element.
<SearchHeader style = container: ...myContainerStyle header: ...mySearchHeaderStyle suggestion: ...mySearchSuggestionStyle input: ...mySearchInputTextStyle suggestionEntry: ...mySearchSuggestionEntryTextStyle icon: ...myIconStyle />
Change Log
Release Version 0.3.5 (09/09/2019)
Notes:
New Features:
- Added support for new React Hooks.
Breaking Changes:
Improvements:
- When enableSuggestion = true, suggestion view is visible when text input is focused and hidden when text input is blurred.
- Removed componentDidUpdate for SearchHeaderWithReactClass.
Bug fixes:
Release Version 0.3.4 (07/03/2019)
Notes:
New Features:
Breaking Changes:
Improvements:
Bug fixes:
- Fixed a bug where hidden suggestion view is blocking other components from receiving touch events.
Release Version 0.3.3 (07/02/2019)
Notes:
New Features:
- Added pin search entry suggestions
- Updated dependencies to latest
Breaking Changes:
Improvements:
- Changed suggestion visibility. It is now visible when search input is focused and hidden when blurred
- Code cleanups
Bug fixes:
- Fixed history suggestion entry rollover
- Fixed misc suggestion view issues
Release Version 0.3.2 (03/11/2019)
Notes:
New Features:
Breaking Changes:
Improvements:
- Removed lodash dependency
- Code cleanups
- Fixed animations
- Changed suggestion view style
Bug fixes:
Release Version 0.3.1 (01/28/2019)
Notes:
New Features:
Breaking Changes:
Improvements:
Bug fixes:
- Fixed style not overriding bug. #28, #30
Release Version 0.3.0 (11/13/2018)
Notes:
Updated compatibility to latest react native version 0.57
New Features:
Breaking Changes:
Improvements:
- Improved icon image components implementation.
Bug fixes:
- Fixed minor bugs for input placeholder.
Release Version 0.2.9 (09/10/2018)
Notes:
New Features:
Breaking Changes:
Improvements:
- Updated lifecycle methods called to match latest react recommendations.
Bug fixes:
- Fixed TextInput lag issue.
Release Version 0.2.8 (08/30/2018)
Notes:
Updated compatibility to latest react native version 0.56
New Features:
Breaking Changes:
Improvements:
Bug fixes:
- Fixed suggestion text display to have tail ellipsize if there are too many words in one line.
- Fixed text input clearing issue.
Release Version 0.2.7 (04/09/2018)
Notes:
Updated compatibility to latest react native version 0.55.4
New Features:
- Added onClear callback when text input is cleared
Breaking Changes:
Improvements:
Bug fixes:
- Add note to get clear method to work with react native 55.4.
- Fixed no spacing for text entry in search suggestion box view.
Release Version 0.2.6 (03/19/2018)
Notes:
Updated compatibility to latest react native version 0.54.2
New Features:
Breaking Changes:
Improvements:
Bug fixes:
- Fixed bug where clearing text input or if text input is empty will not close the suggestion view
- Fixed documentation in README
onHidden -> onHide
onVisible -> onShow
Release Version 0.2.5 (02/05/2018)
Notes:
Updated compatibility to latest react native version 0.53.0
New Features:
Added onClearSuggesstion callback prop to clear suggestion history
Breaking Changes:
Improvements:
Bug fixes:
- Fixed topOffset spelling error.
- Fixed key index warning in FlatList.
Release Version 0.2.4 (12/27/2017)
Notes:
New Features:
Added headerHeight prop
Added headerBgColor prop
Breaking Changes:
Improvements:
Bug fixes:
Release Version 0.2.3 (11/26/2017)
Notes:
New Features:
Breaking Changes:
Improvements:
Bug fixes:
- Drop custom deepMerge in favor of lodash.merge
Release Version 0.2.2 (11/25/2017)
Notes:
- Updated to latest React Native version 0.50.4
- Removed Hyperflow dependency as it is not needed.
New Features:
Breaking Changes:
Improvements:
Bug fixes:
- Resolving babel transform error. Hopefully...
Release Version 0.2.1 (10/17/2017)
Notes:
- Updated to latest React Native version
New Features:
- Added persistent search bar
- iconImageComponents prop for easy custom button styling
Breaking Changes:
- No longer needed to do this const SearchHeaderView = SearchHeaderComponent()
Just import and use as any react native component.
- Renaming properties:
searchInputTextColor -> inputColor
placeholderTextColor -> placeholderColor
searchSuggestionTextColor -> suggestionEntryColor
statusHeightOffet -> topOffset
searchSuggestionHistoryItemRollOverCount ->suggestionHistoryEntryRollOverCount
dropShadow -> dropShadowed
enableSearchSuggestion -> enableSuggestion
onGetSearchAutocompletions -> onGetAutocompletions
onSearchChange -> onEnteringSearch
onHidden -> onHid
onVisible -> onShow
Improvements:
Bug fixes:
Release Version 0.2.0 (09/08/2017)
Notes:
- Updated to latest React Native
- updated to latest Hyperflow
New Features:
Breaking Changes:
Improvements:
- Added autoFocus prop
Bug fixes:
- Fixed FlatList missing list item "key" warning
Release Version 0.1.9 (05/27/2017)
Notes:
- Updated to latest React Native
New Features:
Breaking Changes:
Improvements:
- Used FlatList instead of ScrollView to render search suggestion list
Bug fixes:
- Fixed clearSearchSuggestion bug
Release Version 0.1.8 (05/17/2017)
Notes:
New Features:
Breaking Changes:
- Renamed property searchSuggestionItemRollOverCount to searchSuggestionHistoryItemRollOverCount
- Renamed property onGetSearchSuggestions to onGetSearchAutocompletions
Improvements:
- Improved onGetSearchAutocompletions implementation
- Added onGetSearchAutocompletions to example
Bug fixes:
Release Version 0.1.7 (05/10/2017)
Notes:
- Updated package dependencies.
New Features:
Breaking Changes:
Improvements:
Bug fixes:
Release Version 0.1.6 (02/16/2017)
Notes:
New Features:
- Added isHidden and clear methods, accessible via "ref"
Breaking Changes:
Improvements:
Bug fixes:
- Fixed issues with onHidden and onVisible not firing.
Release Version 0.1.5 (01/27/2017)
Notes:
New Features:
Breaking Changes:
Improvements:
- Improved search suggestion implementation. Matching it closer to other material design search implementations.
Bug fixes:
Release Version 0.1.4 (01/26/2017)
Notes:
- Update to latest hyperflow version.
New Features:
- New prop "entryAnimation" for setting SearchHeader entry animation direction.
Breaking Changes:
Improvements:
- Added public methods access via "ref"
Bug fixes:
- Fixed react "refs" warning message.
Release Version 0.1.3 (01/25/2017)
Notes:
- Update to latest hyperflow version.
New Features:
Breaking Changes:
- Props renaming:
searchTextColor -> searchInputTextColor
searchSuggestionItemTextColor -> searchSuggestionTextColor
searchVisibleInitially -> visibleInitially
onSearchBlur -> onBlur
onSearchFocus -> onFocus
onMinimized -> onHidden
onMaximized -> onVisible
Improvements:
- Added public methods access via "ref"
Bug fixes:
- Fixed issue with search container covering underlining components when hidden.
Release Version 0.1.2 (01/23/2017)
Notes:
- Update to latest hyperflow version.
New Features:
Breaking Changes:
- Props renaming:
statusBarHeightOffet -> statusHeightOffet
textInputPlaceholderColor -> placeholderTextColor
minimized -> searchVisibleInitially
onBlur -> onSearchBlur
onFocus -> onSearchFocus
onMinimized -> onSearchHidden
onMaximized -> onSearchVisible
Improvements:
- Added public methods access via "ref"
Bug fixes:
Release Version 0.1.1 (01/23/2017)
Notes:
- Update to latest hyperflow version.
New Features:
Breaking Changes:
Improvements:
Bug fixes:
Release Version 0.1.0 (01/22/2017)
Notes:
- Initial commit with features
Search header component based on material design.
Search suggestions and history with autocomplete. patterns
New Features:
Breaking Changes:
Improvements:
Bug fixes: