How to change the React Native text input cursor color?

Sometimes, we want to change the React Native text input cursor color.

In this article, we’ll look at how to change the React Native text input cursor color.

How to change the React Native text input cursor color?

To change the React Native text input cursor color, we can set the selectionColor prop to the cursor color.

For instance, we write:

import * as React from 'react';
import { View, TextInput } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <TextInput selectionColor="green" placeholder="name" />
    </View>
  );
}

to set selectionColor to 'green' to set the cursor color on the text input to green.

Conclusion

To change the React Native text input cursor color, we can set the selectionColor prop to the cursor color.