How to change the cursor color of input field in React native?

For Android apps, you can change the cursor color of input field in React Native. <TextInput> component has a prop cursorColor which accepts a color value. Setting it will start displaying the blinking cursor in different color.

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, View } from "react-native";

const CursorColorTextInput = () => {
  const [text, onChangeText] = React.useState("");
  
  return (
    <SafeAreaView>
    <View style={{paddingTop: 30}}>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        cursorColor={'#FF0000'}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        cursorColor={'#00FF00'}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        cursorColor={'#0000FF'}
      />
      
    </View>
      
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default CursorColorTextInput;

Output –

In the above image you can see that we have 3 input fields and all the fields are showing different colors of blinking cursor. First input field has red color cursor, second field has green color cursor and third one has blue cursor.

In the code we are setting cursorColor prop in line 14, 20 and 26.

Live Demo

Conclusion

To change the color of cursors in input field, use cursorColor prop and set it to any valid color value. This prop works in Android only.