SearchBox

A pretty awesome search bar for React Native.

Installation

yarn add react-native-searchbox-1

or

npm i react-native-searchbox-1

Available Props

Property	Description
placeholder	The placeholder for the search bar.
style	Sets the style for searchBox.
placeHolderStyling	Sets style for placeHolder.
placeholderTextColor	Sets color of placeHolder.
onChangeText	Used to write search logic .
clearStyling	Sets style for clear Button

Usage

• Write your own search logic with onChangeText and use the results handed back from onChangeText.
• Use your powers for good!

Example

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  FlatList
} from 'react-native';

import SearchBox from 'react-native-searchbox-1';

class App extends React.Component {

   state={
      list : ['Apple','Apricot','Avocdo','Banana'],
      resultList : []
    }

    filterSearch = (text) => {
        const searchingText = text.toUpperCase()
        const upperCaseList = []
        for(let i=0;i<this.state.list.length;i++)
        {
          upperCaseList.push(this.state.list[i].toUpperCase())
        }
        const filteredList = upperCaseList.filter(word => word.indexOf(searchingText)>-1)
        this.setState({
          resultList: filteredList
        })
    }

render(){
  return (
   <View>
     <SearchBox style={styles.searchBox} 
     onChangeText={(text) => this.filterSearch(text)}/>
     <FlatList 
     data = {this.state.resultList}
     renderItem = {({item}) => (
        <View style={styles.view}>
        <Text>{item}</Text>
        </View>
     )}/>
   </View>
  )
}}

const styles = StyleSheet.create({
    searchBox: {
        marginTop: 20
    },
    view: {
        borderColor: 'black',
        borderWidth: 2,
        padding: 8,
        marginTop: 10,
        alignItems: 'center'
    }
});

export default App;