React Native on Android: Styling the Cursor

As you may have noticed by recent tweets, I’ve been exploring a little React Native.  I’ve got a few massive overview posts in the making, but for now I just wanted to share a quick tip about styling.

Recently I was trying to style an `EditText`, which is called `TextInput` in the world of React Native.

You can see from that doc, there are a lot of styling options for `TextInput`, and I was hoping to style the cursor, highlighting, and underline color.  At first it looked like I just needed to set `underlineColorAndroid` and `selectionColor`, but then I noticed that `selectionColor` only changes the cursor color on iOS. Bummer!  I set those items and confirmed that sure enough my cursor was not the desired color.

render(){
  return (
    <TextInput
      selectionColor={Colors.gray}
      underlineColorAndroid={Colors.black}
      onChangeText={onChangeText}
    />
 );
}

I had learned earlier that the React Native implementation of `TextInput` for Android actually does inherit from native Android `EditText`, so I had an idea: what if I set the `EditText` cursor color as a native Android style? It just might work.

React Native is intended to be written using their Javascript library and CSS-like styling.  However the backbone of the app is still a native Android application.  So if you need, you can jump into native Android world and implement something.  It isn’t always clear how to connect the two worlds, but in my case of `EditText` I was hoping it would be pretty straightforward. As long as nothing in the `TextInput` class overrode styles inherited from `EditText` we should be good.

I found that `colorControlActivated` was the native Android item I needed to set for cursor color, so I set that in my `styles.xml`.  For those of you that aren’t Android developers, the `styles.xml` file 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">
        <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>

I was *very* happy to see that it worked! Yay! Now we know how to style the `TextInput` cursor on React Native Android.