React native google places autocomplete style is ignored

Question

I am trying to implement react native google places autocomplete and it works on emulator. However when i try to test it with my android phone, the text and placeholder in the searchbar is white, so its like the text in invisible. I tried to change the style with :

export const homeStyle = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "black",
    paddingTop: 5,
  },
  map: {
    width: width,
    height: height,
    position: "absolute",
  },
  settings: {
    position: "absolute",
    bottom: 0,
    right: 0,
  },
  searchBar: {
    textInputContainer: {
      backgroundColor: "rgba(0,0,0,0)",
      borderTopWidth: 0,
      borderBottomWidth: 0,
    },
    textInput: {
      marginLeft: 0,
      marginRight: 0,
      height: 38,
      color: "black",
      fontSize: 16,
    },
  },
}

But, i realized that most of the things that i try to change in the style doesn't work. Here is the code :

<SafeAreaView style={homeStyle.container}>
      <MapView
        style={homeStyle.map}
        initialRegion={region}
        showsUserLocation={true}
        showsMyLocationButton={false}
        testID={"home-map"}
      />
      <GooglePlacesAutocomplete
        style={homeStyle.searchBar}
        placeholder="Search"
        query={{
          key: "API_KEY",
          language: "en",
        }}
        onPress={(data, details = null) => {
          console.log(data);
        }}
      />
      <IconButton
        icon="cog"
        size={30}
        style={homeStyle.settings}
        onPress={() => {
            settings();
          }
        }
        testID={"home-settings-button"}
      />
    </SafeAreaView>

So the problem is that i can't change the style of the GooglePlacesAutocomplete component, as well as the fact that on my android phone the text is white while on emulator it's black, and that was even before i tried to change the styles.

Answer 1

i also have the same issue. only thing i can help is that in GooglePlacesAutocomplete you need to enter styles={} insted of style={}. and if you want to change stuff only of the text input you need to do it like this

<GooglePlacesAutocomplete
                styles={{
                    textInput:{height:'100%',backgroundColor: '#eee', 
                    marginVertical: 5 }
                }}
...
/>

this helped me a lot, but i dont know how to change the placeholder text color or the text color of what you write and the autocomplete suggestions

edit: https://blog.logrocket.com/google-places-autocomplete-components-react-native/ this page explains very well how to use the styles