Missing TypeScript types for userSelect style property on Text component - type error: 'userSelect' does not exist in type

[jobpaardekooper]

Description

When setting the userSelect property inside the style property of a Text component you get a Typescript error. For example:

<Text style={{ userSelect: 'all' }} >example</Text>

Gives the following type error:

Type '{ userSelect: string; }' is not assignable to type 'StyleProp<TextStyle>'.
      Object literal may only specify known properties, and 'userSelect' does not exist in type 'TextStyle | RecursiveArray<Falsy | TextStyle | RegisteredStyle<TextStyle>>'.

React Native Version

0.72.4

Output of npx react-native info

System:
OS: macOS 13.4
CPU: (10) arm64 Apple M1 Pro
Memory: 442.78 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.13.0
path: ~/.nvm/versions/node/v16.13.0/bin/node
Yarn:
version: 1.22.15
path: ~/.nvm/versions/node/v16.13.0/bin/yarn
npm:
version: 9.8.1
path: ~/Developer/transcribe/rn-app/node_modules/.bin/npm
Watchman:
version: 2023.06.12.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8609683
Xcode:
version: 14.3/14E222b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.1
path: /usr/bin/javac
Ruby:
version: 3.2.2
path: /Users/jobpaardekooper/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: ^0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Create a Text component in a Typescript file as follows:

<Text style={{ userSelect: 'all' }} >example</Text>

Snack, screenshot, or link to a repository

https://github.com/jobpaardekooper/rn-userSelect-example

[cortinico]

We do have a sample in React Native that tests exactly that:

react-native/packages/rn-tester/js/examples/Text/TextExample.android.js

Lines 998 to 1007 in e9b5653

	{
	title: 'Selectable Text',
	render: function (): React.Node {
	return (
	<View>
	<Text style={{userSelect: 'auto'}}>Text element is selectable</Text>
	</View>
	);
	},
	},

Can you share a reproducer as requested?

[jobpaardekooper]

I have created a repo that reproduces the issue but it is really nothing special. All I did was add a Text component like in my original description of the issue.

To be clear, the Text component is selectable and is working as it should. It just gives a type error in Typescript. For example when I have the project open in VSCode is see this:

[cortinico]

Oh I see. That's because the TypeScript types haven't been updated.
This should be an easy fix so I marked it as "Good first issue" if someone wants to pick it up

[MjMoshiri]

Hi, I would like to work on this if it's possible

[cortinico]

Hi, I would like to work on this if it's possible

I've assigned it to you 👍

[MjMoshiri]

Hi again, the 1 liner change is ready :D.

[Stunner05]

Hi, I would like to work on this if it's possible

Can i assist you on this

[MjMoshiri]

Hi, I would like to work on this if it's possible

Can i assist you on this

Hi, sure. If you think something is missing apart from the change I made in the pull request above. Please do 🙏. But I think the intended change is done. merge request already has an approval.