From 96d7cf3bb0241aeacb0ba422dad807a1b890840e Mon Sep 17 00:00:00 2001
From: Daksh Bhardwaj <daksh@plgworks.com>
Date: Fri, 2 Sep 2022 15:10:42 +0530
Subject: [PATCH 1/2] feat: add userSelect style equivalent to selectable

---
 .../View/ReactNativeStyleAttributes.js        |  1 +
 Libraries/StyleSheet/StyleSheetTypes.js       |  1 +
 Libraries/Text/Text.js                        | 20 +++++++++++++++++++
 .../js/examples/Text/TextExample.android.js   | 10 ++++++++++
 .../js/examples/Text/TextExample.ios.js       | 10 ++++++++++
 5 files changed, 42 insertions(+)

diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js
index 542bfd3a88eedd..e7b0c734e634b1 100644
--- a/Libraries/Components/View/ReactNativeStyleAttributes.js
+++ b/Libraries/Components/View/ReactNativeStyleAttributes.js
@@ -133,6 +133,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   textShadowOffset: true,
   textShadowRadius: true,
   textTransform: true,
+  userSelect: true,
   writingDirection: true,
 
   /**
diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js
index 0ff1d26f64dd29..9eba5ae7246a17 100644
--- a/Libraries/StyleSheet/StyleSheetTypes.js
+++ b/Libraries/StyleSheet/StyleSheetTypes.js
@@ -631,6 +631,7 @@ export type ____TextStyle_InternalCore = $ReadOnly<{
   textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
   textDecorationColor?: ____ColorValue_Internal,
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',
+  userSelect?: 'auto' | 'text' | 'none' | 'contain' | 'all',
   writingDirection?: 'auto' | 'ltr' | 'rtl',
 }>;
 
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 57b6a2ea82ca28..2d85f531274433 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -153,6 +153,16 @@ const Text: React.AbstractComponent<
       : processColor(restProps.selectionColor);
 
   let style = restProps.style;
+
+  let _selectable = restProps.selectable;
+  if (style && style.userSelect !== undefined) {
+    _selectable =
+      style.userSelect !== null
+        ? // $FlowFixMe
+          userSelectToSelectableMap[style.userSelect]
+        : restProps.selectable;
+  }
+
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
       style = StyleSheet.compose(restProps.style, {
@@ -182,6 +192,7 @@ const Text: React.AbstractComponent<
       {...eventHandlersForText}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
+      selectable={_selectable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
       style={style}
@@ -193,6 +204,7 @@ const Text: React.AbstractComponent<
         {...restProps}
         {...eventHandlersForText}
         disabled={_disabled}
+        selectable={_selectable}
         accessible={_accessible}
         accessibilityState={_accessibilityState}
         allowFontScaling={allowFontScaling !== false}
@@ -222,4 +234,12 @@ function useLazyInitialization(newValue: boolean): boolean {
   return oldValue;
 }
 
+const userSelectToSelectableMap = {
+  auto: true,
+  text: true,
+  none: false,
+  contain: true,
+  all: true,
+};
+
 module.exports = Text;
diff --git a/packages/rn-tester/js/examples/Text/TextExample.android.js b/packages/rn-tester/js/examples/Text/TextExample.android.js
index 8980335aba1361..45826991731aca 100644
--- a/packages/rn-tester/js/examples/Text/TextExample.android.js
+++ b/packages/rn-tester/js/examples/Text/TextExample.android.js
@@ -982,4 +982,14 @@ exports.examples = [
       return <TextBaseLineLayoutExample />;
     },
   },
+  {
+    title: 'Selectable Text',
+    render: function (): React.Node {
+      return (
+        <View>
+          <Text style={{userSelect: 'auto'}}>Text element is selectable</Text>
+        </View>
+      );
+    },
+  },
 ];
diff --git a/packages/rn-tester/js/examples/Text/TextExample.ios.js b/packages/rn-tester/js/examples/Text/TextExample.ios.js
index 96c19353c25c5c..d24c35ca1638eb 100644
--- a/packages/rn-tester/js/examples/Text/TextExample.ios.js
+++ b/packages/rn-tester/js/examples/Text/TextExample.ios.js
@@ -1227,4 +1227,14 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Selectable Text',
+    render: function (): React.Node {
+      return (
+        <View>
+          <Text style={{userSelect: 'auto'}}>Text element is selectable</Text>
+        </View>
+      );
+    },
+  },
 ];

From e5a9b979be4f4bfdc38752572513fadae632378c Mon Sep 17 00:00:00 2001
From: Daksh Bhardwaj <daksh@plgworks.com>
Date: Mon, 5 Sep 2022 11:37:09 +0530
Subject: [PATCH 2/2] pr review changes

---
 Libraries/Text/Text.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 2d85f531274433..b34b3476ee9e93 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -20,6 +20,7 @@ import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import {type TextProps} from './TextProps';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
+import flattenStyle from '../StyleSheet/flattenStyle';
 
 /**
  * Text is the fundamental component for displaying text.
@@ -152,7 +153,7 @@ const Text: React.AbstractComponent<
       ? null
       : processColor(restProps.selectionColor);
 
-  let style = restProps.style;
+  let style = flattenStyle(restProps.style);
 
   let _selectable = restProps.selectable;
   if (style && style.userSelect !== undefined) {