React-native android Styling textInput

Is there a way to style the textInput in react-native android? Like change the underlineColor when selected and the cursor color?

As of React Native version 0.21, there is still no way to style the cursor color via view props. I have successfully styled the cursor color by adding a custom style to my app theme.

You will want to place this code in the styles.xml file, which is located in the android folder of your React project, at android/app/src/main/res/values/styles.xml.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- typical material style colors --> 
        <item name="colorPrimary">@color/kio_turquoise</item>
        <item name="colorPrimaryDark">@color/kio_hot_pink</item>

        <!-- sets cursor color -->
        <item name="colorControlActivated">@android:color/black</item>
     </style>
</resources>

Note that this style is global, and will set the cursor color for all Android TextInput views in your React Native app.

For the underline color you can use underlineColorAndroid property: https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L290

See example: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TextInputExample.android.js#L222

For cursor color there is no such property exposed at the moment. You can always use custom android theme for your app if you want to change that globally for all textviews in your app (read more here: http://developer.android.com/guide/topics/ui/themes.html)

Besides implementing @Kio Krofovitch solution I also made color.xml file in the same ../res/values folder in which I wrote something like:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="orange">#ff5500</color>
    <color name="articlecolor">#3399FF</color>
    <color name="article_title">#3399FF</color>
    <color name="cachecolor">#8ad0e8</color>
</resources>

and then accordingly edited the styles.xml as follows:

         ...
        <item name="colorControlActivated">@color/orange</item>
     </style>
</resources>

There is actually a prop doing this for TextInput :

• selectionColor (to change cursor color as well as selection color)

• underlineColorAndroid (to change the underline color of textInput in Android)

  <TextInput
      underlineColorAndroid="#FF0000"
      selectionColor="rgba(0,0,0,0.4)"
  />
  

Here is the documentation.