Commit Graph

576 Commits

Author SHA1 Message Date
fabriziobertoglio1987 7b5b114d57 Making links independently focusable by Talkback (#33215)
Summary:
This issue fixes [32004][23]. The Pull Request was previously published by [blavalla][10] with [31757][24].
>This is a follow-up on [D23553222 (https://github.com/facebook/react-native/commit/b352e2da8137452f66717cf1cecb2e72abd727d7)][18], which made links functional by using [Talkback's Links menu][1]. We don't often use this as the sole access point for links due to it being more difficult for users to navigate to and easy for users to miss if they don't listen to the full description, including the hint text that announces that links are available.
The Implementation of the functionality consists of:

Retrieving the accessibility links and triggering the TalkBack Focus over the Text
1. nested Text components with accessibilityRole link are saved as [ReactClickableSpan][17] instances in Android native [TextView][20] ([more info][19])
1. If the TextView contains any [ClickableSpans][15] (which are [nested Text][14] components with role link), set a view tag and reset the accessibility delegate.
3. Obtain each link description, start, end, and position relative to the parent Text (id) from the Span as an [AccessibilityLink][16]
4. Use the [AccessibilityLink][16]  to display TalkBack focus over the link with the `getVirtualViewAt` method (more [info][13])

Implementing ExploreByTouchHelper to detect touches over links and to display TalkBack rectangle around them.
1. ReactAccessibilityDelegate inherits from [ExploreByTouchHelper][12]
2. If the [ReactTextView][21] has an accessibility delegate, trigger ExploreByTouchHelper method [dispatchHoverEvent][22]
3.  Implements the methods `getVirtualViewAt` and `onPopulateBoundsForVirtualView`.
     The two methods implements the following functionalities  (more [info][13]):
    * detecting the TalkBack onPress/focus on nested Text with accessibilityRole="link"
    * displaying TalkBack rectangle around nested Text with accessibilityRole="link"

## Changelog

[Android] [Added] - Make links independently focusable by Talkback

Pull Request resolved: https://github.com/facebook/react-native/pull/33215

Test Plan:
[1]. User Interacts with links through TalkBack default accessibility menu ([link][1])
[2]. The nested link becomes the next focusable element after the parent element that contains it. ([link][2])
[3]. Testing accessibility examples in pr branch ([link][3])
[4]. Testing accessibility android examples in pr branch ([link][4])
[7]. TalkBack focus moves through links in the correct order from top to bottom (PR Branch with [link.id][25]) ([link to video test][7]) ([discussion][26])
[8]. TalkBack focus does not move through links in the correct order from top to bottom (PR Branch without [link.id][25]) ([link to video test][8]) ([discussion][26])

Test on main branch
[5]. Testing accessibility examples in main branch ([link][5])
[6]. Testing accessibility android examples in main branch ([link][6])

[1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1045593386
[2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1045593164
[3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1054900872
[4]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1054918634
[5]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1054888278
[6]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1054891828
[7]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1060073165
[8]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1060098381

[10]: https://github.com/blavalla "blavalla github profile"
[12]: https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/com/android/internal/widget/ExploreByTouchHelper.java#L48 "com/android/internal/widget/ExploreByTouchHelper.java#L48"
[13]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1046384200 "explanation of getVirtualViewAt and onPopulateBoundsForVirtualView"
[14]: https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/android/text/Spannable.java#L3 "core/java/android/text/Spannable.java#L3"
[15]: https://github.com/fabriziobertoglio1987/react-native/blob/561266fc180b96d6337d6c6c5c3323522d66cc44/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java#L70-L71 "react/views/text/ReactTextViewManager.java#L70-L71"
[16]: https://github.com/fabriziobertoglio1987/react-native/blob/561266fc180b96d6337d6c6c5c3323522d66cc44/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java#L680-L685 "react/uimanager/ReactAccessibilityDelegate.java#L680-L685"
[17]: https://github.com/facebook/react-native/blob/561266fc180b96d6337d6c6c5c3323522d66cc44/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.java#L126-L129 "react/views/text/TextLayoutManager.java#L126-L129"
[18]: https://github.com/facebook/react-native/commit/b352e2da8137452f66717cf1cecb2e72abd727d7
[19]: https://github.com/facebook/react-native/issues/30375#issuecomment-781494859 "explanation on how nested Text are converted to Android Spans"
[20]: https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/android/widget/TextView.java#L214-L220 "core/java/android/widget/TextView.java#L214-L220"
[21]: https://github.com/facebook/react-native/blob/485cf6118b0ab0b59e078b96701b69ae64c4dfb7/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java#L577 "dispatchHoverEvent in ReactTextView"
[22]: https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/com/android/internal/widget/ExploreByTouchHelper.java#L120-L138 "dispatchHoverEvent in ExploreByTouchHelper"
[23]: https://github.com/facebook/react-native/issues/32004
[24]: https://github.com/facebook/react-native/pull/31757
[25]: https://github.com/fabriziobertoglio1987/react-native/blob/485cf6118b0ab0b59e078b96701b69ae64c4dfb7/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java#L648 "setting link.id in the AccessibilityLink constructor"
[26]: https://github.com/facebook/react-native/pull/33215/files/485cf6118b0ab0b59e078b96701b69ae64c4dfb7#r820014411 "comment on role of link.id"

Reviewed By: blavalla

Differential Revision: D34687371

Pulled By: philIip

fbshipit-source-id: 8e63c70e9318ad8d27317bd68497705e595dea0f
2022-03-29 13:36:24 -07:00
Phillip Pan 982ca30de0 bump iOS and tvOS from 11.0 to 12.4 in cocoapods
Summary:
Changelog: [iOS][Deprecated] Deprecating support for iOS/tvOS SDK 11.0, 12.4+ is now required

allow-large-files

Reviewed By: sammy-SC

Differential Revision: D34547333

fbshipit-source-id: a24bb09d03939a092de4198efb1aa4a44c69f718
2022-03-16 21:08:01 -07:00
Diego Pasquali 7b05b091fd Integrated iOS-only accessibilityLanguage prop (#33090)
Summary:
This PR fixes https://github.com/facebook/react-native/issues/30891

This PR is going to add an `accessibilityLanguage` prop to all the available components. This props is currently working only on iOS and should follow the [guidelines of the relative configuration](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage).

I'm in no way an expert on native programming (especially Objective-C) so I'm open to changes / improvements 🙂

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Added] - Integrated the `accessibilityLanguage` prop to all the available components. The prop is available for any platform but it will work only on iOS.

Pull Request resolved: https://github.com/facebook/react-native/pull/33090

Test Plan:
This has been tested using both the Simulator, checking for the `Language` attribute, and using a physical device with the Voice Over enabled.

<img width="1083" alt="Screenshot 2022-02-11 at 13 17 32" src="https://user-images.githubusercontent.com/5963683/153590415-65fcb4ff-8f31-4a0f-90e5-8eb1aae6aa3d.png">

Reviewed By: philIip

Differential Revision: D34523608

Pulled By: rh389

fbshipit-source-id: b5d77fc0b3d76ea8ed8f30c8385459ba98122ff6
2022-03-07 09:43:30 -08:00
fabriziobertoglio1987 7b2d8178b1 Text Component does not announce disabled and disables click functionality when disabled (#33076)
Summary:
This issue fixes https://github.com/facebook/react-native/issues/30937 fixes https://github.com/facebook/react-native/issues/30947 fixes https://github.com/facebook/react-native/issues/30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:

1) The missing javascript logic on the `accessibilityState` in the Text component https://github.com/fabriziobertoglio1987/react-native/commit/6ab7ab34e56411a7e87f396feb2f7ece1c4f98dd (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` https://github.com/fabriziobertoglio1987/react-native/commit/17095c6615107695f44af262846da446868b4cd8 (More information in previous PR https://github.com/facebook/react-native/pull/31252)

Related PR https://github.com/facebook/react-native/pull/33070 PR https://github.com/callstack/react-native-slider/pull/354

[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289

## Changelog

[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled

Pull Request resolved: https://github.com/facebook/react-native/pull/33076

Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}`  and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}`  and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])

[1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033465424
[2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033465631
[3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033465706
[4]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033465755
[5]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033465813
[6]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1038473783
[7.1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033465874
[7.3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033465961
[7.5]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033466018
[7.6]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1033321965
[7.7]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/1#issuecomment-1038471984

[10]: https://github.com/facebook/react-native/pull/33076/commits/17095c6615107695f44af262846da446868b4cd8
[11]: https://github.com/facebook/react-native/pull/33076/commits/6ab7ab34e56411a7e87f396feb2f7ece1c4f98dd

Reviewed By: blavalla

Differential Revision: D34211793

Pulled By: ShikaSD

fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
2022-02-15 11:23:11 -08:00
Minsik Kim 1a83dc36ce Fix a broken input for the Korean alphabet in TextInput (#32523)
Summary:
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->

Fix https://github.com/facebook/react-native/issues/32503

Updating the attributed text in TextView/TextField while inputting Korean language will break input mechanism of the Korean alphabet. This results unexpected text input.

This PR supersedes the previous fixes: https://github.com/facebook/react-native/issues/19809, https://github.com/facebook/react-native/issues/22546

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Fixed] - Fix a broken input for the Korean alphabet in TextInput

Pull Request resolved: https://github.com/facebook/react-native/pull/32523

Test Plan: https://user-images.githubusercontent.com/20317121/140013434-1674c391-54d6-4410-b4c1-c633697e639d.mov

Reviewed By: lunaleaps, sammy-SC

Differential Revision: D32470543

Pulled By: philIip

fbshipit-source-id: e7e34bd362fa2ab2ca579103db01ad8d1a891c35
2022-02-09 22:06:55 -08:00
Tim Yung 3e229f27bc RN: Remove propTypes from Image, Text, and TextInput
Summary:
Removes the `propTypes` member from the `Image`, `Text`, and `TextInput` components.

They have been deprecated since React Native v0.66.

Changelog:
[General][Removed] - Removed `Image.propTypes`, `Text.propTypes`, and `TextInput.propTypes`.

Reviewed By: kacieb

Differential Revision: D33750298

fbshipit-source-id: 085f83ad838196bdd531b097b8ce5957270c3ad1
2022-02-01 16:19:01 -08:00
MaeIg 8b5a5d4645 Fix capitalize Text style on IOS (#32774)
Summary:
On my project, I realized that capitalize style doesn't work with dates on IOS. I found [this issue](https://github.com/facebook/react-native/issues/32697) and tried to solve it.

(code example: https://snack.expo.dev/maelg/capitalize-demo)
| Android | IOS | Web |
| ------------- | ------------- | ------------- |
| ![image](https://user-images.githubusercontent.com/40902940/146158714-c658a83e-d8f3-41c9-92c8-4fc1f722f942.png) | ![image](https://user-images.githubusercontent.com/40902940/146159059-3cec1f7b-9bc7-4060-8164-79c47694b86b.png) | ![image](https://user-images.githubusercontent.com/40902940/146158095-0f94f25f-f245-4e45-9191-73520a0f6568.png) |

As we can see, the behavior is different on IOS, Android and web:
- **Android**: Capitalize the first letter of each word, unless it begins with a number. And put the rest in lowercase.
- **IOS**: Capitalize the first letter of each word, ~~unless it begins with a number~~. And put the rest in lowercase.
- **Web**: Capitalize the first letter of each word, unless it begins with a number. ~~And put the rest in lowercase.~~

This PR aims to unify behavior on Android and Ios. I am not changing the behavior which differs from the web because I don't know if it is desirable to align with the web.

## Changelog

[IOS] [Changed] - Don't capitalize the first letter of a word that is starting by a number

Pull Request resolved: https://github.com/facebook/react-native/pull/32774

Test Plan:
I manually tested my changes on a POC app (same code: https://snack.expo.dev/maelg/capitalize-demo) on react-native v0.66.4 and react-native main branch.

You can see the result here:
| Android | IOS |
| ------------- | ------------- |
| ![image](https://user-images.githubusercontent.com/40902940/146191361-e2de26d1-3915-47dc-8707-480504af24d6.png) | ![image](https://user-images.githubusercontent.com/40902940/146161660-c869202a-104e-4d16-8f5e-db1c72b2ea5e.png) |

~~I tried to use rn-tester but it was not taking my code. I think it is because fabric was enabled so it was using other code.
I tried to disable fabric but I was not able to build the app on my IOS simulator anymore:~~

On rn-tester:
<image src="https://user-images.githubusercontent.com/40902940/146457851-864b2962-5e9c-4c7e-83fd-7686e27cb996.png" width=50% height=50% />

Reviewed By: philIip

Differential Revision: D33165963

Pulled By: yungsters

fbshipit-source-id: c3bf32bf33d2f109a119798eefdbb9077e904252
2022-01-25 09:08:18 -08:00
Andres Suarez 8bd3edec88 Update copyright headers from Facebook to Meta
Reviewed By: aaronabramov

Differential Revision: D33367752

fbshipit-source-id: 4ce94d184485e5ee0a62cf67ad2d3ba16e285c8f
2021-12-30 15:11:21 -08:00
Samuel Susla 8c6a98400e Introduce TextInput.onChangeSync
Summary:
changelog: [internal]

Add experimental `TextInput.onChangeSync` which delivers onChange event synchronously.

Reviewed By: ShikaSD

Differential Revision: D33188083

fbshipit-source-id: 1e1dcd0d71c7eec98d3d5f69967659e07ac4e6a6
2021-12-30 06:38:50 -08:00
Samuel Susla f5f6fd70f2 Introduce TextInput.onKeyPressSync
Summary:
changelog: [internal]

Introduce a way to execute `onKeyPress` synchronously. This feature is experimental and will be changed in the future. It is not decided if marking native events as "sync" is going to be path forward with synchronous access.

NOTE: This is experimental API.

Reviewed By: ShikaSD

Differential Revision: D32882092

fbshipit-source-id: 68c66a9bb7c97758219e085c88a77f3c475c1eb3
2021-12-07 13:42:18 -08:00
Eric Rozell f3bf2e4f51 Add isPressable native prop to Text
Summary:
react-native-windows currently needs to maintain a fork of TextNativeComponent to wire through a native-only prop for `isPressable`.

The reason we do this on Windows is that we implement an optimization so we only attempt to hit test a virtual Text node if it is actually pressable, leading to significant perf improvement for pointer events (e.g., onMouseEnter / onMouseLeave) on Text.

Changelog:
[General][Added] - Native-only prop to optimize text hit testing on some RN platforms

Reviewed By: JoshuaGross

Differential Revision: D32564637

fbshipit-source-id: bf47c68d94a930d2c620cb3b1584355c5e412bd4
2021-11-30 21:55:39 -08:00
Jesse Katsumata 00bb2ba62d Fix Dead links to documents in the comments (#32619)
Summary:
Links under `reactnative.dev` that ended with `.html` lead to Page not found.
Fixed the url so that users get sent to the appropriate url.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Fixed] - Fixed dead links in the comments.

Pull Request resolved: https://github.com/facebook/react-native/pull/32619

Test Plan: - Changed links are accessible

Reviewed By: lunaleaps

Differential Revision: D32528978

Pulled By: cortinico

fbshipit-source-id: e039d18188371cf5240b37049e431329e28b1b8b
2021-11-22 03:31:10 -08:00
Phillip Pan b735cdf09d add scrollTo metadata RCTBackedTextInputViewProtocol
Summary:
fixing oncall issue: https://fb.workplace.com/groups/rn.support/permalink/7241260632589156/

in this diff, we add the properties to the native views that are needed for the `onScroll` event.

`UITextField` is not a `UIScrollView` unlike `UITextView`, so we need to add these dummy properties

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D32523147

fbshipit-source-id: 1d4f227f498fa1c333e2d6c457484b559ca18f7e
2021-11-19 11:41:26 -08:00
Liron Yahdav f249d21da0 Native changes for TextInput.setSelection method
Summary:
Native changes in preparation for adding a `setSelection` imperative method to `TextInput`.

Changelog: [Internal]

Reviewed By: JoshuaGross

Differential Revision: D31590771

fbshipit-source-id: eed40d1c2803fec713f2008ab8053a2812249715
2021-11-11 13:35:46 -08:00
Tim Yung 77ecc7ede1 JS: Format with Prettier v2.4.1 [3/n]
Summary:
Changelog:
[General][Internal]

Reviewed By: zertosh

Differential Revision: D31883447

fbshipit-source-id: cbbf85e4bf935096d242336f41bf0cc5d6f92359
2021-11-02 22:14:16 -07:00
Tim Yung 3f629049ba RN: Deprecate Prop Types
Summary:
Deprecates `prop-types` from React Native.

Existing use cases will be presented with a warning to migrate to the newly published `deprecated-react-native-prop-types` module.

In a subsequent release, these will be removed from React Native.

Changelog:
[General][Changed] - Accessing `Image.propTypes`, `Text.propTypes`, `TextInput.propTypes`, `ColorPropType`, `EdgeInsetsPropType`, `PointPropType`, or `ViewPropTypes` now emits a deprecation warning.

Reviewed By: kacieb

Differential Revision: D29019309

fbshipit-source-id: 21e518e588fa05c498cc75ba81f69cfa8a9d0613
2021-10-21 17:45:47 -07:00
Tim Yung 70dcba9994 JS: Remove Unused Flow Suppressions
Summary:
Cleans up all unused Flow suppressions.

Changelog:
[Internal]

Reviewed By: kacieb

Differential Revision: D31754978

fbshipit-source-id: 951e28a245782b9bc9e93a6417d88b19ba0c8f1c
2021-10-21 14:26:00 -07:00
Phillip Pan def7dd857d use new instead of alloc init
Summary:
i saw this a lot in the codebase, it's not optimal bc we're using two selectors when we only need one.

  fastmod --extensions m,mm '\[\[(.*) alloc] init]' '[${1} new]' --dir xplat/js/react-native-github/*

i manually updated the callsites that this codemod couldn't handle (e.g., where there were more than one of these instances in a single line)

Changelog: [Internal]

Reviewed By: RSNara

Differential Revision: D31776561

fbshipit-source-id: 1b16da240e8a79b54da67383d548921b82b05a9f
2021-10-20 22:18:38 -07:00
David Vacca 928519e4bd Remove extra invariant
Summary:
Remove extra invariant in Text.js

changelog: [internal] internal

Reviewed By: philIip

Differential Revision: D31628462

fbshipit-source-id: ec703c7b77dc842890865d79095b357a80dfa33d
2021-10-20 08:22:28 -07:00
Xiankun Cheng 22801870f0 Fix: multiline textinput start "jerking" when trying to move cursor. (#32179)
Summary:
Fixes https://github.com/facebook/react-native/issues/30748: on iOS 14, when trying to hold down the space bar and move the cursor on a multi-line TextInput with lots of lines, the cursor could not be scrolled to the desired point. It works as expected on iOS 13 and before.

Figured out that iOS14 acting as expected without `[setContentOffset:animated:]`, so exclude it when iOS version is and above 14.

Credit to efstathiosntonas for the finding and solution provides.

## Related issue
- https://github.com/facebook/react-native/issues/30748

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Fixed] - Fixed the issue when moving cursor in multi-line TextInput.

Pull Request resolved: https://github.com/facebook/react-native/pull/32179

Test Plan:
1. Launch RNTester app on iOS
2. Open `TextInput` in tab `Components`
3. Scroll to `Multiline` section and focus on the first child
4. Input lots of dummy texts
5. Hold the space bar (on device) or press down the mouse inside `TextInput` (simulator without showing keyboard)

### **Video Before:**
https://user-images.githubusercontent.com/6382178/132800651-fb7cd2ac-fbd1-4ec4-9e3b-c06ab5b6a114.MP4

### **Video After:**
https://user-images.githubusercontent.com/6382178/132800677-f349fe7f-5902-40ff-8b93-ecc96ce29166.MP4

Reviewed By: philIip

Differential Revision: D31404248

Pulled By: lunaleaps

fbshipit-source-id: 74a39106e628602c5177fc243783288fcb7782fa
2021-10-06 12:43:36 -07:00
Ken Tominaga 398595e074 Remove iOS 11 version check (#32151)
Summary:
This pull request aims to remove iOS 11 version check which is no longer needed.

The minimum iOS deployment target for React Native is `iOS 11` but we still have iOS 11 version check like below.

```
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
        if (available(iOS 11.0, *)) {
```

> React Native apps may target iOS 11.0 and Android 5.0 (API 21) or newer.

ref: https://github.com/facebook/react-native#-requirements

------

If there is a team motivation to remove the deprecated methods and classes before iOS 10, I can continue the work in this pull request or in the continuing pull requests.

We have deprecated warnings for these in the project.

- `UIUserNotificationSettings`
- `UILocalNotification`
- `topLayoutGuide` and `bottomLayoutGuide`
- `automaticallyAdjustsScrollViewInsets`

## Changelog

[iOS] [Changed] - Remove iOS 11 version check

Pull Request resolved: https://github.com/facebook/react-native/pull/32151

Reviewed By: sammy-SC

Differential Revision: D30877917

Pulled By: yungsters

fbshipit-source-id: d903ea5d557beeb65ef87bfce572e4db3532b3c5
2021-09-22 10:37:09 -07:00
Genki Kondo a0d30b848a Remove unsupported values for android_hyphenationFrequency
Summary:
hyphenationStrategy must be one of one of Layout#HYPHENATION_FREQUENCY_NONE, Layout#HYPHENATION_FREQUENCY_NORMAL, Layout#HYPHENATION_FREQUENCY_FULL: (https://developer.android.com/reference/android/widget/TextView#setHyphenationFrequency(int))

Thus "high" and "balanced" are not only redundant, but actually don't do what the value indicates - Layout#BREAK_STRATEGY_BALANCED (constant value: 2) and Layout#BREAK_STRATEGY_HIGH_QUALITY (constant value: 1) are only meant to be used for android:breakStrategy

Changelog:
[Android][Changed] - Remove `"high"` and `"balanced"` as values for `android_hyphenationFrequency` on `Text`

Reviewed By: JoshuaGross

Differential Revision: D30531096

fbshipit-source-id: 1a0b6e733bb21ce6b2f104a2025a79c16de3cfea
2021-08-26 10:40:11 -07:00
Andrei Shikov 3bc883c6c6 Warn when negative numberOfLines prop set on <Text/> component
Summary:
Updates previous variant that was crashing a surface to the non-crashing variant.
Now it prints error in console and modifies value to be 0.

Changelog: [General][Fixed] Clamp negative values for `numberOfLines` in <Text> component

Reviewed By: yungsters

Differential Revision: D30129658

fbshipit-source-id: fda47a262365573514d3e1e4bf8a26f6d30cdae0
2021-08-05 12:39:09 -07:00
Andrei Shikov a8a85034e1 Check for negative numberOfLines in TextView
Summary:
Negative `numberOfLines` prop is not supported by Android and causes a crash during layout measurement. This change adds a check in JS to catch the error earlier.

Changelog: [Internal]

Reviewed By: GijsWeterings

Differential Revision: D30047103

fbshipit-source-id: 4248a0f573c3b6facd25c7ae6ce007a357a1469b
2021-08-04 05:13:57 -07:00
Shuhao Zhang f3b8d4976f Bug fix: <TextInput> content is reset when emoji is entered at the max length
Summary:
When maxLength is defined in <TextInput>, if the last character at max length is an emoji, the content of the input is cleared:

{F620865178} {F620865237}

Related Github issues:

https://github.com/facebook/react-native/issues/10929
https://github.com/facebook/react-native/issues/10964

## Root cause:

When NSString was created, unicode characters were 16-bit long, so Objective-C considers every unicode character as 16-bit. However, unicode was later extended to more than 16bit, for example, emojis, which causes NSString substring method cuts off at the wrong position.

Example:

```
NSString *s = @"abc{emoji:1f601}";
NSInteger len = s.length; //length is 5 (as {emoji:1f601} occupies two 16-bit characters)
NSString *s3 = [s substringToIndex: 3]; //s3 is "abc"
NSString *s4 = [s substringToIndex: 4]; //s4 is null!
```

If string s, "abc{emoji:1f601}", is entered in <TextInput>, which has max length 4, it will truncate the string to the first 4 characters, "cutting" the emoji in half which causes encoding error and returns null. The text input is cleared.

## Solution:

If the character at max length is longer than 16-bit, truncate the character BEFORE it instead. In the previous example, truncate till index 3 instead of 4. The end result will be "abc" and the emoji is dropped.

## Changelog:

[iOS] [Fixed] - <TextInput> content is reset when emoji is entered at the max length

Reviewed By: p-sun

Differential Revision: D28821909

fbshipit-source-id: 4720d864970b554160ed5388f65b352ce95a6199
2021-06-04 13:40:42 -07:00
Tim Yung b85572af6e RN: Cleanup TextInjection
Summary:
Deletes `TextInjection` which is no longer needed.

Changelog:
[Internal]

Reviewed By: kacieb

Differential Revision: D28799740

fbshipit-source-id: 5dfbff23db3f73153aa0c3df25fec5acfb4977e4
2021-06-01 15:29:59 -07:00
Dennis Urtubia 44717152ca Adds accessiblity actions on core components (#31532)
Summary:
Android: Adding custom actions (https://github.com/facebook/react-native/issues/30854).
Adds accessiblity actions on core components (Button, TextInput, Text, and Picker).

## Changelog
[General] [Added] - Adds accessiblity actions on core components

Pull Request resolved: https://github.com/facebook/react-native/pull/31532

Test Plan:
- `npm test`
- Rendering of components on `RNTesterApp` using talkback:
    - Check if accessibility actions were available;
    ![image](https://user-images.githubusercontent.com/33161939/118381843-a668c180-b5c5-11eb-9ce4-016a49157dc5.png)
    - Trigger `activate` action for all components;
    ![image](https://user-images.githubusercontent.com/33161939/118381736-7bca3900-b5c4-11eb-82fb-32e824e1b38c.png)

## Notes
- For `TextInput` an unexpected error is raised:
![image](https://user-images.githubusercontent.com/33161939/118381603-d1054b00-b5c2-11eb-93f2-1d5730ee2d24.png)

Reviewed By: kacieb

Differential Revision: D28654294

Pulled By: lunaleaps

fbshipit-source-id: 80dd3f3c7aa27bbaf16ef12997e8f55952a02eb2
2021-05-26 16:49:11 -07:00
Adrien HARNAY 1d924549ca Add onPressIn & onPressOut props to Text (#31288)
Summary:
I added onPressIn & onPressOut props to Text to help implement custom highlighting logic (e.g. when clicking on a Text segment). Since TouchableOpacity can't be nested in Text having custom lineHeights without bugs in some occasions, this modification helps to replicate its behavior.

## Changelog

[General] [Added] - Add onPressIn & onPressOut props to Text

Pull Request resolved: https://github.com/facebook/react-native/pull/31288

Test Plan:
```
const [pressing, setPressing] = useState(false);

<Text
  onPressIn={() => setPressing(true)}
  onPressOut={() => setPressing(false)}
  style={{ opacity: pressing ? 0.5 : 1 }}
/>
```

Thanks in advance!

Reviewed By: yungsters

Differential Revision: D27945133

Pulled By: appden

fbshipit-source-id: 8342ca5f75986b4644a193d2f71eab3bc0ef1a5f
2021-05-06 12:42:00 -07:00
Héctor Ramos ae07c53d0b Resolve "fatal: not a git repository" error outside of git repositories
Summary:
CocoaPods will display a "fatal: not a git repository" when these podspecs are consumed within Facebook's internal Mercurial repository due to the reliance on `git` to obtain the current commit hash.

In these cases, the podspec is being consumed locally and the commit hash is unnecessary.

The error is removed by avoiding the use of `git` if the current working directory is not a git repository (or any of the parent directories).

Changelog:
[Internal] [iOS] - Remove CocoaPods error within Facebook's repository

Reviewed By: fkgozali

Differential Revision: D27750974

fbshipit-source-id: 99159611c580baf5526f116948c5ff60e1c02e5c
2021-04-15 13:30:31 -07:00
Samuel Susla 7e81c1d483 Implement caretHidden in multiline text input
Summary:
Changelog: [internal]

Add missing implementation of caretHidden to multiline text input. This will work for both React Native Classic and New React Native Renderer.

Reviewed By: shergin

Differential Revision: D26818087

fbshipit-source-id: 3597604a6bd414a4a3b292d809d63a18efa8acb3
2021-03-04 10:53:35 -08:00
Luna Wei 33ff4445dc Fix disabled behavior
Summary:
Changelog:
[General][Fixed] - Pass disabled prop to pressability config

Reviewed By: kacieb

Differential Revision: D26590399

fbshipit-source-id: dd4f8f25d1b243b2983cd4ffaadb5d3dc6f3ed3e
2021-02-22 16:56:48 -08:00
Peter Argany f0faa7843c Remove iOS10/tvOS10 support from remaining podfiles
Summary: Changelog: [iOS] Remove iOS10/tvOS10 support from remaining podfiles

Reviewed By: shergin

Differential Revision: D26410811

fbshipit-source-id: 9050346def5070338e709ff102a284a828821586
2021-02-19 13:47:25 -08:00
Micha Reiser 93377ff508 Remove "use strict" directive from ES Modules
Summary:
ES Modules implicitly enable strict mode. Adding the "use strict" directive is, therefore, not required.

This diff removes all "use strict" directives from ES modules.

Changelog:

[Internal]

Reviewed By: motiz88

Differential Revision: D26172715

fbshipit-source-id: 57957bcbb672c4c3e62b1db633cf425c1c9d6430
2021-02-02 11:12:56 -08:00
Samuel Susla 88c43490a1 Fix initial placeholder in multiline TextInput
Summary:
Changelog: [internal]

`[self _invalidatePlaceholderVisibility]` wasn't triggered in multiline text input in Fabric. Even in Paper it was triggered what to me seems like coincidence rather than intention (I might be wrong). This is more explicit, visibility of placeholder text needs to be re-evaluated every time placeholder text is changed.

Reviewed By: shergin

Differential Revision: D26172754

fbshipit-source-id: 3a767d333b79c266a3d70a96883b1289fff16750
2021-02-01 10:59:38 -08:00
Tim Yung f275514f27 RN: Modernize Text Component
Summary:
Rewrites the `Text` component using modern best practices.

Notably, `Text` no longer depends on `Touchable` and now instead depends on `Pressability`.

Changelog:
[Internal]

Reviewed By: mdvacca

Differential Revision: D26106824

fbshipit-source-id: 0797e66075ae03c51dd5b4b3395b21ae92c39ba6
2021-01-27 16:20:20 -08:00
David Vacca 3dd3123113 Avoid retrieving view configs on Text component
Summary:
This diff avoids retrieving view configs on Text component when static view configs are enabled

changelog: [interrnal]

Reviewed By: JoshuaGross, sammy-SC

Differential Revision: D25577278

fbshipit-source-id: 674b8067cea13d284848e35dabaf26cd1bea4e27
2021-01-26 14:05:34 -08:00
Tim Yung 1433ed6333 Text: Restore android_hyphenationFrequency
Summary:
Restore the `android_hyphenationFrequency` attribute in the view config for `Text`. This was accidentally dropped by D23708205 (https://github.com/facebook/react-native/commit/06ce64356594a921cd9ae4f71c15dd56dd0e53a3) (06ce643565).

Changelog:
[Android][Fixed] - Restore `android_hyphenationFrequency` on `Text`.

Reviewed By: mdvacca

Differential Revision: D25889971

fbshipit-source-id: 622eef618370efdd9a8b060ccd3272e25de218fa
2021-01-13 10:11:12 -08:00
Pieter Vanderwerff f2052fedc2 Land suppressions for 0.142.0 release to xplat
Summary:
This change contains the suppressions for the up coming v0.142.0 Flow release.

The new suppressions are a result the following changes:
* Disallow flowing functions or inexact objects to indexed objects to improve object soundness. This can cause errors if you are passing a function or inexact objects when an indexed object is expected.
* Flow now processes imports before checking the body of a file. In some rare cases this can expose previously skipped errors due to the processing order.

Reviewed By: mroch

Differential Revision: D25820434

fbshipit-source-id: 59cc1d852ffc8cc39f0d5112ce485fb33f05c092
2021-01-07 11:33:45 -08:00
Tim Yung 130618fd85 RN: Suppress RCTVirtualText Warning in Bridgeless
Summary:
The `DummyUIManager` module warns whenever `RCTVirtualText` is initialized. This stops that.

Changelog:
[Internal]

Reviewed By: PeteTheHeat

Differential Revision: D25073194

fbshipit-source-id: 8b9052d1cbb9a4defa5efbd110e1a91cd8884c48
2020-11-18 20:59:24 -08:00
Brian Vaughn 68a476103a Name a bunch of anonymous RN contexts
Summary:
Changelog:
[General] [Changed] - Added (DEV-only) `displayName` to some RN contexts to make them more easy to differentiate when debugging.

Reviewed By: lunaleaps

Differential Revision: D24993068

fbshipit-source-id: 4904259eda50444c2f74700a3540ff4fd02ac322
2020-11-16 13:12:09 -08:00
Tim Yung dd2a9af69b Text: Setup Rewrite Experiment
Summary:
Prepares for production experimentation of a reimplementation of the `Text` component that uses `Pressability` and React Hooks.

After I validate the new experimental implementation of `Text`, I will revert these changes and replace `Text.js` with the new implementation.

Changelog:
[Internal]

Reviewed By: nadiia, kacieb

Differential Revision: D24490569

fbshipit-source-id: 1ee4af72fcbda1b1d283a81c6bdf3fe67aa17e73
2020-10-26 21:19:25 -07:00
Tim Yung a911efaecd Text: Refine Exported Flow Type
Summary:
Refines the exported type of `Text` so that it is more accurate.

Instead of `HostComponent<TextProps>` (which is not exactly accurate), we use the recently introduced types: `NativText` and `NativeVirtualText`.

Changelog:
[Changed][General] - Refined Flow type for `Text` component.

Reviewed By: nadiia

Differential Revision: D24486720

fbshipit-source-id: fad114fd14335933ebc2f7430d7b8b7838b6b523
2020-10-22 20:01:39 -07:00
Lulu Wu ea93151f21 Make RCTEventDispatcher TurboModule-compatible
Summary:
This diff ended up being a bit more complicated than I anticipated, since the source files in `ReactInternal` were depending on `RCTEventDispatcher`. I made the following changes:
1. Make `RCTEventDispatcher` a `protocol`, keep it in `ReactInternal`.
2. Rename the `RCTEventDispatcher` NativeModule to `RCTEventDispatcherModule`, make it conform to the `RCTEventEmitter` `protocol`, and move it to `CoreModules`.
3. Where necessary, replace categories of `RCTEventDispatcher` with functions.

Changelog:
[iOS][Added] - Make RCTEventDispatcher TurboModule-comaptible

Reviewed By: fkgozali

Differential Revision: D18439488

fbshipit-source-id: b3da15c29459fddf884519f33b0c3b8c036b5539
2020-10-14 02:40:10 -07:00
Valentin Shergin 7ebb71a32f Back out "Align multi-line TextInput onSubmitEditing behavior"
Summary:
This is a revert of D22488870 (https://github.com/facebook/react-native/commit/521b16730dd07d80261086c2f33eed2a766d404e). (https://github.com/facebook/react-native/pull/29177)
We have to revert it because we realized that it's a breaking change without a very good reason. We have to figure out a better way to unify platform behaviors.

Changelog:
[iOS][Fixed] - Reverted recent change in TextInput (#29177)

Reviewed By: fkgozali

Differential Revision: D24200517

fbshipit-source-id: af0e561a6b8d9ade487be6b197a5d79d326442b6
2020-10-08 16:08:24 -07:00
Tommy Nguyen 521b16730d Align multi-line TextInput onSubmitEditing behavior (#29177)
Summary:
Aligns behavior to be consistent with Android and the [documentation](https://reactnative.dev/docs/textinput#bluronsubmit). `onSubmitEditing` should not be called when `blurOnSubmit=false`.

## Changelog

[iOS] [Fixed] - Align multi-line TextInput onSubmitEditing behavior

Pull Request resolved: https://github.com/facebook/react-native/pull/29177

Test Plan: ![textinput-blur-align](https://user-images.githubusercontent.com/4123478/85121116-85b4b200-b224-11ea-86c5-065e9e6d22ba.gif)

Reviewed By: shergin

Differential Revision: D22488870

Pulled By: hramos

fbshipit-source-id: 2dec3a55da6384389a8358896ef1fbfd806d0304
2020-09-29 15:57:52 -07:00
simek 2160377574 remove most of tvOS remnants from the code (#29407)
Summary:
Refs: [0.62 release](https://reactnative.dev/blog/#moving-apple-tv-to-react-native-tvos), https://github.com/facebook/react-native/issues/28706, https://github.com/facebook/react-native/issues/28743, https://github.com/facebook/react-native/issues/29018

This PR removes most of the tvOS remnants in the code. Most of the changes are related to the tvOS platform removal from `.podspec` files, tvOS specific conditionals removal (Obj-C + JS) or tvOS CI/testing pipeline related code.

In addition to the changes listed above I have removed the deprecated `Platform.isTVOS` method. I'm not sure how `Platform.isTV` method is correlated with Android TV devices support which is technically not deprecated in the core so I left this method untouched for now.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

* **[Internal] [Removed]** - remove most of tvOS remnants from the code:
  * `TVEventHandler`, `TVTouchable`, `RCTTVView`, `RCTTVRemoteHandler` and `RCTTVNavigationEventEmitter`
* **[Internal] [Removed]** - remove `TARGET_TV_OS` flag and all the usages
* **[iOS] [Removed]** - remove deprecated `Platform.isTVOS` method
* **[iOS] [Removed]** - remove deprecated and TV related props from View:
  * `isTVSelectable`, `hasTVPreferredFocus` and `tvParallaxProperties`
* **[iOS] [Removed]** - remove `BackHandler` utility implementation

Pull Request resolved: https://github.com/facebook/react-native/pull/29407

Test Plan: Local tests (and iOS CI run) do not yield any errors, but I'm not sure how the CI pipeline would react to those changes. That is the reason why this PR is being posted as Draft. Some tweaks and code adjustment could be required.

Reviewed By: PeteTheHeat

Differential Revision: D22619441

Pulled By: shergin

fbshipit-source-id: 9aaf3840c5e8bd469c2cfcfa7c5b441ef71b30b6
2020-09-28 21:26:41 -07:00
Tim Yung 06ce643565 Text: Cleanup Native Component Configuration
Summary:
Cleans up the native component configuration for `RCTText` and `RCTVirtualText`.

This //does// lead to a breaking change because `Text.viewConfig` will no longer exist. However, I think this is acceptable because `viewConfig` has already long stopped being an exported prop on other core components (e.g. `View`).

Changelog:
[General][Removed] - `Text.viewConfig` is no longer exported.

Reviewed By: shergin

Differential Revision: D23708205

fbshipit-source-id: 1ad0b0772735834d9162a65d9434a9bbbd142416
2020-09-28 17:23:49 -07:00
Samuel Susla 64ac01dbbe Prevent change of delegate in RCTUITextView
Summary:
Changelog: [internal]

# Problem

`[RCTUITextView setDelegate]` is a public method and if something changes the delegate, appropriate events won't be called on the component (onTextChange, onSelectionChange and the others).

# Solution

Prevent setting of delegate from outside of the class. Ideally we would want to hide `setDelegate` altogether but that would require a rewrite of `RCTUITextView`.

Reviewed By: JoshuaGross, shergin

Differential Revision: D23813095

fbshipit-source-id: 8b76ac86727d262d0f9b81adfc8e75157847284c
2020-09-24 01:02:40 -07:00
Emily Janzer b352e2da81 Create a ClickableSpan for nested Text components
Summary:
Right now nested Text components are not accessible on Android. This is because we only create a native ReactTextView for the parent component; the styling and touch handling for the child component are handled using spans. In order for TalkBack to announce the link, we need to linkify the text using a ClickableSpan.

This diff adds ReactClickableSpan, which TextLayoutManager uses to linkify a span of text when its corresponding React component has `accessibilityRole="link"`. For example:

  <Text>
    A paragraph with some
    <Text accessible={true} accessibilityRole="link" onPress={onPress} onClick={onClick}>links</Text>
    surrounded by other text.
  </Text>

With this diff, the child Text component will be announced by TalkBack ('links available') and exposed as an option in the context menu. Clicking on the link in the context menu fires the Text component's onClick, which we're explicitly forwarding to onPress in Text.js (for now - ideally this would probably use a separate event, but that would involve wiring it up in the renderer as well).

ReactClickableSpan also applies text color from React if it exists; this is to override the default Android link styling (teal + underline).

Changelog: [Android][Fixed] Make nested Text components accessible as links

Reviewed By: yungsters, mdvacca

Differential Revision: D23553222

fbshipit-source-id: a962b2833d73ec81047e86cfb41846513c486d87
2020-09-15 17:34:35 -07:00
Tim Yung 49015b0f5b Text: Remove Extraneous onResponderGrant Argument
Summary:
This argument for the `onResponderGrant` event callback on `Text` is extraneous.

Changelog:
[General][Fixed] - Remove extraneous argument for `onResponderGrant` Flow type on `Text`.

Reviewed By: TheSavior

Differential Revision: D23513190

fbshipit-source-id: c4057cf534f4cdf73967e4324db64acc8cf323d0
2020-09-04 16:10:57 -07:00