<commit_before># react-native-seach-header
[![npm version](https://img.shields.io/npm/v/react-native-search-header.svg?style=flat)](https://www.npmjs.com/package/react-native-search-header)
[![npm downloads](https://img.shields.io/npm/dm/react-native-search-header.svg?style=flat-square)](https://www.npmjs.com/package/react-native-search-header)

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

![demo](/demo.gif)

## Installation

`$ npm install react-native-search-header --save`

## Usage

To use search header you simply import the component factory function to create a renderable component:

```js
import SearchHeaderComponent from 'react-native-search-header';
```

### Examples

To use search header you simply import the component factory function to create a renderable component:

```js
import React, { Component } 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`
    }
});

export default class Demo extends Component {
    constructor (props) {
        super(props);
    }
    render () {
        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 = {() => this.searchHeader.show()}
                    />
                </View>
                <SearchHeader
                    ref = {(searchHeader) => {
                        this.searchHeader = searchHeader;
                    }}
                    onGetSearchAutocompletions = {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 = {() => this.searchHeader.show()}
                    />
                </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 | Search text input color.
headerBgColor | string | #5d5d5d | Search text input color.
inputColor | string | #5d5d5d | Search text input 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 | 21 | The offset above the SearchHeader component. Usually where the phone status is.
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.<commit_msg>Update to version 0.2.5<commit_after># react-native-seach-header
[![npm version](https://img.shields.io/npm/v/react-native-search-header.svg?style=flat)](https://www.npmjs.com/package/react-native-search-header)
[![npm downloads](https://img.shields.io/npm/dm/react-native-search-header.svg?style=flat-square)](https://www.npmjs.com/package/react-native-search-header)

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

![demo](/demo.gif)

## Installation

`$ npm install react-native-search-header --save`

## Usage

To use search header you simply import the component factory function to create a renderable component:

```js
import SearchHeaderComponent from 'react-native-search-header';
```

### Examples

To use search header you simply import the component factory function to create a renderable component:

```js
import React, { Component } 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`
    }
});

export default class Demo extends Component {
    constructor (props) {
        super(props);
    }
    render () {
        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 = {() => this.searchHeader.show()}
                    />
                </View>
                <SearchHeader
                    ref = {(searchHeader) => {
                        this.searchHeader = searchHeader;
                    }}
                    onGetSearchAutocompletions = {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 = {() => this.searchHeader.show()}
                    />
                </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.
placeholderColor | string | #bdbdbd | Text input placeholder color.
suggestionEntryColor | string | #bdbdbd | Search suggestion text color.
iconColor | string | #5d5d5d | SearchHeader component icon button color.
topOffset | number | 21 | The offset above the SearchHeader component. Usually where the phone status is.
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.
{'fraction_non_alphanumeric': 0.11061604029445951, 'fraction_numerical': 0.011139093374660984, 'mean_word_length': 1.8728436282693377, 'pattern_counts': {'":': 2, '<': 29, '<?xml version=': 0, '>': 39, 'https://': 8, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4751333', 'n_tokens_mistral': 2840, 'n_tokens_neox': 2662, 'n_words': 800}