React Native elements searchbar border lines not clearing

Question

I'm working with React Native elements searchbar and am struggling to get these two little lines on the top and bottom to go away - I can't figure out what they are:

Weirdly formatted Searchbar image here

This is my searchbar code:

    <SearchBar placeholder="Search contacts..." 
        data={this.state.searchResultFriendsList}
        ref={(ref) => this.searchBar = ref}
        style= {styles.searchbar} 
        lightTheme round 
        containerStyle={styles.searchcontainer}
    />

And here are my two style snippets:

searchcontainer: {
    backgroundColor: 'white',
    borderWidth: 0, //no effect
    shadowColor: 'white', //no effect
},
searchbar: {
    width: "100%",
    backgroundColor: 'red', //no effect
    borderWidth:0, //no effect
    shadowColor: 'white', //no effect
},

If I change the theme from lightTheme to the default, the lines become darker grey so I know it's related to the SearchBar element itself but hasn't been able to get rid of it by changing the border or shadow.

Wondering if anyone has experienced anything like this before, thanks in advance!

score 53 · Accepted Answer · answered Mar 22 '18 at 18:21

Use borderBottomColor and borderTopColor as transparent with searchcontainer

searchcontainer: {
 backgroundColor: 'white',
 borderWidth: 0, //no effect
 shadowColor: 'white', //no effect
 borderBottomColor: 'transparent',
 borderTopColor: 'transparent'
}

Hope this will help

score 5 · Answer 2 · answered Jan 13 '21 at 08:31

5

For anyone else looking to remove those borders try setting the width of every border separately:

containerStyle={{
    borderWidth: 0, //no effect
    borderTopWidth: 0, //works
    borderBottomWidth: 0, //works
}}

answered Jan 13 '21 at 08:31

Getsumi3

211
2
10

score 4 · Answer 3 · answered Jun 25 '18 at 13:45

4

in new version of react native elements

containerStyle={{
    backgroundColor:"#FBFBFB",
    borderBottomColor: 'transparent',
    borderTopColor: 'transparent'
}}

answered Jun 25 '18 at 13:45

Mahdi Bashirpour

17,147
12
117
144

score 0 · Answer 4 · answered Jul 31 '20 at 12:39

Full Code :

import {SearchBar} from 'react-native-elements';

<SearchBar
            placeholder="Rechercher"
            onChangeText={this.updateSearch}
            value={search}
            containerStyle={styles.searchBarContainer}
            inputContainerStyle={styles.searchBarInputContainer}
            inputStyle={styles.searchBarInputStyle}
            leftIconContainerStyle={styles.searchBarLeftIconContainer}
            rightIconContainerStyle={styles.searchBarRightIconContainer}
            lightTheme
            placeholderTextColor={styles.placeholderText}
            round
            showCancel
            underlineColorAndroid={styles.placeholderText}
            cancelButtonTitle
            searchIcon={() => <Image source={searchIcon} style={styles.search} />}
          />

searchBarContainer: {
    backgroundColor: COLORS.SEARCHBAR,
    alignSelf: 'center',
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',
    borderBottomColor: 'transparent',
    borderTopColor: 'transparent',
  },

React Native elements searchbar border lines not clearing

4 Answers4