A react native project without using the TextInput component can be a strange thing. In this blog post, I will show you how to change the color of the TextInput cursor. Yes, it’s a simple thing but it can have significance when you are designing your react native app.

Text input has many props which provide configurability for several features. You should use Text input prop selectionColor to change the default color of the cursor into the color of your wish.

As written in the official document, the selectionColor is the highlight and cursor color of the text input. See the following code snippet.

<TextInput
        style={styles.input}
        selectionColor="red"
        onChangeText={onChangeText}
        value={text}
      />

You will get the following output.

Following is the complete code.

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

const App = () => {
  const [text, onChangeText] = React.useState('');
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        selectionColor="red"
        onChangeText={onChangeText}
        value={text}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    width: '80%',
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default App;

I hope this blog post helped you, even though it is a short one. Have any doubts? Let me know using the comment section given below.

A react native project without using the TextInput component can be a strange thing. In this blog post, I will show you how to change the color of the TextInput cursor. Yes, it’s a simple thing but it can have significance when you are designing your react native app.

Text input has many props which provide configurability for several features. You should use Text input prop selectionColor to change the default color of the cursor into the color of your wish.

As written in the official document, the selectionColor is the highlight and cursor color of the text input. See the following code snippet.

<TextInput
        style={styles.input}
        selectionColor="red"
        onChangeText={onChangeText}
        value={text}
      />

You will get the following output.

Following is the complete code.

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

const App = () => {
  const [text, onChangeText] = React.useState('');
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        selectionColor="red"
        onChangeText={onChangeText}
        value={text}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    width: '80%',
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default App;

I hope this blog post helped you, even though it is a short one. Have any doubts? Let me know using the comment section given below.