react-native-searchbar

A pretty awesome search bar for React Native. It has a built in simple search capability which can be utilised by handing the component data and providing a handleResults function which will receive the filtered copy of the data array.

The search function uses a depth-first algorithm to traverse the data and simply looks for an indexOf the user input within all strings, numbers, and boolean values in the data.

Works on both iOS and Android.

(Rendered with the example in these docs and repository)

Installation

• npm install react-native-searchbar --save
• Install react-native-vector-icons if the project doesn't have them already. The search bar accesses MaterialIcons.
• Now you can require the search bar with import SearchBar from 'react-native-searchbar' or var SearchBar = require('react-native-searchbar')

Available Props

Usage

• Use a ref to show and hide the search bar and set the text input valueref={(ref) => this.searchBar = ref}

  • this.searchBar.show()
  • this.searchBar.hide()
  • this.searchBar.setValue("text to set")

• Write your own search logic with handleSearch or provide some data and use the results handed back from handleResults.

• Use your powers for good!

Notes for Android

• Render the search bar component after the component it is supposed to display over. iOS handles this nicely with a zIndex of 10. Android elevation is set to 2.
• The bottom of the search bar will have a thin border instead of a shadow.

Example

Full example at example/

import SearchBar from 'react-native-searchbar';

const items = [
  1337,
  'janeway',
  {
    lots: 'of',
    different: {
      types: 0,
      data: false,
      that: {
        can: {
          be: {
            quite: {
              complex: {
                hidden: [ 'gold!' ],
              },
            },
          },
        },
      },
    },
  },
  [ 4, 2, 'tree' ],
];

...
_handleResults(results) {
  this.setState({ results });
}
...

...
<SearchBar
  ref={(ref) => this.searchBar = ref}
  data={items}
  handleResults={this._handleResults}
  showOnLoad
/>
...

Contributing

Contributing to react-native-searchbar is easy! With four simple steps:

Create a branch

1. Fork the repository
2. git clone <your-repo-url> to clone your GitHub repo to your local one
3. git pull origin master to pull the latest code
4. npm install to install the project's dependencies
5. git checkout -b the-name-of-my-branch to create a branch (use something short and comprehensible, such as: fix-styling-of-search-bar).

Make the change

Test the change

1. Run npm run fix from the project root (This will run Prettier and ESLint and automatically fix any issues).
2. If possible, test any visual changes in Android and iOS.

Push the change!

1. git add -A && git commit -m "My message" (replacing My message with a commit message, such as Fixed styling on search bar) to stage and commit your changes
2. git push my-fork-name the-name-of-my-branch