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

Question

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?

Solution 1

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

Solution 2

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'}

/>

Comments

[iOSDev]

you have to add "inputContainerStyle={{backgroundColor: 'white'}}".

[Sagar]

search bar clear button shows only on test type how to show always