Summary:
Continuation of #24687
> Issue: [Polish the "new app screen"](https://github.com/react-native-community/discussions-and-proposals/issues/122)
> This is the pull request for the new intro screen proposal in react native as directed by cpojer
This PR was created because the previous one could not be pushed to for some reason. I cleaned up a few small things and added the component as an example to RNTester so we can keep iterating. My plan is to land this, and then polish it and make it the default in a follow-up.
[General][Added] - New Intro screen, Icons
Removed Lottie Integration
100% React Native 💥
Pull Request resolved: https://github.com/facebook/react-native/pull/24737
Differential Revision: D15259092
Pulled By: cpojer
fbshipit-source-id: bc141fb1425cf354f29deffd907c37f83fd92c75
Summary:
Our Blob implementation was very problematic because it didn't release its underlying resource when the JS instance was dealocated. The main issue is that the fetch polyfill uses blobs by default if the module is available, which causes large memory leaks.
This fixes it by using the new jsi infra to attach a `jsi::HostObject` (`BlobCollector`) to `Blob` instances. This way when the `Blob` is collected, the `BlobCollector` also gets collected. Using the `jsi::HostObject` dtor we can schedule the cleanup of native resources. This is definitely not the ideal solution but otherwise it would require rewriting the whole module using TurboModules + jsi.
Fixes#23801, #20352, #21092
[General] [Fixed] - [Blob] Release underlying resources when JS instance in GC'ed
Pull Request resolved: https://github.com/facebook/react-native/pull/24745
Reviewed By: fkgozali
Differential Revision: D15248848
Pulled By: hramos
fbshipit-source-id: 1da835cc935dfbf4e7bb6fbf2aea29bfdc9bd6fa
Summary:
This is the next step in moving RN towards standard path-based requires. All the requires in `Libraries` have been rewritten to use relative requires with a few exceptions, namely, `vendor` and `Renderer/oss` since those need to be changed upstream. This commit uses relative requires instead of `react-native/...` so that if Facebook were to stop syncing out certain folders and therefore remove code from the react-native package, internal code at Facebook would not need to change.
See the umbrella issue at https://github.com/facebook/react-native/issues/24316 for more detail.
[General] [Changed] - Migrate "Libraries" from Haste to standard path-based requires
Pull Request resolved: https://github.com/facebook/react-native/pull/24749
Differential Revision: D15258017
Pulled By: cpojer
fbshipit-source-id: a1f480ea36c05c659b6f37c8f02f6f9216d5a323
Summary:
AccessibilityInfo.announceForAccessibility is currently only available on iOS. I've added the Android specific implementation, updated RNTester, and the documentation.
[Android] [Added] - Added AccessibilityInfo.announceForAccessibility for Android
[General] [Added] - RNTester example for AccessibilityInfo.announceForAccessibility
Pull Request resolved: https://github.com/facebook/react-native/pull/24746
Differential Revision: D15258054
Pulled By: cpojer
fbshipit-source-id: 3e057a5c32b28e30ea2ee74a18854b012cd2dbfd
Summary:
Solves #15961 - [ANDROID] Linking.getInitialURL() returns null after exiting the app with back button and using deep linking again (only in production!)
As the issue says, it seems that `currentActivity` is null in [IntentModule#getInitialURL](1e8f3b1102/ReactAndroid/src/main/java/com/facebook/react/modules/intent/IntentModule.java (L50)). So I used the `InteractionManager` to wait until current activity to finish initializing.
[Android] [Fixed] - In `Linking.getInitialURL` method, use the `InteractionManager` to wait for the current activity to finish initializing.
Pull Request resolved: https://github.com/facebook/react-native/pull/24748
Differential Revision: D15258046
Pulled By: cpojer
fbshipit-source-id: 0ec1c873766ae90955d47e5e023556eb6c5d5fbb
Summary:
When using `scrollToLocation` together with `stickySectionHeadersEnabled` in a `SectionList`, the length of the section header is not accounted for when scrolling to any item except the header.
[General] [Fixed] - Adjust scrollToLocation when using sticky section headers
Pull Request resolved: https://github.com/facebook/react-native/pull/24735
Differential Revision: D15240953
Pulled By: cpojer
fbshipit-source-id: fd7121d990c5b01533e456bdfa39bebf6245fa80
Summary: Adds disabled kebab case modal props now that we can safely generate them to cpp
Reviewed By: JoshuaGross, mdvacca
Differential Revision: D15218837
fbshipit-source-id: d712e53f53d91ae14bba9956321530907f67d2e8
Summary:
`UITextField` don't have delegate to observe the selection changes of users(multiline text input `UITextView` have it), so we can add a KVO to observe selection changes.
cpojer shergin
[iOS] [Fixed] - Fixes selection of single line text input
Pull Request resolved: https://github.com/facebook/react-native/pull/24714
Differential Revision: D15238379
Pulled By: cpojer
fbshipit-source-id: f149721d6b4df28e90f5a9405c74e01fde7c7d10
Summary:
Fixes https://github.com/facebook/react-native/issues/23712
Currently, It seems like `__nativeAnimatedValueListener` is not listening to the correct `onAnimatedValueUpdate` events if component was re-mounted. In this PR I'm attaching a new listener if the native view tag has changed.
[General] [Fixed] - Fixed Animated.Value value after animation if component was re-mounted
Pull Request resolved: https://github.com/facebook/react-native/pull/24571
Differential Revision: D15237431
Pulled By: cpojer
fbshipit-source-id: 1fe4e290ab45dfe6d1d364d8d7384aabf18d6610
Summary:
Our Blob implementation was very problematic because it didn't release its underlying resource when the JS instance was dealocated. The main issue is that the fetch polyfill uses blobs by default if the module is available, which causes large memory leaks.
This fixes it by using the new jsi infra to attach a `jsi::HostObject` (`BlobCollector`) to `Blob` instances. This way when the `Blob` is collected, the `BlobCollector` also gets collected. Using the `jsi::HostObject` dtor we can schedule the cleanup of native resources. This is definitely not the ideal solution but otherwise it would require rewriting the whole module using TurboModules + jsi.
Fixes#23801, #20352, #21092
[General] [Fixed] - [Blob] Release underlying resources when JS instance in GC'ed
Pull Request resolved: https://github.com/facebook/react-native/pull/24405
Differential Revision: D15237418
Pulled By: cpojer
fbshipit-source-id: 00a94a54b0b172fbc62324364b753d192ac7016a
Summary: Workaround for bugs with originalConsole.assert firing when it shouldn't.
Reviewed By: Hypuk
Differential Revision: D15201459
fbshipit-source-id: d4cf648725cf42754561468b23ea8edd7c1b84b2
Summary:
On iOS, `RCTRedBox` will not update the displayed stack trace if the message string sent with the update differs from the original error message. As JS errors are shown in two stages - before and after symbolication - there was previously a case where the message would differ between the two `updateExceptionMessage` calls, blocking the update and leaving only the unsymbolicated trace visible. This diff fixes that.
Longer term, we should also change `RCTRedBox`'s logic to rely on the JS-provided `exceptionID` instead of the message string - similar to what we do on Android.
Changelog:
[iOS] [Fixed] - Fix redbox JS symbolication when adding JS engine tag to the message
Reviewed By: sahrens
Differential Revision: D15202524
fbshipit-source-id: 237fc090e88b0c609865e0aed842d6a609c1239a
Summary:
In fabric, the measureLayout method expects 'node ref' instead of 'node handle'.
Node refs are supported by the current production version of RN and for Fabric, no changes should be expected in the current production version of RN
Reviewed By: TheSavior
Differential Revision: D15103116
fbshipit-source-id: cde94f61eaf6aa52ae4bd6f89082d18141d0da28
Summary:
It's easy to accidentally trigger this invariant when adding / moving around a component that relies on a FlatList.
There might be some unexpected behavior when this occurs, i.e. messed up virtualization / viewability logging. But to me, that is a better outcome than crashing the JS context.
Reviewed By: sahrens
Differential Revision: D14975295
fbshipit-source-id: 18015a780a153aae995723b120440be0e55d8e8b
Summary:
Currently, every time a touchable is pressed on Android, a system sound is played. It was added in the PR #17183. There is no way to disable it, except disabling touch on sound on the system level. I am pretty sure there are cases when touches should be silent and there should be an option to disable it.
Related PRs - #17183, #11136
[Android][added] - Added a touchSoundDisabled prop to Touchable. If true, doesn't system sound on touch.
Pull Request resolved: https://github.com/facebook/react-native/pull/24666
Differential Revision: D15166582
Pulled By: cpojer
fbshipit-source-id: 48bfe88f03f791e3b9c7cbd0e2eed80a2cfba8ee
Summary:
Start a `HeadlessJsTaskService` on Android without registered is dangerous on apps because `HeadlessJsTaskService` will acquire a [`PARTIAL_WAKE_LOCK`](https://developer.android.com/topic/performance/vitals/wakelock), without calling `onHeadlessJsTaskFinish` this lock won't release until timeout(if exist). This lock will prevent the android device from sleeping.
Although on JS will throw an error if no headless tasks registered, but it's hard to notice while app in the background. No visual information is displayed.
This PR will log a warning instead of Error, and just mark the task to finished on native if nothing registered in order to release the wake lock.
[Android] [Fixed] - Fix unexpected PARTIAL_WAKE_LOCK when no headless tasks registered.
Pull Request resolved: https://github.com/facebook/react-native/pull/24671
Differential Revision: D15164310
Pulled By: cpojer
fbshipit-source-id: 05b62017ba094d0faabc2848dc8bb6c26101321b
Summary: This diff migrates VirtualizedList to use ref.measureLayout instead of UIManager.measureLayout, this is a pre-req to make measureLayout to work in Fabric
Reviewed By: JoshuaGross, TheSavior
Differential Revision: D14865762
fbshipit-source-id: 45dd3374813370188c914acfc7e631075508f74a
Summary:
This diff changes the style of the Modal container style as a pre-requisite to implement Modal on Fabric.
In the current version of React Native the size of the View container is determined at runtime using the size of the screen. The size of this view is set overriding the Widht and Height of this Container View (using the screen size), in Fabric we can not update the size of that view, instead we set the size of the RCTModalHostView to take the size of the whole screen.
Since the RCTModalHostView has an absolute position and it has the size of the screen, making this change should be enough to keep backward compatibility and be able to implement Modal on Fabric
Reviewed By: JoshuaGross
Differential Revision: D15067616
fbshipit-source-id: d7302ef3afc503adfee10e12fb6d0ebd371fb7ed
Summary:
`OnValueChange` function of `Picker` is called when Picker is initialized.
[Android][fixed] - `OnValueChange` will be called only when the `selectedValue` changes.
Pull Request resolved: https://github.com/facebook/react-native/pull/24653
Differential Revision: D15146483
Pulled By: cpojer
fbshipit-source-id: e26f5aa4caa673015c50c853f00b99572e803755
Summary: A Flow error suppression was hiding two errors: one is a real type incompatibility, another is a "kind" mismatch error where the type of a component was being cast to another component (rather than its type).
Reviewed By: nmote
Differential Revision: D15141749
fbshipit-source-id: a090c02c949eb6614b46f2691ad41cee0b0f3dbd
Summary:
@public
Right now when you pass a ph:// video asset, we only ever return the image thumbnail of it. This is useful if you're displaying the ph:// in an <Image> but bad if you're trying to upload it.
This change keeps the original behaviour of displaying a thumbnail in an Image but fixes the latter behaviour, so that ph:// videos are uploaded correctly.
NOTE: There is a terrible hack to accomplish this. It is detailed in the code but essentially, we change the URL scheme to ph-upload:// when trying to upload it so that the default image loader doesn't try to process it.
Reviewed By: JoshuaGross
Differential Revision: D15129454
fbshipit-source-id: 18f87bec18b7cfa5edc1d60a47f23ac5d00675e0
Summary: [General] [Changed] - If `isInteraction` is not specified in the config, it would always default to `true` which would block interactions like VirtualizedList updates. This is generally not what you want with useNativeDriver since the animation won't be interrupted by JS. If something does end up interfering with an animation and causes frame drops, `isInteraction` can be set manually.
Reviewed By: yungsters
Differential Revision: D14988087
fbshipit-source-id: 791b5cc327ffef6d2720c647a228cf3134a27cda
Summary:
Per conversation with TheSavior, in #24538, this adds snapshot tests for more components. Shallow and deep snapshots are included.
[General] [Added] - Snapshots
Pull Request resolved: https://github.com/facebook/react-native/pull/24593
Differential Revision: D15082831
Pulled By: TheSavior
fbshipit-source-id: bc7f27317e2fd0bad133f4ba4d81996d08a12c44
Summary:
Assistive technologies use the accessibility role of a component to tell the disabled user what the component is, and provide hints about how to use it. Many important roles do not have analog AccessibilityTraits on iOS. This PR adds many critical roles, such as editabletext, checkbox, menu, and switch to name a few.
Accessibility states are used to convey the current state of a component. This PR adds several critical states such as checked, unchecked, on and off.
[general] [change] - Adds critical accessibility roles and states.
Pull Request resolved: https://github.com/facebook/react-native/pull/24095
Differential Revision: D15079245
Pulled By: cpojer
fbshipit-source-id: 941b30eb8f5d565597e5ea3a04687d9809cbe372
Summary: For some reason the scroll events are sometimes generated with highly irregular spacing, some coming less than a millisecond apart. For interactions that must track scrolling exactly, this can cause them to glitch. With a scroll throttle of less than 17 ms, the intention is clear that the UI should be updated in sync with the scroll view so we shouldn't drop any events.
Reviewed By: PeteTheHeat
Differential Revision: D15068841
fbshipit-source-id: 730e7cb29cc3ddae66f37cf7392e02e0cc9d7844
Summary:
Per a conversation with TheSavior, in #24538, this adds snapshot tests for all components whose mocks will be addressed in that PR. Shallow and deep snapshots are included.
[General] [Added] - Snapshots
Pull Request resolved: https://github.com/facebook/react-native/pull/24554
Differential Revision: D15062197
Pulled By: cpojer
fbshipit-source-id: 70ddbaa5e6d1d2c0fd1130ab04c458d9c49d0ee8
Summary: adding the flow types makes it impossible to forget to change them back.
Reviewed By: yungsters
Differential Revision: D14990037
fbshipit-source-id: d018e4cf6798d50bcfb44b55d3c68ca7f5beef72
Summary:
By default, an alert is `cancelable` on Android but not on iOS.
This PR changes the behavior so that the Alert is not dismissable on Android by default.
The motivation is that many developers develop on iOS and test on Android, and do forget to consider the case that the alert is dismissable.
Consistent behavior by default makes it easier to develop cross-platform apps in general.
---
For context and for your consideration, I have started a discussion here with the topic of whether React Native should try to use OS defaults or be consistent between platforms:
https://github.com/react-native-community/discussions-and-proposals/issues/121
---
If this PR gets merged, the docs should be updated as well:
https://github.com/facebook/react-native-website/blob/master/docs/alert.md#android
[Android] [Changed] - By default, alerts are not dismissable
Pull Request resolved: https://github.com/facebook/react-native/pull/24541
Differential Revision: D15044798
Pulled By: cpojer
fbshipit-source-id: 762b2ace69eb7ec79cd6ebec916e473348b9cafe
Summary:
Fixes a regression in 1f8b46a2fc. The internal subscription vendor uses a sparse array to track listeners, which makes listener removal fast. When querying listeners, the sparse entries need to be removed. `Array#filter` is a built-in way to do this -> linked to the JS spec, which explains this.
[General] [Fixed] - Fixed sparse array handling in `EventEmitter#listeners()`
Pull Request resolved: https://github.com/facebook/react-native/pull/24546
Differential Revision: D15044790
Pulled By: cpojer
fbshipit-source-id: 0f1301618739357b4a0f5378b9584efe74f0f09a
Summary:
Makes sure `onViewableItemsChanged` fires ASAP when `waitForInterations` is false.
This also works around another deeper bug where updates scheduled with `InteractionManager` aren't firing at all in some cases, and thus instead of just firing late, `onViewableItemsChanged` isn't firing until scroll which is not what we want with `waitForInterations: false`. That bug will require more digging.
Differential Revision: D14984333
fbshipit-source-id: 718b39670307c6bc16268759bdb513682745265d
Summary:
This diff fixes the reconnect logic with the metro websockets which is causing the app to not re-connect when metro crashes. To demonstrate the issue, consider the following video:
{F156029086}
On the left we have metro, on the right is the xcode console with some logging to show the reconnecting phase. When we kill the metro server you can see the app tries to reconnect once and that's it - when metro is started back up, you can see the notification that there are no apps running and can also see that cmd+opt+r doesn't work anymore
I updated the logic to optimistically start the connection and if it's still unavailable to retry again after the timeout
[iOS][Fixed] - Metro websocket reconnect logic
Reviewed By: shergin
Differential Revision: D14961433
fbshipit-source-id: 0569aa169dc9f538a7e4a8d04e99de39f2e9b3f9
Summary:
In order to meet our accessibility requirements we need to have full support for keyboard navigation. The Touchable components works with press/tap with a finger, but doesn't respond to 'enter' when using a keyboard. Navigation works fine. This PR adds an onClick listener to touchable views that have the onPress prop defined.
[Android] [Added] - Add View.OnClickListener to Touchable components when onPress is defined
Pull Request resolved: https://github.com/facebook/react-native/pull/24359
Differential Revision: D14971230
Pulled By: cpojer
fbshipit-source-id: ca5559ca1308ee6c338532a00dcea4d00fa57f42
Summary:
Second attempt at adding border properties to `RCTImageView`.
Previous attempt can be found at D14875673 which was reverted.
1. `UIImageView` is no longer laid out in in `layoutSubviews`.
2. `updateWithImage` was not being called, I instead of calling `self.image = image` I was calling `_imageView.image = image` directly which skips calling `updateWithImage`. This meant that image's rendering mode was not changed to `template`.
Reviewed By: shergin
Differential Revision: D14934103
fbshipit-source-id: b74c692f9f8ad520ef1f9c70ec4b4aa68b868cd4
Summary:
Would like feedback from the community as this may not be the best solution for all
I would like to restrict (or paginate) the fling of a horizontal ScrollView when `snapToInterval` is set. This is not currently possible with `pagingEnabled`, since the pagination works only when items are the entire width of the ScrollView.
This implementation simply restricts the predicted `targetOffset` found from the `x` velocity and replaces it with the offset when the pan gesture ended.
To get pagination working, I may paginate based on the interval by calculating the offset delta from the beginning of the gesture to current offset and restricting the scrolling behavior to the `snapToInterval`. If this is preferred, I can update this PR or make a new one, but wanted to start a discussion since it seems like there are many in the community that would like this feature #21302 .
[General] [Added] - add prop `disableIntervalMomentum` to disable the predictive scrolling behavior of horizontal ScrollViews
Pull Request resolved: https://github.com/facebook/react-native/pull/24045
Differential Revision: D14939754
Pulled By: sahrens
fbshipit-source-id: 26be19c47dfb8eed4d7e6035df53a77451e23081
Summary:
This showcases SampleTurboModule usage in RNTester. Notes:
* iOS only for now, and you must use cocoapods version.
* You cannot use Chrome debugger when loading this specific example.
As illustrated in the example, the callsite should access `NativeSampleTurboModule` to access the native side.
{F155901711}
Reviewed By: cpojer
Differential Revision: D14932537
fbshipit-source-id: a733e1cd3b642b9e572d5ac6347f4775d495578a
