A React Native material search bar for Android that follows the Google's material design guidelines.
npm install react-native-js-material-searchbarA 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

``sh`
$ yarn add react-native-js-material-searchbar
Code refers to the previous image example:
`js
// @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 (
containerStyle={styles.containerStyle}
styleInput={styles.styleInput}
placeholderTextColor={'white'}
placeholder={I18n.t('Search')}
searchIcon={
closeIcon={
/>
)
}
}
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'
}
})
`
| 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 |react-native-vector-icons
| closeIcon | React.Element | The displayed close icon on the right of the text input. is supported | No |
| onChangeText | Function | Function executed when field's value is changed | |
MIT License
Copyright (c) 2018 InterfaceKit
Antonio Moreno Valls
Built with 💛 by APSL.