react-native-js-material-searchbar

A React Native material search bar for Android that follows the Google's material design guidelines. See more on: https://material.io/guidelines/patterns/search.html#search-in-app-search

Getting started

$ yarn add react-native-js-material-searchbar

Usage

Code refers to the previous image example:

// @flow */
 
import React from 'react'
import { AppRegistry, StyleSheet, View } from 'react-native'
import MaterialSearchBar from 'react-native-js-material-searchbar'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 
export default class Example extends React.PureComponent {
  _onTextDidChange = (text: string) => {
    console.log(text)
  }
 
  render() {
    return (
      <View style={styles.container}>
        <MaterialSearchBar
          onChangeText={this._onTextDidChange}
          containerStyle={styles.containerStyle}
          styleInput={styles.styleInput}
          placeholderTextColor={'white'}
          placeholder={I18n.t('Search')}
          searchIcon={<MaterialIcons name="search" size={24} color={'white'} />}
          closeIcon={<MaterialIcons name="close" size={24} color={'white'} />}
        />
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  containerStyle: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'orange',
    elevation: 8,
    paddingHorizontal: 12
  },
  styleInput: {
    flex: 1,
    height: 56,
    color: 'white',
    fontSize: 20,
    fontFamily: 'Roboto'
  }
})

API

Props	Type	Description	Required
containerStyle	Object		No
styleInput	Object	Inline-styles of the style input	No
searchIcon	React.Element	The displayed search icon on the right of the text input. react-native-vector-icons is supported	No
closeIcon	React.Element	The displayed close icon on the right of the text input. react-native-vector-icons is supported	No
onChangeText	Function	Function executed when field's value is changed

License

MIT License

Copyright (c) 2018 InterfaceKit

Author

Antonio Moreno Valls <amoreno at apsl.net>

Built with 💛 by APSL.