How to change text selection color on copy-paste in React Native?

When you long press a text in mobiles, you can select that and copy it. We learned about it in our previous articles. Here we will see how to change the highlight color during text selection.

React native provides selectionColor prop which accepts any color value. This works on Android phones only.

Code Example

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

const TextInANest = () => {
  
  return (
    <View style={styles.container}>

      <Text selectable={true} selectionColor={'#FF0000'}>
        The selection color for this text is Red.
      </Text>

      <Text selectable={true} selectionColor={'#00FF00'}>
        The selection color for this text is Green.
      </Text>

      <Text selectable={true} selectionColor={'#0000FF'}>
        The selection color for this text is Blue.
      </Text>

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between',
    height: 200,
    width: 250,
    marginTop: 40
  },
  
  
});

export default TextInANest;

Output –

From the image you can see that any color could be used for highlighting the selection. Here we are using Red, Green and Blue colors for three text blocks.

In our code we first indicated the text to be selectable using selectable=true prop. Then we changed the color using selectionColor prop in line 9, 13 and 17.

Live Demo

Conclusion

Changing the selection highlight color is helpful in cases when you want to display everything according to your app theme. It helps users to recognize and accept the app according to the branding of the company.

React Native provides selectionColor prop in <Text> component which changes the highlight color.