CODEWITHSUNDEEP
iosreact-native
Yi Wang
Yi Wang

Reputation: 1005

How to change React Native cursor color?

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 ?

Upvotes: 70

Views: 71645

Answers (8)

Srikrishna
Srikrishna

Reputation: 11

selectionColor="red"

by using above code, you'll get red color of "|" in search box/text input.

For example :

<TextInput style={styles.searchInput}placeholder="Search Vehicle" placeholderTextColor="#868687" value={search} selectionColor="red" onChangeText={setSearch}/>

Upvotes: 1

Abhishek Bhardwaj
Abhishek Bhardwaj

Reputation: 1204

You can use:-

   cursorColor="color_name"

in the TextInput

Upvotes: 0

Muhammed Jasim T k
Muhammed Jasim T k

Reputation: 119

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

Upvotes: 0

Thomas Chafiol
Thomas Chafiol

Reputation: 2613

There is actually a prop doing this for TextInput : selectionColor

<TextInput
  selectionColor={'green'}
/>

Here is the documentation.

Upvotes: 240

crispengari
crispengari

Reputation: 9321

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

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

Upvotes: 10

apgsn
apgsn

Reputation: 751

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:

  1. 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;
  2. 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.

Upvotes: 17

Jo&#227;o Aguiar
Jo&#227;o Aguiar

Reputation: 455

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

Upvotes: 27

KChen
KChen

Reputation: 1918

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.

Upvotes: 5

Related Questions