React-native android Styling textInput

Question

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

Answer 1

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.

Answer 2

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)