How to change React Native cursor color?

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.

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>

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.

There is actually a prop doing this for TextInput : selectionColor

<TextInput
  selectionColor={'green'}
/>

Here is the documentation.

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

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

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....*/

Related