CODEWITHSUNDEEP
react-native
alberta
alberta

Reputation: 235

React Native elements searchbar border lines not clearing

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!

Upvotes: 22

Views: 10157

Answers (4)

Getsumi3
Getsumi3

Reputation: 361

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

Upvotes: 6

Khaled Boussoffara
Khaled Boussoffara

Reputation: 1771

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

Upvotes: 0

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18863

in new version of react native elements

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

Upvotes: 4

Prasun
Prasun

Reputation: 5023

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

Upvotes: 54

Related Questions