https://github.com/interfacekit/react-native-js-material-searchbar
A React Native material search bar that follows the Google's material design guidelines
https://github.com/interfacekit/react-native-js-material-searchbar
Last synced: about 1 year ago
JSON representation
A React Native material search bar that follows the Google's material design guidelines
- Host: GitHub
- URL: https://github.com/interfacekit/react-native-js-material-searchbar
- Owner: InterfaceKit
- License: mit
- Created: 2018-01-10T09:45:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-05T14:31:06.000Z (over 8 years ago)
- Last Synced: 2025-04-19T10:24:52.579Z (about 1 year ago)
- Language: JavaScript
- Size: 171 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```sh
$ yarn add react-native-js-material-searchbar
```
## Usage
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 (
}
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'
}
})
```
## 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 ``
Built with 💛 by [APSL](https://github.com/apsl).