feat: add userSelect style equivalent to selectable (#34575)

Summary:
This adds support for the `userSelect` style attribute, mapping the already existing selectable attribute as requested on #34425. This PR also updates the TextExample.android and TestExample.ios on the RNTester in order to facilitate the manual QA of this.

## Changelog
[General] [Added] - Add support for `userSelect` style

Pull Request resolved: #34575

Test Plan:
-  open the RNTester app and navigate to the Text page
 - Check the `Selectable Text` through the Selectable text section
<Image src="https://user-images.githubusercontent.com/22423684/188112863-65acd145-76b0-47ba-8bc6-f72298077096.png" height="600" width="300" />

Reviewed By: yungsters

Differential Revision: D39252798

Pulled By: jacdebug

fbshipit-source-id: f7fabf20ee68778d75461f511c56f94d0d756d9c

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -134,6 +134,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   textShadowOffset: true,
   textShadowRadius: true,
   textTransform: true,
+  userSelect: true,
   writingDirection: true,
 
   /**

Libraries/StyleSheet/StyleSheetTypes.js

@@ -632,6 +632,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',
 }>;
 

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,13 @@ const Text: React.AbstractComponent<
       ? null
       : processColor(restProps.selectionColor);
 
-  let style = restProps.style;
+  let style = flattenStyle(restProps.style);
+
+  let _selectable = restProps.selectable;
+  if (style?.userSelect != null) {
+    _selectable = userSelectToSelectableMap[style.userSelect];
+  }
+
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
       style = StyleSheet.compose(restProps.style, {
@@ -182,6 +189,7 @@ const Text: React.AbstractComponent<
       {...eventHandlersForText}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
+      selectable={_selectable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
       style={style}
@@ -193,6 +201,7 @@ const Text: React.AbstractComponent<
         {...restProps}
         {...eventHandlersForText}
         disabled={_disabled}
+        selectable={_selectable}
         accessible={_accessible}
         accessibilityState={_accessibilityState}
         allowFontScaling={allowFontScaling !== false}
@@ -222,4 +231,12 @@ function useLazyInitialization(newValue: boolean): boolean {
   return oldValue;
 }
 
+const userSelectToSelectableMap = {
+  auto: true,
+  text: true,
+  none: false,
+  contain: true,
+  all: true,
+};
+
 module.exports = Text;

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>
+      );
+    },
+  },
 ];

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>
+      );
+    },
+  },
 ];