Change the background color of textInput highlight (autocomplete) on react-native

Question

How can I change this background color of TextInput when it got highlight from the autoCompleteType that already exists on react native? like on this image

Lupita

Answer 1

To customize this autofill bg color, you have to set this at android level.

1. Create a xml file with the name of your choice, for example autofill_highlight.xml in android/app/src/main/res/drawable

2. Put this code inside :

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android">
       <solid android:color="@android:color/transparent" />
   </shape>
   

   Here, the color set is transparent ("@android:color/transparent"), replace it with your color.

3. In android/app/src/main/res/values/styles.xml, add this line to your app theme (make sure to provide your own file name if you don't call it autofill_highlight like in my example)

   <resources>
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   
            <!-- ... your other theme customization ...  -->
   
            <!-- ADD THE FOLLOWING LINE -->
            <item name="android:autofilledHighlight">@drawable/autofill_highlight</item>
   
       </style>
   </resources>
   

4. Rebuild your application :)

Eugeneeugenia