README
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:
import React from 'react';
import {
Dimensions,
AppRegistry,
StyleSheet,
View,
Text,
Button,
StatusBar
} from 'react-native';
import SearchHeader from 'react-native-search-header';
const DEVICE_WIDTH = Dimensions.get(`window`).width;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#f5fcff'
},
status: {
zIndex: 10,
elevation: 2,
width: DEVICE_WIDTH,
height: 21,
backgroundColor: '#0097a7'
},
header: {
justifyContent: 'center',
alignItems: 'center',
width: DEVICE_WIDTH,
height: 56,
marginBottom: 6,
backgroundColor: '#00bcd4'
},
label: {
flexGrow: 1,
fontSize: 20,
fontWeight: `600`,
textAlign: `left`,
marginVertical: 8,
paddingVertical: 3,
color: `#f5fcff`,
backgroundColor: `transparent`
},
button: {
justifyContent: 'center',
alignItems: 'center',
width: 130,
height: 40,
marginTop: 40,
borderRadius: 2,
backgroundColor: `#ff5722`
}
});
const Demo = () => {
const searchHeaderRef = React.useRef(null);
return (
<View style = { styles.container }>
<StatusBar barStyle = 'light-content' />
<View style = { styles.status }/>
<View style = { styles.header }>
<Text style = { styles.label }> Demo </Text>
<Button
title = 'Search'
color = '#f5fcff'
onPress = {() => searchHeaderRef.current.show()}
/>
</View>
<SearchHeader
ref = { searchHeaderRef }
placeholder = 'Search...'
placeholderColor = 'gray'
pinnedSuggestions = {[ `react-native-search-header`, `react-native`, `javascript` ]}
onClear = {() => {
console.log(`Clearing input!`);
}}
onGetAutocompletions = {async (text) => {
if (text) {
const response = await fetch(`http://suggestqueries.google.com/complete/search?client=firefox&q=${text}`, {
method: `get`
});
const data = await response.json();
return data[1];
} else {
return [];
}
}}
/>
<View style = { styles.button }>
<Button
title = 'Open Search'
color = '#f5fcff'
onPress = {() => searchHeaderRef.current.show()}
/>
</View>
<View style = { styles.button }>
<Button
title = 'Clear'
color = '#f5fcff'
onPress = {() => {
searchHeaderRef.current.clear();
}}
/>
</View>
</View>
);
}
AppRegistry.registerComponent('Demo', () => Demo);
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: