How to change text selection color in input field in React Native?

We already discussed about how to change selection color of text in previous articles. Here we will see how to change the selection color of text in input field.

In order to do that, you need to set selectionColor prop of TextInput component in React Native. This prop accepts any valid color value.

It changes both the selection color as well as the cursor color. We can use it for both Android and iOS apps.

Code Example

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

const SelectionColorTextInput = () => {
  const [text, onChangeText] = React.useState("I love #reactnative mobile apps");

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>selectionColor={'#FF0000'}</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
          selectionColor={'#FF0000'}
        />
      </View>
    </SafeAreaView>
  );
};

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

export default SelectionColorTextInput;

Output –

In the above image you can see that the selection is of red color. Also the cursor color is changed to red too. This behavior is consistent on both iOS and Android phones.

In the code we are setting the selectionColor='#FF0000' in line 15.

Live Demo

Conclusion

The conclusion of the article is that we can change selection color of text in input fields using selectionColor prop by setting it to some valid color value.