https://github.com/ananddayalan/react-native-material-design-searchbar

react native material design searchbar
https://github.com/ananddayalan/react-native-material-design-searchbar

find material-design mdl react react-native search searchbar searchinput

Last synced: 3 months ago
JSON representation

react native material design searchbar

• Host: GitHub
• URL: https://github.com/ananddayalan/react-native-material-design-searchbar
• Owner: ananddayalan
• License: mit
• Created: 2016-08-07T23:41:48.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-11-18T23:02:01.000Z (about 5 years ago)
• Last Synced: 2024-11-06T19:17:25.833Z (3 months ago)
• Topics: find, material-design, mdl, react, react-native, search, searchbar, searchinput
• Language: JavaScript
• Size: 33.2 KB
• Stars: 51
• Watchers: 4
• Forks: 31
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - react-native-material-design-searchbar - Material design Searchbar (React Native / Components React Native)

README

        
# 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](https://github.com/oblador/react-native-vector-icons). Please link it by following their installation guide.

# Usage

All props are optional except height.

```js

import React, { Component } from 'react';

import SearchBar from 'react-native-material-design-searchbar';

export default class ExampleComponent extends Component {

  render() {

    return (

       console.log('On Search Change')}

        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

- `onClear`: Callback when the 'X' button is pressed. This also calls `onSearchChange` with an empty string.

- `searchValue`: Initializes the input field. Changing this prop does not change the input value.

- `onBackPress`: Optional function, Callback on back icon pressed

- `alwaysShowBackButton`: Optional bool, use if you want to always show the back button instead of search, default is `false`

- `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

- `iconCloseComponent`: Optional object, custom component for the close icon (overrides iconCloseName)

- `iconSearchComponent`: Optional object, custom component for the search icon (overrides iconSearchName)

- `iconBackComponent`: Optional object, custom component for the back icon (overrides iconBackName)

- `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 containing `View`

- `inputProps`: Optional object, use it to pass additional props to the `TextInput`, for example `{autoFocus: true}`

- `textStyle`: Optional string, use it to pass your style to the `TextInput`

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