CODEWITHSUNDEEP
javascripthtmlreactjsreact-nativeuser-interface
Saikat Saha
Saikat Saha

Reputation: 838

Customizing { SearchBar } from 'react-native-elements' as per below image

I'm trying to change the styling of searchbar using 'react-native-elements', fuctionality wise it's working but for styling, I'm facing some issues

My Image enter image description here

Expected Image enter image description here

My Code:

            <SearchBar
              //searchIcon={{ size: 24 }}
              onChangeText={text => this.testFilter(text)}
              onClear={text => this.testFilter('')}
              inputStyle={{ backgroundColor: 'white' }}
              containerStyle={{ backgroundColor: '#FFFFFF', borderWidth: 0, marginLeft: 50 }}
              inputContainerStyle={{ backgroundColor: '#FFFFFF' }}
              placeholderTextColor={'#g5g5g5'}
              placeholder={'Search...'}
              clearIcon={false}
              searchIcon={false}
              value={this.state.test}
            />

How can I achieve the same styling using the Searchbar component

Upvotes: 1

Views: 1256

Answers (2)

Saikat Saha
Saikat Saha

Reputation: 838

Managed to meet the requirement after making some changes with some logics and stylings

Upvotes: -2

kenmistry
kenmistry

Reputation: 2143

have you tried adding inputContainerStyle prop like this?

inputContainerStyle={{ backgroundColor: 'white' }}

you also should look at searchIcon and cancelIcon props to restyle the icons used in the default SearchBar component.

Upvotes: 1

Related Questions