How to change React Native cursor color?

Question

I am using React Native and I would like to change the cursor color of a text input. I actually got the default blue color.

How can I set a global color either in JavaScript or in AppDelegate ?

what do you mean by cursor color? the color of the highlight on an input? the color of your mouse cursor when hovering over an input? the color of the text input caret where you type letters? — John Ruddell, Oct 13 '15 at 05:33

Thomas Chafiol · Answer 1 · 2021-07-21T13:09:53.487

218

There is actually a prop doing this for TextInput : selectionColor

<TextInput
  selectionColor={'green'}
/>

Here is the documentation.

edited Jul 21 '21 at 13:09

answered Sep 21 '16 at 14:06

Thomas Chafiol

2,395
1
13
16

4

Indeed it should be the accepted answer. I'm trying to avoid using native code at the moment, and having to go native to change the color of a text input is ridiculous. – Doug Watkins May 19 '18 at 03:47
6

currently the 'selectionColor' applies as a backgroud when you select the text – ramashish tomar May 03 '19 at 09:02
It only changes the cursor for iOS in current 0.63.4. – Henrique Bruno Dec 20 '20 at 07:16
when using with current expo project, works with ios and android, but not react native web (for react native web if use tailwindcss-react-native, can use something like "caret-black") – Ammar Faris Jun 15 '22 at 08:12

score 27 · Answer 2 · answered Jan 11 '18 at 14:37

27

Best way to accomplish this, if you want consistence trough the app is putting the bellow code in your root file (index.js)

import { TextInput } from 'react-native'
TextInput.defaultProps.selectionColor = 'white'

/*class....*/

answered Jan 11 '18 at 14:37

João Aguiar

455
5
2

apgsn · Answer 3 · 2020-08-14T09:33:27.870

Many here suggested using selectionColor:

import {TextInput} from 'react-native';
TextInput.defaultProps.selectionColor = 'red';

As of RN 0.63, this solution is still inefficient for at least two reasons:

On Android, highlighted text gets the same bright color as the cursor, and the drop-shaped guides below highlighted text are still stuck with the default color;
Any input field or textarea embedded in WebView components will get the default cursor color on both platforms.

Therefore, the right way to change the cursor color is by editing the native settings instead.

Android

Go to android/app/src/main/res/values/styles.xml and add the following lines to the custom section:

<item name="android:colorControlActivated">#FF0000</item>
<item name="android:textColorHighlight">#FF9999</item>

iOS

Go to ios/MyApp/AppDelegate.m and before [self.window makeKeyAndVisible]; add:

self.window.tintColor = [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1];

Finally, rebuild the apps to see the result of your edits.

This is the perfect solution. Why using props everywhere when we can do it with two lines for the entire app. — Sanan Ali, Nov 30 '20 at 20:16

score 9 · Answer 4 · answered Sep 07 '20 at 21:03

9

You can just change the cursor color by changing the selection color according to the documentation as shown bellow,

<Input 
  ...
  selectionColor={"black"}
 />

answered Sep 07 '20 at 21:03

crispengari

7,901
7
45
53

It's not work on Android – Shi Quan Aug 18 '22 at 13:36

score 5 · Accepted Answer · answered Oct 13 '15 at 06:49

5

Yes, we can do it by setting tint color.

In AppDelegate.m of project.

Adding the below code between self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; and [self.window makeKeyAndVisible];, you can change the global tint color.

self.window.tintColor = [UIColor redColor]; // Here is your color.

Or, adding the below code after [self.window makeKeyAndVisible];, you can change the tint color of TextInput/UITextField.

[[UITextField appearance] setTintColor:[UIColor redColor]];

Nothing happens when you change the UITextView's tint color.

And I couldn't find a way to implement it with a style of JaveScript.

answered Oct 13 '15 at 06:49

KChen

1,922
14
15

1

In case someone wants to add a hex color, you can use [this site](http://uicolor.io/#/hex-to-ui) to convert from hex to iOS UIColor. – eyal83 Oct 25 '15 at 09:49
Has anyone figured out how to do this on Android? – yura Jan 19 '16 at 19:19
1

For Android see http://stackoverflow.com/questions/32752902/react-native-android-styling-textinput. Adding support for tintColor for both platforms is an open issue here: https://github.com/facebook/react-native/issues/1685. – Lane Rettig Feb 19 '16 at 19:41
That color converter link doesn't work, try this one: http://www.touch-code-magazine.com/web-color-to-uicolor-convertor/ (or use a macro per http://stackoverflow.com/questions/1560081/how-can-i-create-a-uicolor-from-a-hex-string) – Lane Rettig Feb 19 '16 at 19:46
You should remember that selectionColor also changes color of selection and not only cursor! – Tony Aug 31 '19 at 22:12
This solution is easy and fast. – HyopeR Dec 16 '21 at 16:07

score 0 · Answer 6 · answered Nov 17 '21 at 19:27

For React Native 0.62 +

import {TextInput } from 'react-native'

TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.selectionColor = 'transparent';

Add these line before Main function call in App.js

Eg :-

..Other code

TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.selectionColor = 'transparent';

const App = () => {

...Other code

score 0 · Answer 7 · answered Nov 10 '22 at 06:23

0

You can use:-

   cursorColor="color_name"

in the TextInput

answered Nov 10 '22 at 06:23

Abhishek Bhardwaj

1,164
3
14
39

How to change React Native cursor color?

7 Answers7

Android

iOS