Commit Graph
7005 Commits
Author SHA1 Message Date
fabriziobertoglio1987 5ddb9977e6 Adding grid role to ViewAccessibility to fix flow errors. (#34267)
Summary:
Adding grid role to ViewAccessibility to fix flow errors.
fixes https://github.com/facebook/react-native/issues/30861 fixes https://github.com/facebook/react-native/issues/30972

## Changelog

[General] [Fixed] - Adding grid role to ViewAccessibility to fix flow errors.

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

Test Plan:
<details><summary>flow error for missing accessibilityRole type grid</summary>
<p>

<image src="https://user-images.githubusercontent.com/24992535/180728969-beccb7f7-d882-4a94-831d-1c08822fc030.png" width="800" />
</p>
</details>

<details><summary>adding grid role to ScrollView</summary>
<p>

https://user-images.githubusercontent.com/24992535/180721100-62de76af-ea23-44a6-816e-f6fa39835b77.mp4
</p>
</details>

<details><summary>adding grid role to FlatList</summary>
<p>

https://user-images.githubusercontent.com/24992535/180724852-861c2981-0b06-4c66-a983-0017785062fe.mp4
</p>
</details>

<details><summary>adding grid role to SectionList</summary>
<p>

https://user-images.githubusercontent.com/24992535/180788810-d1869381-1e6b-42aa-b9b2-a84aece41326.mp4
</p>
</details>

Reviewed By: NickGerleman

Differential Revision: D38121921

Pulled By: dmitryrykun

fbshipit-source-id: 3bc335b3a525e75ae2e032f6a35540b3e95cd6a8
2022-07-27 07:44:59 -07:00
Vitalii T 14c207d9e1 Refactor: Minor performance improvement of BackHandler.removeEventListener (#34281)
Summary:
I've noticed that `BackHandler.removeEventListener()` performs two same `indexOf()` calls on an array that is not changing. By removing extra `indexOf` we can slightly improve time complexity of `BackHandler.removeEventListener()` from O(2n) to O(n)

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[Android] [Fixed] - Remove extra indexOf call in BackHandler.removeEventListener

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

Test Plan:
1. Add the following code to any function component
```javascript
  BackHandler.addEventListener('hardwareBackPress', () => true).remove();
```

2. Press on hardware back button

Expected result: Application closes

Reviewed By: dmitryrykun

Differential Revision: D38198510

Pulled By: javache

fbshipit-source-id: eab6a57689a536623138a4b3ebddbf9ba87d281f
2022-07-27 06:57:21 -07:00
Oleh Malanchuk 98d74d6eb9 Submit the text on Accessory Done button clicked.
Summary:
At the moment we are having a bug that whenever we hit a "Done" button in an input field, a value is not submitted back, so the users cannot complete their work. Here is an example:

https://pxl.cl/28xFq

To fix it, we call a textInputShouldSubmitOnReturn method on Accessory button click.

Changelog
[IOS][Fixed] - Fix keyboard accessory button not triggering onSubmitEditing

Reviewed By: dmitryrykun

Differential Revision: D38152974

fbshipit-source-id: fc026dffd641966cd3d342d95a56c43c71008036
2022-07-27 05:46:41 -07:00
Nick Gerleman 479053cb3c Add VirtualizedList_EXPERIMENTAL (CellRenderMask Usage)
Summary:
# This Change

https://github.com/react-native-community/discussions-and-proposals/pull/335  discussed a set of problems with VirtualizedList and focus. These were seen as severe externally for a11y on desktop. The issues center on users of keyboard and accessibility tools, where users expect to be able to move focus in an uninterrupted loop.

The design and implementation evolved to be a bit more general, and without any API-surface behavior changes. It was implemented and rolled out externally as a series of changes. The remaining changes that were not upstreamed into RN are rolled into https://github.com/facebook/react-native/pull/32646

This diff brings this change into the repo, as a separate copy of VirtualizedList, to measure its impact to guardrail metrics, without yet making it the default implementation. The intention is for this to be temporary, until there is confidence the implementation is correct.

## List Implementation (more on GitHub)

This change makes it possible to synchronously move native focus to arbitrary items in a VirtualizedList. This is implemented by switching component state to a sparse bitset. This was previously implemented and upstreamed as `CellRenderMask`.

A usage of this is added, to keep the last focused item rendered. This allows the focus loop to remain unbroken, when scrolling away, or tab loops which leave/re-enter the list.

VirtualizedList tracks the last focused cell through the capture phase of `onFocus`. It will keep the cell, and a viewport above and below the last focused cell rendered, to allow movement to it without blanking (without using too much memory).

## Experimentation Implementation

A mechanism is added to gate the change via VirtualizedListInjection, mirroring the approach taken for Switch with D27381306 (https://github.com/facebook/react-native/commit/683b825b327e7fa71e87e3d613cb9acd37c24288).

It allows VirtualizedList to delegate to a global override. It has a slight penalty to needing to import both modules, but means code which imports VirtualizedList directly is affected the changes.

Changelog:
[Internal][Added] - Add VirtualizedList_EXPERIMENTAL (CellRenderMask Usage)

Reviewed By: lunaleaps

Differential Revision: D38020408

fbshipit-source-id: ad0aaa6791f3f4455e3068502a2841f3ffb40b41
2022-07-26 20:06:58 -07:00
Nick Gerleman 04e43544b8 Allow VirtualizedListContext to support different component type
Summary:
This change is in preparation of adding a separate `VirtualizedList_EXPERIMENTAL` component.

Both the original, and experimental lists use `VirtualizedListContext`, which itself references back to the VirtualizedList class type. VirtualizedList private methods are currently included in the type system, and are called in other VirtualizedList code (see https://github.com/facebook/react-native/commit/b2f871a6fa9c92dd0712055384b9eca6d828e37d). This prevents Flow from seeing the two classes are compatible if "private" methods change.

My first attempt was to parameterize the context, to allow both `VirtualizedList`, and `VirtualizedList_EXPERIMENTAL` to use the same code without sacrificing type safety or adding further duplication. This added more complexity than it is worth, so I am instead loosening the type on VirtualizedListContext to pass around a more generic handle.

Changelog:
[Internal][Changed] - Allow VirtualizedListContext to support different component type

Reviewed By: javache

Differential Revision: D38017086

fbshipit-source-id: 91e8f6ab2591d3ae9b7f9263711b4a39b78f68e0
2022-07-26 20:06:58 -07:00
Christoph Purrer 547220fee4 Avoid sharing mutable attributed string across threads in RCTBaseTextInputShadowView
Summary:
The `NSMutableAttributedString` was initialized with the same backing store as the cached attributed string on the shadow queue (background thread), but then passed to the main thread and ultimately the JS thread.

This explicitly copies the mutable attributed string into an immutable one on the shadow thread before passed off to other threads, which hopefully will address the `convertIdToFollyDynamic` crash that always includes `RCTBaseTextInputShadowView` touching an attributed string on the shadow queue in the trace.

Changelog:
[iOS][Fixed] - Possible fix for convertIdToFollyDynamic crash in RCTBaseTextInputView and RCTEventDispatcher

Reviewed By: sammy-SC

Differential Revision: D38133150

fbshipit-source-id: f371da5d17a32c3341287cd3e9730b31a98495f9
2022-07-26 12:01:16 -07:00
Nick Gerleman aabb5df7ec Add types for onFocusCapture/onBlurCapture
Summary:
Add capture-phase focus events to the type system, for use in the refactored VirtualizedList https://github.com/facebook/react-native/pull/32646/files

Tracking the last focused child is done via focus events. Focus events are bubbling (vs direct events like onLayout), and are given both a "capture" phase, and "bubbling phase", like DOM events on the web. https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing

The VirtualizedList change wants to know if a child will receive focus. This is not possible to reliably capture in the bubbling phase, since a child may stop propagation.

See https://github.com/react-native-community/discussions-and-proposals/pull/335#discussion_r584851337 for some discussion with Scott Kyle about this issue back in the day

This is done by convention in React by adding a "capture" variant of the `onXXX` method. For all platforms I've seen with focus events, these map the `topFocus` native event to `onFocus` for bubbling phase, and `onFocusCapture` for capture phase. See https://reactjs.org/docs/events.html#supported-events

Changelog:
[General][Added] - Add types for onFocusCapture/onBlurCapture

Reviewed By: javache

Differential Revision: D38013861

fbshipit-source-id: 7bda22e1a4d5e36ac5e34e804abf6fb318a41baf
2022-07-26 04:34:28 -07:00
Antoine Doubovetzky 0d068a5699 (AppState) remove outdated TODO (#34264)
Summary:
We are already returning the `remove` function, and the `removeEventListener` method has been removed in this PR: https://github.com/facebook/react-native/issues/33580. So I believe this comment is now outdated and no longer relevant.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[Internal] [Removed] - Remove outdated TODO in AppState

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

Reviewed By: dmitryrykun

Differential Revision: D38120344

Pulled By: GijsWeterings

fbshipit-source-id: c6c4d42f5b631a67bb6ad49c14df1a772f1cc71b
2022-07-26 04:12:40 -07:00
Christoph Purrer 8b174a57c8 Possible fix for convertIdToFollyDynamic crash in RCTBaseTextInputView and RCTEventDispatcher
Summary:
A crash encountered in react-native-macOS is very similar to one fixed by https://github.com/microsoft/react-native-macos/pull/489#discussion_r451789471 (see discussion), and it's possible this `replacement` string also suffers from sharing the same backing store as the attributed string (maybe only when the range encompasses the entire string?) and therefore should be copied as well.

Changelog:
[iOS][Fixed] - Possible fix for convertIdToFollyDynamic crash in RCTBaseTextInputView and RCTEventDispatcher

Reviewed By: sammy-SC

Differential Revision: D38064551

fbshipit-source-id: 9c15f2a980155ab3cbb3fde79fcb93b24ee2091a
2022-07-25 18:14:46 -07:00
Christoph Purrer 7db6c080f5 Fix exception thrown by [RCTTextView description] on macOS
Summary:
This method assumes a semicolon existed before the closing bracket (`>`), but only does on iOS. This instead puts the content before the closing bracket, which is always there on both platforms.

Changelog:
[macOS][Fixed] - Fix exception thrown by [RCTTextView description] on macOS

Reviewed By: sammy-SC

Differential Revision: D38074642

fbshipit-source-id: f46d15c2bf2d966d1c1430568f083e4d501d4b40
2022-07-25 17:17:11 -07:00
Danilo Bürger 653a19a8cd Allow preferred Alert button regardless of the style (#34253)
Summary:
See https://github.com/facebook/react-native/pull/32538 for the discussion

cc robbie-c

## 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] - Allow preferred Alert button regardless of the style

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

Test Plan: Same test plan as PR mentioned above

Reviewed By: lunaleaps

Differential Revision: D38112619

Pulled By: cipolleschi

fbshipit-source-id: 2ac4fc6226a859e69f0df27913898effa5e092eb
2022-07-25 10:19:06 -07:00
Michael Sokolnicki a67360b0f3 Remove MaskedViewIOS from react-native-github
Summary:
Remove MaskedViewIOS from react-native-github, update deprecation warnings, rebuild CocoaPods.

Changelog:
[General][Removed] - Remove MaskedViewIOS

Reviewed By: lunaleaps

Differential Revision: D37860775

fbshipit-source-id: 963b4b9891eecf5610cfad1e93ac8bf83f29f521
2022-07-22 17:07:26 -07:00
Robbie Coomber 000bbe8013 Add support for "preferred" AlertButton (#32538)
Summary:
Currently, with the Alert API on iOS, the only way to bold one of the buttons is by setting the style to "cancel". This has the side-effect of moving it to the left. The underlying UIKit API has a way of setting a "preferred" button, which does not have this negative side-effect, so this PR wires this up.

See preferredAction on UIAlertController https://developer.apple.com/documentation/uikit/uialertcontroller/

Docs PR: https://github.com/facebook/react-native-website/pull/2839

## Changelog

[iOS] [Added] - Support setting an Alert button as "preferred", to emphasize it without needing to set it as a "cancel" button.

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

Test Plan:
I ran the RNTesterPods app and added an example. It has a button styled with "preferred" and another with "cancel", to demonstrate that the "preferred" button takes emphasis over the "cancel" button.

![Simulator Screen Shot - iPhone 11 - 2021-11-04 at 09 48 35](https://user-images.githubusercontent.com/2056078/140292801-df880c43-c330-40df-b8e4-c1476c1645d6.png)

Luna:
* Also tested this on Catalyst
{F754959632}

Reviewed By: sammy-SC

Differential Revision: D34357811

Pulled By: lunaleaps

fbshipit-source-id: 3d860702c49cb219f950904ae0b9fabef03b5588
2022-07-22 15:41:32 -07:00
Tony Du 1e3cb91707 Allow multiline TextInputs be submittable without blurring (#33653)
Summary:
For multiline TextInputs, it's possible to send the submit event when pressing the return key only with `blurOnSubmit`. However, there's currently no way to do so without blurring the input and dismissing the keyboard. This problem is apparent when we want to use a TextInput to span multiple lines but still have it be submittable (but not blurrable), like one might want for a TODO list.

![multiline-momentary-blur](https://user-images.githubusercontent.com/22553678/163596940-aae779f5-4d2a-4425-8ed0-e4aa77b90699.gif)

## 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] [Added] - Add `returnKeyAction` prop to `TextInput` component
[General] [Deprecated] - Remove usages of `blurOnSubmit` in native code and convert `blurOnSubmit` to `returnKeyAction` in the JavaScript conversion layer

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

Test Plan:
Verified old usages of combinations of `blurOnSubmit` and `multiline` matched previous behavior and that the new `returnKeyAction` prop behaves as expected.

| Android | iOS |
| --- | -- |
| ![android-returnkeyaction-test](https://user-images.githubusercontent.com/22553678/163597864-2e306f98-7b6e-4ddf-8a35-625d397d3dce.gif) | ![ios-returnkeyaction-test](https://user-images.githubusercontent.com/22553678/163598407-9e059f74-3549-4b46-8e03-c19bfaa6dd3d.gif)  |

With the changes, the TODO list example from before now looks like this:

![multiline-no-momentary-blur](https://user-images.githubusercontent.com/22553678/163598810-f3a71d62-5514-486e-bf6a-79169fe86378.gif)

Reviewed By: yungsters

Differential Revision: D35735249

Pulled By: makovkastar

fbshipit-source-id: 1f2237a2a5e11dd141165d7568c91c9824bd6f25
2022-07-22 13:08:45 -07:00
Pieter Vanderwerff a333eb2ac5 Deploy suppressions ahead of 0.183.0 to xplat
Summary: Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D38020751

fbshipit-source-id: d32b15429605d2c42195d98de9e5455926f0022b
2022-07-21 12:31:37 -07:00
Eric Edouard 8993ffc82e Added border curve style prop ("Squircle" effect - iOS only) (#33783)
Summary:
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
NOTE: PR is based on https://github.com/facebook/react-native/pull/32017 which went stale for quite a long time but can now safely be closed

![](https://preview.redd.it/nuvl4746ys471.png?width=960&crop=smart&auto=webp&s=084a517a645364ac246b70b7fa8e0f2470cc7af3)

Since iOS 13+, it is possible to change the corner curve property on iOS in order to smoothen border radius and make it more "rounded" (also called "squircle")
Here's an [article](https://medium.com/arthurofbabylon/a-smooth-corner-radius-in-ios-54b80aa2d372) explaining in details what it is.
This property is also built in figma, but currently there is no way to implement this directly with react-native despite it being available natively on iOS.

Many open source react-native libraries were created in order to simulate this behaviour:
[react-native-super-ellipse-mask](https://github.com/everdrone/react-native-super-ellipse-mask)
[react-native-squircle-view](https://github.com/everdrone/react-native-squircle-view)
[react-native-figma-squircle](https://github.com/tienphaw/react-native-figma-squircle)

But they rely on creating an SVG shape with the smoothed corners and masking the view behind. This makes it not very performant (flickering on mounting was a common side-effect)

This PR aims at implementing the property natively.

PR for the docs update: https://github.com/facebook/react-native-website/pull/2785

## 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] - Added `borderCurve` style prop for smooth border radius (squircle effect)

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

Test Plan:
We used the RNTester app and added an example with `cornerCurve ` set to `'continuous'` (only on iOS).

As the difference is quite subtle, we also made some more tests to better illustrate the difference (these are not in the RN-tester app):

![IMG_0810](https://user-images.githubusercontent.com/19872411/133893536-26207c53-aade-4583-9eef-7a1739b6907b.PNG)

We overlapped two views with `position: absolute`, the one in the background has a red background and has `cornerRadius` set to `false`, and the one in the foreground is set to `true`. We can clearly see where the borders differs on the corners.

Reviewed By: sammy-SC

Differential Revision: D37883631

Pulled By: cipolleschi

fbshipit-source-id: 09f06de9628fa326323eba63875de30102c4a59e
2022-07-21 04:11:30 -07:00
Ramanpreet Nara b708ee9b4e Log if bridgeless mode is enabled, when JS Module call fails
Summary:
Log whether bridgeless mode is enabled or not when calling into a JavaScript module method fails.

We are seeing a surge of these crashes in MessageQueue.js bridgeless mode. This temporary log will help us drill down into the issue.

Changelog: [Internal]

Created from CodeHub with https://fburl.com/edit-in-codehub

This should not mess with the sitevar overrides.
These are the two diffs where we mapped the venice and bridge errors to the same mid: D36649249, D36649249.

Reviewed By: fkgozali

Differential Revision: D37898744

fbshipit-source-id: 0ab337c8c0d73bd70c4756a16b8ece8ba8730c47
2022-07-18 17:54:37 -07:00
Paige Sun 639daf8641 Minor: Rename AccessibilityInfo.sendAccessibilityEvent_unstable to sendAccessibilityEvent
Summary:
Changelog:
[Internal] Rename AccessibilityInfo.sendAccessibilityEvent_unstable to sendAccessibilityEvent

In Fabric, we want people to use `AccessibilityInfo.sendAccessibilityEvent` instead of `UIManager.sendAccessibilityEvent` for Android. The API is not unstable. There is a test in [AccessibilityExample.js](https://github.com/facebook/react-native/blob/c940eb0c49518b82a3999dcac3027aa70018c763/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L959) in RNTester to confirm that it works.

A search for [`AccessibilityInfo.sendAccessibilityEvent_unstable` in Github](https://github.com/search?q=AccessibilityInfo.sendAccessibilityEvent_unstable&type=Code) shows that it's not being used yet, which makes sense because it's an Fabric API. Therefore it's safe to rename it.

Reviewed By: sammy-SC

Differential Revision: D37901006

fbshipit-source-id: 73f35b09ca8f9337f4d66a431f0a3f815da38249
2022-07-18 15:19:53 -07:00
Garrett Forbes Monroe 191eb62edb Revert D37801394: Multisect successfully blamed D37801394 for test or build failures
Summary:
This diff is reverting D37801394 (https://github.com/facebook/react-native/commit/51f49ca9982f24de08f5a5654a5210e547bb5b86)
D37801394 (https://github.com/facebook/react-native/commit/51f49ca9982f24de08f5a5654a5210e547bb5b86) has been identified to be causing the following test or build failures:
Tests affected:
- https://www.internalfb.com/intern/test/844424989736255/

Here's the Multisect link:
https://www.internalfb.com/intern/testinfra/multisect/1062919
Here are the tasks that are relevant to this breakage:
T116036972: 105 tests started failing for oncall bridgeless_jest_e2e_tests in the last 2 weeks
We're generating a revert to back out the changes in this diff, please note the backout may land if someone accepts it.

**To Address Land blocker from previous version (see pic):**
{F752642767}

```
Changelog:
[General][Change] - Revert breaking change in MPay order creation screen (user input in duplicated, and then not deletable. See T126127801 for more details)
```

Reviewed By: philIip

Differential Revision: D37863306

fbshipit-source-id: 24f2448d7bc9761ec31edd6f6b97c668171027d3
2022-07-15 08:20:20 -07:00
George Zahariev f392ba6725 Codemod {...null} to {} in xplat/js
Summary:
Now that [exact_empty_objects has been enabled](https://fb.workplace.com/groups/flowlang/posts/1092665251339137), we can codemod `{...null}` to `{}` - they are now equivalent.

1) Run my one-off jscodeshift codemod
2) `scripts/flow/tool update-suppressions .` (as some suppressions move around due to the change)

drop-conflicts

Reviewed By: bradzacher

Differential Revision: D37834078

fbshipit-source-id: 6bf4913910e5597e5dd9d5161cd35deece6a7581
2022-07-14 17:00:28 -07:00
Nick Gerleman 51f49ca998 Fix TextInput dropping text when used as uncontrolled component with defaultValue
Summary:
A layout-impacting style change will trigger a layout effect hook within `TextInput`. This hook fires a ViewManager command to set the text input based on the known JS value: https://github.com/facebook/react-native/blob/d82cd3cbce1597512bb2868fde49b5b3850892a0/Libraries/Components/TextInput/TextInput.js#L1009

The JS value is determined using `value` if set, falling back to `defaultValue`. If a component uses `TextInput` as an uncontrolled component, and does not set this value, the command wipes text input back to the default value. This does not happen on re-render of the JS side, despite setting text prop, since the underlying native property never changes/triggers a rerender.

This change alters the logic to prefer `lastNativeText` instead of `defaultValue` when available, to retain the updated `TextInput` content on relayout.

Reviewed By: javache

Differential Revision: D37801394

fbshipit-source-id: d56c719d56bebac64553c731ce9fca8efc7feae9
2022-07-13 16:41:17 -07:00
George Zahariev 67e12a19cb Suppress errors ahead of launch
Summary:
Ahead of enabling the `exact_empty_objects` option, suppress errors so that actually enabling the option is easier. We can do this without enabling the option by codemoding `{}` to `{...null}` in files that have errors.

Process:
1) Get list of files with errors when enabling the option
2) Codemod `{}` to `{...null}` in those files
3) Suppress resulting errors
4) Land diff with `drop-conflicts` flag
5) Announce and enable option (with many fewer files to edit)
6) Codemod all `{...null}` to `{}`

drop-conflicts

We are working on making the empty object literal `{}` have the type `{}` - i.e. exact empty object - rather than being unsealed.
More info in these posts: https://fb.workplace.com/groups/flowlang/posts/903386663600331, https://fb.workplace.com/groups/floweng/posts/8626146484100557

Reviewed By: pieterv

Differential Revision: D37731004

fbshipit-source-id: a9305859ba4e8adbdb8ae8feff3ec8a2f07ed236
2022-07-11 11:33:24 -07:00
Pieter Vanderwerff 6c563a507f Suppress missing 'this' annotations in xplat/js
Reviewed By: samwgoldman

Differential Revision: D37701888

fbshipit-source-id: 80cf21e4c942f00695c08ea8671efba0109aad32
2022-07-07 21:53:53 -07:00
Luna Wei 8be49e8746 PointerEvents: Remove '2' suffix
Summary: Changelog: [Internal] - We can now remove the '2' suffix as we had an internal implementation that was not truly aligned with W3C pointers but used the same name. We have aligned the internal types to match w3c so we can now remove the suffix that differentiates them.

Reviewed By: vincentriemer

Differential Revision: D37545813

fbshipit-source-id: 6f2336ae9e314066c340161113268c1f28621a71
2022-07-05 20:00:42 -07:00
Luna Wei d9b8e07b00 Add offsetX, offsetY to MouseEvent
Summary: Changelog: [Internal] - Adding offsetX, offsetY to MouseEvent interface. It's currently provided in a draft form: https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface

Reviewed By: vincentriemer

Differential Revision: D37436051

fbshipit-source-id: b3bb85acb82db348d3e1085881232e5358674ed7
2022-07-05 13:03:11 -07:00
wood1986 bd12e41188 fix: fix the race condition when calling readAsDataURL after new Blob(blobs) (#34096)
Summary:
```js
async () => {
  let blobs = [];
  for (let i = 0; i < 4; i++) {
    const res = await fetch();
    blobs = [...blobs, await res.blob()]
  }
  const blob = new Blob(blobs); // <<<<<<<<<<<<<<< a
  return await new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = async () => {
      await RNFS.writeFile(destPath, (fileReader.result as string).split(',')[1], 'base64');
      resolve(destPath);
    };
    fileReader.onabort = () => {
      reject('');
    };
    fileReader.onerror = (event) => {
      reject('');
    };
    fileReader.readAsDataURL(blob); // <<<<<<<<<<<<<<< b
  });
}
```

Sometime `fileReader.readAsDataURL` is unable to get blob from the dictionary after `new Blob(blobs)` and then reject with `Unable to resolve data for blob: blobId` in iOS or `The specified blob is invalid` in android. Because line `a` and `b` can be run in different thread. `new Blob([])` is in progress and `fileReader.readAsDataURL` accesses the blob dictionary ahead of the blob creation.

The expected behaviour is it should finish new Blob([]) first and then readAsDataURL(blob)

To fix that, there should be a lock inside the method `createFromParts`. For iOS, It needs to be a recursive_mutex to allow same thread to acquire lock

## 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 the race condition when calling readAsDataURL after new Blob(blobs)

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

Reviewed By: cipolleschi

Differential Revision: D37514981

Pulled By: javache

fbshipit-source-id: 4bf84ece99871276ecaa5aa1849b9145ff44dbf4
2022-06-30 05:13:17 -07:00
Sam Zhou 4d62e0d2bf Add annotations to prepare for fully resolved environment
Summary: Changelog: [internal]

Reviewed By: samwgoldman

Differential Revision: D37469106

fbshipit-source-id: a28fc3f8a5947bb09a808a4162080c3fe6bfb1f5
2022-06-29 09:47:06 -07:00
hduprat afa5df1764 - Fix InputAccessoryView crash on Android (#33803)
Summary:
`InputAccessoryView` works fine on iOS, but crashes on Android - you can see that by using an Android device on the [Expo Snack from the official doc](https://reactnative.dev/docs/inputaccessoryview).
It forces the developer not to render the component on Android, which is usually good, but other components have implemented other, safer ways to deal with incompatibility issues.

I am of course open to discussion about this change, as well as other implementation ideas.

## Changelog

[Android] [Fixed] - Fix InputAccessoryView crash on Android

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

Test Plan:
`yarn test` gives out the following output:
![image](https://user-images.githubusercontent.com/3397791/167677057-3fda5b53-78bf-4bab-976f-c2e624f4a264.png)

Reviewed By: cipolleschi

Differential Revision: D37215394

Pulled By: cortinico

fbshipit-source-id: 66c4401f7c61b745ea893969d69c8dde3e5afb03
2022-06-28 06:13:47 -07:00
Zachinquarantine 7cfd77debd Remove deprecated style attributes (#34050)
Summary:
Remove deprecated "Transform" style attributes. These attributes were first deprecated in commit [ed76d4d8db](https://github.com/facebook/react-native/commit/ed76d4d8dbbf012c3f051e04354f76bd6ca98d1b)

## 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] [Removed] - Remove previously deprecated Transform style-attribute props

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

Test Plan:
~~TBD~~
CI checks are sucessful.

Reviewed By: cortinico

Differential Revision: D37483285

Pulled By: cipolleschi

fbshipit-source-id: d1b9522f9194432a8ec6a4391715e23ac83199bf
2022-06-28 04:17:58 -07:00
Zachinquarantine 6075d64acf Remove the isTVOS check (#34071)
Summary:
Removes the `isTVOS` check, which just duplicated and returned the `isTV` check anyway.

## 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] [Removed] - Remove deprecated `isTVOS` constant.

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

Test Plan: Run against CI, and apply changes as needed.

Reviewed By: cipolleschi

Differential Revision: D37434978

Pulled By: cortinico

fbshipit-source-id: 2b38253125251b0ce28cf10c88471d8f16704999
2022-06-27 02:30:10 -07:00
Pieter Vanderwerff 66c6a75650 Suppress missing annotations in xplat/js
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predictable.

Reviewed By: bradzacher

Differential Revision: D37388949

fbshipit-source-id: cdcbc98035ce9b6994842005ea46df42de54f9b8
2022-06-23 16:54:29 -07:00
Pieter Vanderwerff c940eb0c49 Add LTI annotations to function params in xplat/js [manually-modified]
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable.

Reviewed By: bradzacher

Differential Revision: D37363351

fbshipit-source-id: a9d3df7db6f9d094ac2ce81aae1f3ab4f62b243a
2022-06-22 23:01:55 -07:00
Pieter Vanderwerff e7a4dbcefc Add LTI annotations to function params in xplat/js [1/2]
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable.

Reviewed By: evanyeung

Differential Revision: D37353648

fbshipit-source-id: e5a0c685ced85a8ff353d578b373f836b376bb28
2022-06-22 21:36:52 -07:00
Pieter Vanderwerff d96744e277 Add LTI annotations to function params in xplat/js [2/2]
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable.

Reviewed By: evanyeung

Differential Revision: D37360113

fbshipit-source-id: 870bcfe680542b3861fefbaf372db0ae8b32cbf3
2022-06-22 18:46:51 -07:00
Luis Santana 68f3a42fc7 bump RTC-Folly to 2021.07.22 (#33841)
Summary:
Bumping RTC-Folly version used to address CVE-2022-24440.

## 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][Security] - Bump RTC-Folly to 2021-07-22

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

Reviewed By: Andjeliko, philIip

Differential Revision: D36425598

Pulled By: cortinico

fbshipit-source-id: d38c5f020dbecf794b10f12ed2da30e1825071af
2022-06-21 12:36:43 -07:00
Tim Yung e5c5dcd9e2 RN: Rewrite EventEmitter
Summary:
Rewrites `EventEmitter` as a simple, type-safe abstraction with a minimal interface.

The public interface of `EventEmitter` is unchanged. This rewrite was made possible only after deprecating and removing public methods that imposed restrictions on implementation details (e.g. deleting `removeListener`).

However, this includes a subtle breaking change that makes it behave the same as `EventEmitter` in Node.js and `EventTarget` in the DOM. The set of listeners being notified by `emit` will no longer be influenced by changes made during the course of notifying the existing listeners.

Changelog:
[General][Changed] - `EventEmitter#emit` now freezes the set of listeners before iterating over them, meaning listeners that are added or removed will not affect that iteration.

Reviewed By: javache

Differential Revision: D22153962

fbshipit-source-id: 81b87113590dee0296eff61374bf732171855453
2022-06-18 08:23:32 -07:00
Kacie Bawiec 4bb551d018 Back out "TalkBack support for ScrollView accessibility announcements (list and grid) - Javascript Only Changes"
Summary:
Original commit changeset: 3765213c5d8b

Original Phabricator Diff: D37189197 (https://github.com/facebook/react-native/commit/2d5882132fb2c533fe9bbba83576b8fac4aca727)

Changelog: [Internal]

Reviewed By: bvanderhoof

Differential Revision: D37260990

fbshipit-source-id: bfcb10f2d5a2a1427b72a10ef380df194b041ba0
2022-06-17 22:08:57 -07:00
fabriziobertoglio1987 2d5882132f TalkBack support for ScrollView accessibility announcements (list and grid) - Javascript Only Changes (#33180)
Summary:
This is the Javascript-only changes from D34518929 (https://github.com/facebook/react-native/commit/dd6325bafe1a539d348f3710e717a6344576b859), split out for push safety. Original summary and test plan below:

This issue fixes [30977][17] . The Pull Request was previously published by [intergalacticspacehighway][13] with [31666][19].
The solution consists of:
1. Adding Javascript logic in the [FlatList][14], SectionList, VirtualizedList components to provide accessibility information (row and column position) for each cell in the method [renderItem][20] as a fourth parameter [accessibilityCollectionItem][21]. The information is saved on the native side in the AccessibilityNodeInfo and announced by TalkBack when changing row, column, or page ([video example][12]). The prop accessibilityCollectionItem is available in the View component which wraps each FlatList cell.
2. Adding Java logic in [ReactScrollView.java][16] and HorizontalScrollView to announce pages with TalkBack when scrolling up/down. The missing AOSP logic in [ScrollView.java][10] (see also the [GridView][11] example) is responsible for announcing Page Scrolling with TalkBack.

Relevant Links:
x [Additional notes on this PR][18]
x [discussion on the additional container View around each FlatList cell][22]
x [commit adding prop getCellsInItemCount to VirtualizedList][23]

## Changelog

[Android] [Added] - Accessibility announcement for list and grid in FlatList

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

Test Plan:
[1]. TalkBack announces pages and cells with Horizontal Flatlist in the Paper Renderer ([link][1])
[2]. TalkBack announces pages and cells with Vertical Flatlist in the Paper Renderer ([link][2])
[3]. `FlatList numColumns={undefined}` Should not trigger Runtime Error NoSuchKey exception columnCount when enabling TalkBack. ([link][3])
[4]. TalkBack announces pages and cells with Nested Horizontal Flatlist in the rn-tester app ([link][4])

[1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050452894
[2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050462465
[3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1032340879
[4]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050618308
[10]:https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/android/widget/AdapterView.java#L1027-L1029 "GridView.java method responsible for calling setFromIndex and setToIndex"
[11]:https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1042518901 "test case on Android GridView"
[12]:https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050452894 "TalkBack announces pages and cells with Horizontal Flatlist in the Paper Renderer"
[13]:https://github.com/intergalacticspacehighway "github intergalacticspacehighway"
[14]:https://github.com/fabriziobertoglio1987/react-native/blob/80acf523a4410adac8005d5c9472fb87f78e12ee/Libraries/Lists/FlatList.js#L617-L636 "FlatList accessibilityCollectionItem"
[16]:https://github.com/fabriziobertoglio1987/react-native/blob/5706bd7d3ee35dca48f85322a2bdcaec0bce2c85/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java#L183-L184 "logic added to ReactScrollView.java"
[17]: https://github.com/facebook/react-native/issues/30977
[18]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6
[19]: https://github.com/facebook/react-native/pull/31666
[20]: https://reactnative.dev/docs/next/flatlist#required-renderitem "FlatList renderItem documentation"
[21]: https://github.com/fabriziobertoglio1987/react-native/commit/75147359c5d070406ebbe488c57c3cd94c08c19d "commit that introduces fourth param accessibilityCollectionItem in callback renderItem"
[22]: https://github.com/facebook/react-native/pull/33180#discussion_r826748664 "discussion on the additional container View around each FlatList cell"
[23]: https://github.com/fabriziobertoglio1987/react-native/commit/d50fd1a68112f40f4be3ac3aa4d67f96df33e387 "commit adding prop getCellsInItemCount to VirtualizedList"

Reviewed By: kacieb

Differential Revision: D37189197

Pulled By: blavalla

fbshipit-source-id: 3765213c5d8bfde56e0e5f155cdd899c368512e7
2022-06-17 17:59:51 -07:00
David 5854b11bf9 Add ability to pass ItemSeparatorComponent as React Element (#32748)
Summary:
Currently `ListHeaderComponent` & `ListFooterComponent` allow to use React Componetn & Elemelen

```tsx
<FlatList
  ListHeaderComponent={<View />} // valid
  ListHeaderComponent={View}     // valid
/>
```

But when you try to pass `ItemSeparatorComponent` as React Element it will throw an error

```tsx
<FlatList
  ItemSeparatorComponent={View}     // ok
  ItemSeparatorComponent={<View />} /* not valid:
    Error: Element type is invalid: expected a string (for built-in components) or a class/function
    (for composite components) but got: object.
    Check the render method of `CellRenderer`.
  */
/>
```

So, this PR adds this ability

## 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] [Changed] - Add ability to pass `ItemSeparatorComponent` as React Element

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

Test Plan: ...

Reviewed By: lyahdav

Differential Revision: D37227719

Pulled By: cortinico

fbshipit-source-id: 1c4943fa9d42bf5e61fbd999d1f5be46b51ecb14
2022-06-17 16:28:03 -07:00
Ramanpreet Nara 4967e50989 Make LogBox render through SurfaceRegistry
Summary:
LogBox was using AppRegistry to render on to the screen. Switch LogBox over to using SurfaceRegistry instead.

Changelog: [Internal]

Reviewed By: sshic

Differential Revision: D37223641

fbshipit-source-id: 59001ad290c1e2c2f14828d38a96f48bd1ab39ca
2022-06-17 04:34:59 -07:00
Jack Worden 56051caac5 Back out "React Native sync for revisions d300ceb...256aefb"
Summary:
Original commit changeset: 4c0afc95abe8

Original Phabricator Diff: D37155957 (https://github.com/facebook/react-native/commit/d1321d88bdc80b209aeb781991d8143d6ce2f9a9)

See attached UBN task for more details, I am reverting the whole diff now while investigating the root cause.

Changelog:
[General][Changed] - Revert "React Native sync for revisions d300ceb...256aefb"

jest_e2e[run_all_tests]

=== update
klein did a bisect for S276290, it seems Original Phabricator Diff: D37155957 (https://github.com/facebook/react-native/commit/d1321d88bdc80b209aeb781991d8143d6ce2f9a9) is the blame diff.
jackworden also has verified backout can fix it for both ios and android.

Reviewed By: ahujap-fb, kacieb

Differential Revision: D37205394

fbshipit-source-id: 600e6593532da064631c016aace317932f290c67
2022-06-17 03:13:14 -07:00
Ramanpreet Nara 83f13e15c6 Bridgeless mode: Stop register JSTimers as callable JavaScript module
Summary:
We do not need to register JSTimers as a callable JavaScript module in bridgeless mode.

How we know bridgeless mode doesn't use JSTimers: [xbgs JSTimers](https://fburl.com/code/clbz47j5)

## Details: iOS
JSTimers is only called into [by RCTCxxBridge](https://www.internalfb.com/code/fbsource/[88911d726fb4413765903c32a9077cd662ee7b6e]/xplat/js/react-native-github/React/CxxBridge/RCTCxxBridge.mm?lines=1471), and [RCTTiming.mm, which uses the RCTBridge](https://www.internalfb.com/code/fbsource/[88911d726fb4413765903c32a9077cd662ee7b6e]/xplat/js/react-native-github/React/CoreModules/RCTTiming.mm?lines=23%2C241%2C264). RCTBridge is unavailable in bridgeless mode.

## Details: Android
JSTimers is only called into [by TimingModule, inside its BridgeTimerExecutor](https://www.internalfb.com/code/fbsource/[88911d726fb4413765903c32a9077cd662ee7b6e]/xplat/js/react-native-github/ReactAndroid/src/main/java/com/facebook/react/modules/core/TimingModule.java?lines=31%2C40%2C49). This BridgeTimerExecutor is [passed to TimingModule's JavaTimerManager](https://www.internalfb.com/code/fbsource/[88911d726fb4413765903c32a9077cd662ee7b6e]/xplat/js/react-native-github/ReactAndroid/src/main/java/com/facebook/react/modules/core/TimingModule.java?lines=61-66).

The Bridgeless React instance on Android **does not** use this TimingModule, or this BridgeTimerExecutor. Instead, the Bridgeless React instance [creates its own JavaTimerManager](https://www.internalfb.com/code/fbsource/[88911d726fb4413765903c32a9077cd662ee7b6e]/fbandroid/java/com/facebook/venice/ReactInstance.java?lines=118-123), [in C++](https://www.internalfb.com/code/fbsource/[88911d726fb4413765903c32a9077cd662ee7b6e]/fbandroid/java/com/facebook/venice/ReactInstance.java?lines=117%2C121%2C382), that [implements the callTimers APIs in C++](https://www.internalfb.com/code/fbsource/[88911d726fb4413765903c32a9077cd662ee7b6e]/fbandroid/java/com/facebook/venice/jni/JJSTimerExecutor.cpp?lines=18-22). Therefore, in Bridgeless mode, the React instance calls into TimerManager to execute timers, whereas in Bridge mode, TimingModule calls into JSTimers to call timers. Hence, JSTimers should also not be used in bridgeless mode.

Changelog: [Internal]

Reviewed By: fkgozali

Differential Revision: D37208873

fbshipit-source-id: ef6ebe0e8a9fcbcc1f8403ed40ff94ec00b2beac
2022-06-16 17:59:40 -07:00
Rick Hanlon d1321d88bd React Native sync for revisions d300ceb...256aefb
Summary:
This sync includes the following changes:
- **[5cc2487e0](https://github.com/facebook/react/commit/5cc2487e0 )**: bump versions for next release ([#24725](https://github.com/facebook/react/pull/24725)) //<Josh Story>//
- **[54f17e490](https://github.com/facebook/react/commit/54f17e490 )**: [Transition Tracing] Fix Cache and Transitions Pop Order ([#24719](https://github.com/facebook/react/pull/24719)) //<Luna Ruan>//
- **[7cf8dfd94](https://github.com/facebook/react/commit/7cf8dfd94 )**: [Transition Tracing] Create/Process Marker Complete Callback ([#24700](https://github.com/facebook/react/pull/24700)) //<Luna Ruan>//
- **[327e4a1f9](https://github.com/facebook/react/commit/327e4a1f9 )**: [Follow-up] Land enableClientRenderFallbackOnTextMismatch //<Andrew Clark>//
- **[a8c9cb18b](https://github.com/facebook/react/commit/a8c9cb18b )**: Land enableSuspenseLayoutEffectSemantics flag ([#24713](https://github.com/facebook/react/pull/24713)) //<Andrew Clark>//
- **[a8555c308](https://github.com/facebook/react/commit/a8555c308 )**: [Transition Tracing] Add Tracing Marker Stack ([#24661](https://github.com/facebook/react/pull/24661)) //<Luna Ruan>//
- **[8186b1937](https://github.com/facebook/react/commit/8186b1937 )**: Check for infinite update loops even if unmounted ([#24697](https://github.com/facebook/react/pull/24697)) //<Andrew Clark>//
- **[060505e9d](https://github.com/facebook/react/commit/060505e9d )**: Fix misapplying prod error opt-out ([#24688](https://github.com/facebook/react/pull/24688)) //<Josh Story>//
- **[47944142f](https://github.com/facebook/react/commit/47944142f )**: `now` isn't part of the react-reconciler config anymore ([#24689](https://github.com/facebook/react/pull/24689)) //<Mathieu Dutour>//
- **[b34552352](https://github.com/facebook/react/commit/b34552352 )**: [Fizz] Support abort reasons ([#24680](https://github.com/facebook/react/pull/24680)) //<Josh Story>//
- **[79f54c16d](https://github.com/facebook/react/commit/79f54c16d )**: Bugfix: Revealing a hidden update ([#24685](https://github.com/facebook/react/pull/24685)) //<Andrew Clark>//
- **[7e8a020a4](https://github.com/facebook/react/commit/7e8a020a4 )**: Remove extra Server Context argument ([#24683](https://github.com/facebook/react/pull/24683)) //<Sebastian Markbåge>//
- **[4f29ba1cc](https://github.com/facebook/react/commit/4f29ba1cc )**: support errorInfo in onRecoverableError ([#24591](https://github.com/facebook/react/pull/24591)) //<Josh Story>//
- **[1cd90d2cc](https://github.com/facebook/react/commit/1cd90d2cc )**: Refactor of interleaved ("concurrent") update queue ([#24663](https://github.com/facebook/react/pull/24663)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions d300ceb...256aefb

jest_e2e[run_all_tests]

Reviewed By: cortinico

Differential Revision: D37155957

fbshipit-source-id: 4c0afc95abe8fa13c3803584922c8dc0059ff562
2022-06-15 12:23:01 -07:00
Ruslan Latypov c78babac39 fixing more imports
Summary: Some files relying on -include_pch and therefore they miss Foundation.h and UIKit.h includes. This diff is fixing missing imports

Reviewed By: rmaz

Differential Revision: D37140239

fbshipit-source-id: bc57921e0c8365e0e9a5a571d607ba40ff1b31f3
2022-06-14 13:37:04 -07:00
Supreet Singh 9eb2826f9b Response headers to image - iOS (#33880)
Summary:
Please see this issue https://github.com/facebook/react-native/issues/33034 for details on the problem solved by this PR.

## 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
-->

[CATEGORY] [TYPE] - Message
[ios] [changed] - HTTP Response headers added to the error object passed to JS code.

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

Test Plan:
Tested:
(All tests done on images in rn-tester app, which is a part of this repo)
1. onError method in case image has an HTTP Error
2. onError method in case of non http error (DNS error)
3. Successful image load

Reviewed By: cortinico

Differential Revision: D37066159

Pulled By: cipolleschi

fbshipit-source-id: 546f7678fa0321fe6c6fbef55288715cb6ddc2fd
2022-06-10 04:17:22 -07:00
Kacie Bawiec 8ced165e53 Make Text use Android's "auto" focus by default instead of setting focus to true
Summary:
[A recent fix](https://github.com/facebook/react-native/pull/33076) to Android to set focusable to true when accessible is true, and this caused several components not to work correctly.

This JS change essentially reverts the default back to Text not being focusable unless it is explicitly set. Android's "auto" behavior is better than setting `accessible=true`, and it's also the behavior React Native has had since accessibility on Android was implemented.

# Wall of Text Explanation

Explanation From Brett's comment [here](https://www.internalfb.com/diff/D35908559?dst_version_fbid=700876567897063&transaction_fbid=477905564133412)

blavalla

Generally speaking, "accessible" in react native maps to "focusable" in Android views, and the default value for "focusabe" for a TextView (and actually all views) is "auto" not "false".  The difference here is that "false" is telling the system to explicitly disallow focus on this element, where as "auto" is telling the system that it's up to whatever service is trying to focus to determine if it should or not.

In the case of text, Talkback generally does default to focusing on Text when it's set to "auto", though it also does try to combine this text together with other not-explicitly focusable siblings and roll the focus up to some common ancestor element.

In the case of TetraButton here, I would expect the default behavior would be that the text is "auto" focusable, so Talkback would combine the text here with the parent <TetraPressable> (which is explicitly focusable via accessible="true").

...

[This diff](https://github.com/facebook/react-native/pull/33076) was to fix the issue with "disabled" not properly announcing on text views, which was commonly occuring due to the description-combining feature described above. Basically, when Talkback decides to combine not-explicitly-focusable elements together, it ignores properties like "disabled", "selected", etc. so when combined only the text is transferred.

The "fix" here was to make sure that if disabled was set, that an element was always explicitly focusable so that it wouldn't be eligible to be combined with others. I think that as a general concept makes sense, but the fix actually surfaced an issue that is likely a much older bug.

This line in <Text>
```
accessible={accessible !== false}
```

Is basically always setting accessible="true" unless it's explicitly set to false, and has been in there for years. It was likely added to force text to be accessible by default for iOS.  But until [this diff](https://github.com/facebook/react-native/pull/33076) this line was basically a no-op for Android, since setting accessible="true" on text would do nothing at all.

[This diff](https://github.com/facebook/react-native/pull/33076)  changed this so that setting accessible="true" worked how you'd expect, by making the view explicitly focusable, which was necessary for the disabled behavior to work properly. But that means that now by default all text views are explicitly focusable on both iOS and Android, and this there is likely many components that were built that don't expect this to be the case.

It doesn't seem like the right fix here is to revert this behavior to its previous state, as it wasn't working how anyone would expect it to if they looked at the code, and it seems like we were relying on some fairly undocumented behavior of Talkback to get it to work how we wanted. If we truly only wanted accessible="true" to be set on all TextViews for iOS, we should be explicit about it and do a platform check before setting that property. If we didn't want this to be iOS-specific, then everything is now actually working as originally intended.

For reference, this is the diff that introduced the default-accessible text - https://www.internalfb.com/diff/D1561326, and the description makes it clear that this was only tested on iOS, and the behavior was explicitly trying to map to iOS norms such as not allowing nested accessible elements.

Changelog:
[Android][Fixed] Make Text not focusable by default

Reviewed By: ryancat

Differential Revision: D36991394

fbshipit-source-id: c45d2ada72bb2d6ffeee6947d676a07fb8899449
2022-06-09 13:27:09 -07:00
luoxuhai 47bd78f64f Added userInterfaceStyle to Alert to override user interface style for iOS 13+ (#33553)
Summary:
Support to override Alert interface style to match your app. For example, You want to change the style on the alert.

## 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] - Add userInterfaceStyle to Alert to override user interface style for iOS 13+

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

Test Plan:
**`userInterfaceStyle: 'light'`:**
<img width="320" src="https://user-images.githubusercontent.com/37284154/161358408-50dbf0a5-ae46-458e-a075-8595cce1b046.png"  />

**`userInterfaceStyle: 'dark'`:**
<img width="320" src="https://user-images.githubusercontent.com/37284154/161358326-bc54effb-1635-43df-97e0-522328713259.PNG"  />

Reviewed By: philIip

Differential Revision: D35371697

Pulled By: ryancat

fbshipit-source-id: 597c1a97ca94571abada2b5fb97cb2adcb5337f5
2022-06-08 18:28:16 -07:00
Genki Kondo d8c25ca1b6 Use initial value of natively driven nodes on renders
Summary:
D36902220 (https://github.com/facebook/react-native/commit/a04195167bbd8f27c6141c0239a61a345cac5a88) changed Animated to only use value of natively driven nodes on initial render.

However, there remained a case where we could end up with a race condition between Fabric prop update (via SurfaceMountingManager.updateProps) and Animated (via NativeAnimatedNodesManager.runUpdates), when an animation on a node that was created natively is triggered close to render (such as in componentDidUpdate). This happens as Animated and Fabric aren't synchronized, and at the platform level, they do not know each other's state.

Say we have two items, where opacity is used to indicate whether the item is selected. On initial render, A's opacity is set to 1, and animated sets opacity to 1; B's opacity is set to 0, and animated sets opacity to 0. When B is selected (and causes A and B to rerender), A's opacity is now set to null, and animated sets opacity to 0; B's opacity is also now set to null, and animated sets opacity to 1. A's props have changed, and thus the default opacity value of 1 is applied via Fabric, but Animated also sets the opacity to 0 - either may end up being the value visible to the user due to the nondeterministic order of Fabric update props and Animated. This is what is causing T122469354.

This diff addresses this edge case by using the initial prop values for native animated nodes, for subsequent renders, to ensure that values of native animated nodes do not impact rerenders.

This diff also fixes a bug in OCAnimation where translateX/Y values of 0 in transition will result in render props containing translateX/Y instead of transform, resulting in potentially incorrect pressability bounds.

Changelog:
[Internal][Fixed] - Only use initial value of natively driven nodes on render

Reviewed By: JoshuaGross, javache

Differential Revision: D36958882

fbshipit-source-id: 10be2ad91b645fa4b8a4a12808e9299da33aaf7d
2022-06-07 20:02:57 -07:00
Christian Ruink b869680c11 Fixing onEndReachedThreshold === 0 not firing onEndReached function on Android.
Summary:
Changelog:
[Android][Fix] - When `onEndReachedThreshold` is set to 0 `onEndReached` function on `VirtualizedList` properly fires once the user scrolls to the bottom of the list.

Reviewed By: genkikondo

Differential Revision: D36488189

fbshipit-source-id: b95f3291f2957273280696d8840c1e000d669380
2022-06-07 16:22:12 -07:00
Vincent Riemer 21a4c1f6d6 Add dispatch of pointerover/pointerout events
Summary: Changelog: [iOS][Internal] - Add dispatching of pointerover/pointerout events

Reviewed By: lunaleaps

Differential Revision: D36718156

fbshipit-source-id: c2fee2332ac52e617db938e321e3b38fd5c35ad3
2022-06-07 16:08:50 -07:00