Summary:
This pull request fixes an issue where the `selectionColor` prop was not applied to the `TextInput` component on iOS, starting from React Native version 0.74.x.
This issue was introduced in PR [1e68e485](https://github.com/facebook/react-native/commit/1e68e48534aedf1533327bf65f26e5cf5b80127b#diff-b6634353ea5b10a91de24605dc51bdfb50e8ddb652ccd5b9dab194168a69d4b1) which relocated `selectionColor` along with `selectionHandleColor` and `cursorColor` out of `otherProps`. This modification inadvertently prevented `selectionColor` from being passed to the iOS native component.
This change ensures that the `selectionColor` prop is explicitly included in the `RCTTextInputView` component's properties, fixing the regression.
Note: `selectionHandleColor` and `cursorColor` are Android-specific and do not require explicit passing on iOS.
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[IOS] [FIXED] - Fixed an issue where the `selectionColor` prop was not being applied on the `TextInput` component.
Pull Request resolved: https://github.com/facebook/react-native/pull/44420
Test Plan:
**Environment:** iOS Simulator, React Native 0.74.0.
**Steps to reproduce:**
- Implement a `TextInput` component with the `selectionColor` prop set.
- Run the application on an iOS device or simulator.
- Focus on the TextInput component, write some text and select it.
**Expected Result:** the selection color should match the color provided to the `selectionColor` prop.
**Actual result before fix:** the selection color did not reflect the specified `selectionColor` prop and fell back to the default iOS selection color (blue).
**Screenshots:**
- Before fix:
<img width="1710" alt="before_fix" src="https://github.com/facebook/react-native/assets/17989553/8660068c-55c9-4f55-a788-f96eb681fb70">
- After fix:
<img width="1710" alt="after_fix" src="https://github.com/facebook/react-native/assets/17989553/93c9eb26-7da0-4957-b54f-8444aff7e374">
Reviewed By: javache
Differential Revision: D57017836
Pulled By: NickGerleman
fbshipit-source-id: 263ce22168e09c15cdfdb4eb4300a2605d8af032
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44398
**Problem:**
`selection` prop is not being set on component creation.
Not quite sure which RN version this issue was introduced but fixing it on latest code.
Use playground for testing (refer to following diff)
**Proposed Solution:**
Added notes in comments but `viewCommands.setTextAndSelection()` is called only on text or selection update which relies on comparing data with `lastNativeSelection`. Problem is that `lastNativeSelection` is initially set to the props value that is passed in so does not send the command on component creation.
So assign a default selection value of `{start: -1, end: -1}` so it can be set on component creation.
**Changelog:**
[General][Fixed] - `selection` prop in `TextInput` was not being applied at component creation
Reviewed By: cipolleschi
Differential Revision: D56911712
fbshipit-source-id: 7774b246383f85216536040688b0a8ea85b3478a
Summary:
Web props work (somewhere around D41230978 and D39268920) made it so that numeric font weights can be set instead of just strings. This is implemented by converting number to string before passing to native component within the `Text` component.
We have crash with:
```
2024-04-19 09:38:21.360 16963 17190 E ViewManager: Error while updating prop fontWeight
2024-04-19 09:38:21.360 16963 17190 E ViewManager: java.lang.IllegalArgumentException: method com.facebook.react.views.text.ReactBaseTextShadowNode.setFontWeight argument 1 has type java.lang.String, got java.lang.Double
2024-04-19 09:38:21.360 16963 17190 E ViewManager: at java.lang.reflect.Method.invoke(Native Method)
```
`TextStyleProps` can also be passed to `TextInput`, which passes to underlying native component, without going through this logic. And the types for Native props directly derive from JS props, so type system does not catch passing incorrect number type to underlying native component.
This does a quick and dirty replication of the exact logic in `Text.js` to `TextInput.js`. I'd love to potentially fix this up for Fabric in a different way when we rethink CSS parsing.
Changelog:
[General][Fixed] - Handle `fontWeight` normalization for TextInput component
Reviewed By: arushikesarwani94
Differential Revision: D56539571
fbshipit-source-id: 8975886c117d814a624f817bffe408841bb03b88
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43429
changelog: [internal]
these experimental props have served their purpose and can be deleted.
Reviewed By: rubennorte
Differential Revision: D54682805
fbshipit-source-id: aee5072e2aa056c862f369426617d0d51c98997f
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42019
Removes the following deprecated properties from React Native:
- `Image.propTypes`
- `Text.propTypes`
- `TextInput.propTypes`
- `ColorPropType`
- `EdgeInsetsPropType`
- `PointPropType`
- `ViewPropTypes`
The deprecation history for these prop types is not super obvious, so here is a summary:
- `react@15.5` extracted `prop-types` into a separate package to reflect that not everybody uses them.
- `react-native@0.68` added a deprecation warning to built-in prop types. (https://github.com/facebook/react-native/commit/3f629049ba9773793978cf9093c7a71af15e3e8d)
- `react-native@0.69` removed built-in prop types. (https://github.com/facebook/react-native/commit/3e229f27bc9c7556876ff776abf70147289d544b)
- `react-native@0.71` restored built-in prop types, along with bug fixes to isolate deprecated usage. (https://github.com/facebook/react-native/commit/b966d297245a4c1e2c744cfe571396cfa7e5ffd3)
We believe that by the next public release, enough time will have passed for the community to be able to upgrade without patching React Native or otherwise working around the removal of these deprecated prop types.
**If anyone has trouble identifying the source of a deleted prop types usage, please file an issue so we can help track it down with you.**
Changelog:
[General][Removed] - Removed deprecated prop types
Reviewed By: lunaleaps, NickGerleman
Differential Revision: D52337762
fbshipit-source-id: 9731f7e1dec29f3df535ab75cc50bed001fdfa0b
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41700
The type definition of `useMergeRefs` is incorrect, which forces all callsites to use `$FlowFixMe`. This fixes the definition and removes all the `$FlowFixMe`s caused by it.
Changelog: [internal]
Reviewed By: javache
Differential Revision: D51660716
fbshipit-source-id: 4d4d3a72bdca8c409fd1dda59cc2c94113b024bb
Summary:
This PR addresses the problem raised in the https://github.com/facebook/react-native/issues/41004 issue.
The current logic is that `selectionColor` on iOS sets the color of the selection, handles, and cursor. On Android it looks similar, while it doesn't change the color of the handles if the API level is higher than 27. In addition, on Android there was an option to set the color of the cursor by `cursorColor` prop, but it didn't work if the `selectionCursor` was set.
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[GENERAL] [ADDED] - Make same behavior of the `selectionColor` prop on Android as iOS
[ANDROID] [ADDED] - Introduced `selectionHandleColor` as a separate prop
[ANDROID] [CHANGED] - Allowing `cursorColor` and `selectionHandleColor` to override `selectionColor` on Android
Pull Request resolved: https://github.com/facebook/react-native/pull/41092
Test Plan:
Manual tests in rn-tester:
### `selectionColor` same as iOS, sets selection, handles and cursor color
_There is a way to set only "rectangle" color by setting other props as null_
### `selectionHandleColor`
### `cursorColor`
Reviewed By: NickGerleman
Differential Revision: D51253298
Pulled By: javache
fbshipit-source-id: 290284aa38c6ba0aa6998b937258788ce6376431
Summary:
This PR is in response to https://github.com/facebook/react-native/pull/39758#discussion_r1344839022 .
`RCTConvert.h` currently takes an import of `<Webkit/Webkit.h>` for... one enum: `WKDataDetectorTypes`. This has a few problems:
1) RCTConvert is JS engine agnostic, it shouldn't be depending on Webkit
2) As far as I can tell, this code is dead, we also define (and use) the UIKit equivalent `UIDataDetectorTypes`.
Let's just combine the two, update some JS typing, and get rid of the Webkit header import.
## Changelog:
[IOS] [CHANGED] - Remove `<Webkit/Webkit.h>` import in `RCTConvert.h`
Pull Request resolved: https://github.com/facebook/react-native/pull/39794
Test Plan: CI should pass
Reviewed By: rshest
Differential Revision: D49898701
Pulled By: NickGerleman
fbshipit-source-id: 5420cb62317e1186426aae019bcc43d27c49ea26
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39701
TextInput already uses Pressability, but doesn't expose the onPress prop. Link:https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/TextInput/TextInput.js#L1381-L1414.
Currently TextInput only exposes the onPressIn() and onPressOut() props from Pressability. While onPressOut() can serve the same purpose as onPress() in most cases, it doesn't fare well with PanResponder...say a swipe gesture implemented using PanResponder.
When the pointer/cursor exits the hit test bounds of TextInput, onPressOut() will be triggered even though the desired behavior could be that we only want to invoke the event handler when the user lifts their finger from the screen (while still in the hit test bounds of the TextInput).
Example of TextInput in a PanResponder:
https://snack.expo.dev/jambalaya/panresponder
Changelog: [General][Added] Add onPress prop to TextInput
Reviewed By: NickGerleman
Differential Revision: D49653011
fbshipit-source-id: 28477416c6c0f17a0737986cab49e51a55094ba7
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38857
`hitSlop` must be passed into the `usePressability` hook in order for it to take effect. It's a no-op if no hit slop is present
Changelog:
[Internal][Fixed] - Propagate hit slop prop to TextInput pressability config
Reviewed By: NickGerleman
Differential Revision: D48124538
fbshipit-source-id: a910fdcec55e67d37c84facca297428556ef777e
Summary:
While setting up a credit card form in RN, I discovered that iOS 17 supports a number of new content types ([`UITextContentType` docs](https://developer.apple.com/documentation/uikit/uitextcontenttype?language=objc)). In the docs these are marked with the `Beta` flag.
Setting up the new content types is relatively straightforward, but a change is required in https://github.com/facebook/react-native-deprecated-modules to update the `TextInput` prop types. ~~I will open a PR in that repo shortly.~~ I have [opened a PR](https://github.com/facebook/react-native-deprecated-modules/pull/23) to update the prop types. ~~Once that PR is merged, a version bump for that dependency will need to be added to this PR.~~ The PR is merged and the dependency in this PR has been updated.
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[IOS] [ADDED] - Added support for iOS 17+ text content types
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/38354
Test Plan: The `rn-tester` app builds and runs successfully. I have added a few new examples of inputs using the new text content types.
Reviewed By: javache
Differential Revision: D47554161
Pulled By: philIip
fbshipit-source-id: 8d4414dc6229063f81164f2d8727921c8294c92e
Summary:
Currently when using a TextInput with a controlled selection prop the Copy / Paste menu is constantly getting dismissed and is impossible to use. This is because Android dismisses it when certain method that affect the input text are called (https://cs.android.com/android/platform/superproject/+/refs/heads/master:frameworks/base/core/java/android/widget/Editor.java;l=1667;drc=7346c436e5a11ce08f6a80dcfeb8ef941ca30176?q=Editor, https://cs.android.com/android/platform/superproject/+/refs/heads/master:frameworks/base/core/java/android/widget/TextView.java;l=6792;drc=7346c436e5a11ce08f6a80dcfeb8ef941ca30176). The solution to fix this is to avoid calling those methods when only the selection changes.
I also noticed there are a lot of differences on how selection is handled in old vs new arch and a lot of the selection handling can actually be removed as it is partially the cause of this issue.
This implements 2 mitigations to avoid the issue:
- Unify selection handling via commands for old arch, like fabric. Selection is currently a prop in the native component, but it is completely ignored in fabric and selection is set using commands. I removed the selection prop from the native component on Android so now it is exclusively handled with commands like it is currently for fabric. This makes it so that when the selection prop changes the native component no longer re-renders which helps mitigate this issue. More specifically for the old arch we no longer handle the `selection` prop in `ReactTextInputShadowNode`, which used to invalidate the shadow node and cause the text to be replaced and the copy / paste menu to close.
- Only set placeholder if the text value changed. Calling `EditText.setHint` also causes the copy / paste menu to be dismissed. Fabric will call all props handlers when a single prop changed, so if the `selection` prop changed the `placeholder` prop handler would be called too. To fix this we can check that the value changed before calling `setHint`.
## Changelog:
[ANDROID] [FIXED] - Fix copy / paste menu and simplify controlled text selection on Android
Pull Request resolved: https://github.com/facebook/react-native/pull/37424
Test Plan:
Tested on new and old arch in RNTester example.
Before:
https://github.com/facebook/react-native/assets/2677334/a915b62a-dd79-4adb-9d95-2317780431cf
After:
https://github.com/facebook/react-native/assets/2677334/0dd475ed-8981-410c-8908-f00998dcc425
Reviewed By: cortinico
Differential Revision: D45958425
Pulled By: NickGerleman
fbshipit-source-id: 7b90c1270274f6621303efa60b5398b1a49276ca
Summary:
Since v0.71 the autoComplete prop on TextInput is available on iOS ([release notes](https://reactnative.dev/blog/2023/01/12/version-071#component-specific-behavior)). However, this change is not reflected in the types.
Original types PR here - https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65144 by chwallen
## Changelog:
[GENERAL] [FIXED] - Fix autoComplete type for TextInput
Pull Request resolved: https://github.com/facebook/react-native/pull/36931
Test Plan: Setting the autoComplete prop on TextInput to `nickname`, `organization`, `organization-title`, or `url` should not result in typescript errors.
Reviewed By: NickGerleman
Differential Revision: D45052350
Pulled By: javache
fbshipit-source-id: 40993833b4ed14f91e3bf3521a264ea93517a0c9
Summary:
## Changelog:
[Internal] -
While merging a Contributor PR in D43816768, I got curious whether such things as detecting/fixing typos could be automated.
There is a tool called [typos](https://github.com/crate-ci/typos), which, as it turns out, works very well on source code files.
The amount of false positives was minimal, most of the suggestions were valid ones.
And the total amount of typos found and fixed was **more than 300**, which is... quite a bit :)
### Methodology
* Run `typos` separately on `ReactCommon`, `Libraries`, `React`, `ReactAndroid` and `scripts` folders inside `packages/react-native`, e.g.:
```
$ typos -w --config ~/tmp/_typos.toml ~/fbsource/xplat/js/react-native-github/packages/react-native/ReactAndroid
```
Contents of the `_typos.toml` config file:
```
[default.extend-words]
collapsable = "collapsable"
NDK = "NDK"
inout = "inout"
```
(yeah, it really didn't like the "collapsable" word, for some reason ;))
* Inspect all the changes manually and revert false positives (as mentioned, their amount was minimal)
Note that most of the changes are inside things like comments and error messages, however there are a few among identifier name fixes (`typos` is actually quite smart at understanding naming conventions in code) - I kept the suggestions in cases that are local and not part of a public API. There are also misspelled file name changes in a couple of cases.
Reviewed By: NickGerleman
Differential Revision: D44172494
fbshipit-source-id: 86e27edbbb99e09135e3cdd5d7cea8ffeb8307f4
Robin Shin
Alan Lee
Nick Gerleman
Samuel Susla
Sam Zhou
Tim Yung
Yugo Ogura
Rubén Norte
Jakub Grzywacz
Fabrizio Cucci
Saad Najmi
James Maxell Eroy
Pieter Vanderwerff
Ellis Tsung
Rob Walker
Fábio Henriques
tarunrajput
Janic Duplessis
Kyle Roach
Ruslan Shestopalyuk
Ruslan Lesiutin