CODEWITHSUNDEEP
iosreactjsreact-native
Mack
Mack

Reputation: 9

Custom style search bar in react-native

I am using react-native-search-bar for search thing. Can we change the style of the search bar instead of using default in iOS? If it's possible then how to change it? I am trying to find in node modules, but didn't get useful thing that I can change the style, if any one can help me out.

Thanks

Upvotes: 0

Views: 2553

Answers (1)

Brice Mason
Brice Mason

Reputation: 716

The best place to find the properties available to you is to review the propTypes definition here:

https://github.com/umhan35/react-native-search-bar/blob/master/SearchBar.js#L13

Here is a code sample you can play with to test out the style related properties of this component:

import React from 'react';
import {
  AppRegistry,
  View
} from 'react-native';

import SearchBar from 'react-native-search-bar';

class MyApp extends React.Component {
  render() {
    return(
      <View>
        <SearchBar
          barTintColor="red"
          tintColor="green"
          textColor="blue"
          textFieldBackgroundColor="pink"
          hideBackground={false}
          barStyle="default"
          searchBarStyle="default"
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

Upvotes: 1

Related Questions