How to style away the thin border in Google Maps Autocomplete search bar [React Native]

Question

I'm trying to create a borderless search bar from react-native-google-places-autocomplete but I can't seem to get the border or shadow or whatever it may be to disappear (image below).

Search bar rendering with border

This is the style code from the image. I've tried shadowOpacity: 0, translucent shadowColor, and setting a solid border with a translucent color.

styles = {{
            textInputContainer: {
                width: 370,
                backgroundColor: 'rgba(0,0,0,0)',
                borderColor: 'rgba(0,0,0,0)'
                }

Anyone out there successfully styled this border away? Thanks!

Answer 1

If you take a look at the way they implemented the search bar, you can see what are the default styles:

textInputContainer: {
  backgroundColor: '#C9C9CE',
  height: 44,
  borderTopColor: '#7e7e7e',
  borderBottomColor: '#b5b5b5',
  borderTopWidth: 1 / PixelRatio.get(),
  borderBottomWidth: 1 / PixelRatio.get(),
  flexDirection: 'row',
},

Then you will simply need to override them (as you tried):

textInputContainer: {
  borderTopWidth: 0,
  borderBottomWidth: 0,
  ...
},