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
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.
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
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- sets cursor color -->
I was *very* happy to see that it worked! Yay! Now we know how to style the
TextInput cursor on React Native Android.