React Native on Android: Styling the Cursor

android-logo react-logo

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.

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.

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

This entry was posted in Android, React Native, UI. Bookmark the permalink.

4 Responses to React Native on Android: Styling the Cursor

  1. Sriraman says:

    Thanks, You saved my time. 🙂

  2. shalini says:

    how to remove underline in textbox

  3. PNB says:

    React native TextInput allows to copy & paste text in android, wanted to disable this TextInput capability, any suggestion?

  4. wabbalabba says:

    so i take it the issue was not resolved with iOS?

Leave a Reply

Your email address will not be published. Required fields are marked *