npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-search-header

v0.3.5

Published

A react native search header component based on material design patterns.

Downloads

390

Readme

react-native-seach-header

npm version npm downloads

Easy to use React Native search header component based on material design patterns.

demo

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:

License

MIT licensed.