CODEWITHSUNDEEP
cssreact-nativereact-native-ios
Chetan
Chetan

Reputation: 489

how to i make changes in appearance of react-native-element search bar

enter image description here

In the image above half of the search box is cut off, how do i make the search box fit within the view. Search box is inside one view and the region below that where "Home Page is written is inside another view.

Also I don't want the big transparent border for the search box. How do I get rid of the transparent region?

<View style={styles.screenHeaderContainerBelow}>
            <SearchBar
                lightTheme
                containerStyle={{flex:1, height:undefined}}
                onChangeText={() => {}}
                placeholder='Type Here...' />
            </View>
        </View>

Upvotes: 0

Views: 3735

Answers (1)

Pat Needham
Pat Needham

Reputation: 5918

I copied the four examples from the documentation for SearchBar, and got the bottom one's big transparent border to go away by adding the prop inputStyle={{margin: 0}} as well as noIcon to make the formatting look better:

<SearchBar
          lightTheme
          noIcon
          inputStyle={{margin: 0}}
          onChangeText={someMethod}
          placeholder='Type Here...' />

enter image description here

Try taking out containerStyle={{flex:1, height:undefined}} to see if that fixes the problem of half the search box being cut off.

Upvotes: 1

Related Questions