react-native-material-design-searchbar

A React Native Material Design SearchBar

Setup

Install the SearchBar from npm with npm i -S react-native-material-design-searchbar. Then, require it from your app's JavaScript files with import SearchBar from 'react-native-material-design-searchbar'. This library depends on react-native-vector-icons. Please link it by following their installation guide.

Usage

All props are optional except height.

import React, { Component } from 'react';
import SearchBar from 'react-native-material-design-searchbar';

export default class ExampleComponent extends Component {
  render() {
    return (
      <SearchBar
        onSearchChange={() => console.log('On Focus')}
        height={50}
        onFocus={() => console.log('On Focus')}
        onBlur={() => console.log('On Blur')}
        placeholder={'Search...'}
        autoCorrect={false}
        padding={5}
        returnKeyType={'search'}
      />
    );
  }
};

Available Props

• onSearchChange: Callback on search change
• iconCloseName: Optional string, use it to customize the close icon
• iconSearchName: Optional string, use it to customize the search icon
• iconBackName: Optional string, use it to customize the back icon
• iconColor: Optional string, use it to define a different padding size, default is #737373
• placeholder: Optional string, use it to customize the placeholder text, default is eSearch...
• placeholderColor: Optional string, use it to define a different placeholder color, default is #bdbdbd
• returnKeyType: Optional string, use it to customize the return key type
• padding: Optional string, use it to define a different padding size, default is 5
• inputStyle: Optional string, use it to pass your style to the TextInput
• inputProps: Optional object, use it to pass additional props to the TextInput, for example {autoFocus: true}

The React packager will include the SearchBar component in your app's JS package and make it available for your app to use.

Contributing

Contributions are welcome.

LICENSE

MIT