react-native-js-material-searchbar

    0.0.1 • Public • Published

    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

    SearchBar

    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.

    Install

    npm i react-native-js-material-searchbar

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • apsl