React Native Text Input Android Cursor/Caret and Text Cursor Color

Question

I'm struggling with the React Native Text Input component and can't seem to find a way to change the color of the cursor and the text selection indicators on android.

The official documentation only lists a prop for the selection color (the highlighted background of the text).

Is there any way to do this without changing it globally? And if changing it globally is the correct way to do it, what is the best way to do it? Change it in the styles.xml? React-Native crashes when i try to change that.

Answer 1

We Can change it for android in styles.xml file located at android/app/src/main/res/values/styles.xml

But, before that it's better to stop the NodeJS server, then make the below changes

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Customize your theme here. -->
        <item name="colorControlActivated">@android:color/white</item>
    </style>

</resources>

You can also add custom hex color codes by adding a colors.xml file in the same directory with the following code.

<resources>
    <color name="primaryRed">#EB1E27</color>
</resources>

Then in your styles.xml file you can reference that color with @color/primaryRed. Which would look something like this:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Customize your theme here. -->
        <item name="colorControlActivated">@color/primaryRed</item>
    </style>
</resources>

Once this is done, It is recommended to Re-build the project with Android studio, if the build is successful, then you can run react-native run-android.