Search code examples
react-nativereact-native-textinputreact-native-stylesheet

React Native (Expo) TextInput : style changes when selecting a suggestion provided by Android

Looking for a solution for this problem since 2 days and the internet didn't provide me with a solution for the first time of my life, so this is my first post on StackOverflow :)

So, I'm building a react-native (0.59.8) app with Expo (3.4.1), testing with Android 9.1.

I have an email TextInput that looks like that :

const style = {
  backgroundColor: '#181818',
  color: '#fafafa',
  width: '100%',
  borderColor: $primary,
  borderWidth: 1,
  borderRadius: 4,
  marginBottom: 16,
  padding: 8,
};

return (
  <TextInput
    placeholder="Email"
    keyboardType="email-address"
    autoCompleteType="email"
    style={style.input}
    autoCorrect={false}
    selectionColor={$primary}
  />
);

The TextInput is first shown as expected, and there are no problems when I fill it manually (typing my email address).

But, when I select an Android suggestion, the TextInput style changes (colour become light yellow, backgroundColor become yellow/green, and borderColor become orange) that is a bit ugly :/.

It looks like the behaviour is the same as -webkit-text-fill-color in standard CSS, but can't find the counterpart in RN.

Thanks for your help :)

Solution

  • https://developer.android.com/guide/topics/text/autofill-optimize#highlighted

    You can customized the styling using the android xml files. See here for more details.