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!

Answer 1

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