CODEWITHSUNDEEP
react-nativestylesstylesheet
Chetan
Chetan

Reputation: 489

How can I get this Search Bar style in react-native-element?

It's basically the search bar component from react-native-elements where the container background color is white and the placeholder field has a border with radius.

Not sure if react-native-element allows providing style to placeholder. Any other way i could use style along with react-native-elements search bar component to get this result?

enter image description here

Upvotes: 7

Views: 26946

Answers (2)

Excellent Lawrence
Excellent Lawrence

Reputation: 1104

I made a combination of the answers here

 <SearchBar
    inputStyle={{backgroundColor: 'white'}}
    containerStyle={{backgroundColor: 'white', borderWidth: 1, borderRadius: 5}}
    inputContainerStyle={{backgroundColor: 'white'}}
    placeholderTextColor={'#g5g5g5'}
    placeholder={'Pritish Vaidya'}

/>

Upvotes: 2

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You need to modify the input and container styles

 <SearchBar
    inputStyle={{backgroundColor: 'white'}}
    containerStyle={{backgroundColor: 'white', borderWidth: 1, borderRadius: 5}}
    placeholderTextColor={'#g5g5g5'}
    placeholder={'Pritish Vaidya'}
/>

Check the docs for more props and you can supply your own Icon

Upvotes: 20

Related Questions