CODEWITHSUNDEEP
reactjsnative
user2849167
user2849167

Reputation: 265

React Native - Do a search bar for ios or android

I've been searching for a search bar component for ios and android so i can use in my app. So far I have found none, that's why I want to make one. How can I show a view when I click a button? So when they click the search icon, the search bar appears. Or any way to do a search bar? Thank you!

Upvotes: 3

Views: 19100

Answers (3)

Minh Vo
Minh Vo

Reputation: 118

npm i react-native-element --save
//code here
state = {
 search: '',
};
updateSearch = search => {
  this.setState({search});
};
.... // some things here
<SearchBar
      onChangeText={this.updateSearch}
      value={search}
      lightTheme
      round
      showLoading
      placeholder="Search"
      icon={{type: 'font-awesome', name: 'search'}}
      cancelIcon={{type: 'font-awesome', name: 'cancelIcon'}}
      leftIconContainerStyle
      inputStyle={{backgroundColor: 'white'}}
      placeholderTextColor={'#g5g5g5'}
      platform="ios"
      cancelButtonTitle="Cancel"
      containerStyle={{
        backgroundColor: 'white',
        borderWidth: 0,
        borderRadius: 100,
      }}
      cancelButtonProps={{
        color: 'red', //color of text: Cancel
      }}
    />

Upvotes: 1

Bostrot
Bostrot

Reputation: 6033

react-native-elements 1.0.0-beta5 has a component for both iOS and Android searchbars. The current version SearchBar works with Android too but is without the Android style.

npm install --save [email protected]

<SearchBar
   showLoading
   platform="android"
   placeholder='Search' />

Then it looks like this: Android

Upvotes: 4

Vishwesh Jainkuniya
Vishwesh Jainkuniya

Reputation: 2839

There are many tutorials available on Internet`

Some of them

var SearchBar = require('react-native-search-bar');

and

<SearchBar
ref='searchBar'
placeholder='Search'
onChangeText={...}
onSearchButtonPress={...}
onCancelButtonPress={...}
/>

Some useful links

enter image description here

enter image description here

Upvotes: 4

Related Questions