React Native New Arch (#10980)

This commit is contained in:
Oleksii Bulenok
2026-07-23 17:25:40 +02:00
committed by GitHub
parent b80d09000f
commit 8d64ab9d4b
72 changed files with 2776 additions and 1596 deletions
-60
View File
@@ -1,60 +0,0 @@
diff --git a/ios/GlassContainer.swift b/ios/GlassContainer.swift
index 61fb67cdfa2022f57524ddde05096067055e9ee6..b2d111ef8a724b8e7d4404f3d40efce3bd6fbb6d 100644
--- a/ios/GlassContainer.swift
+++ b/ios/GlassContainer.swift
@@ -1,6 +1,7 @@
// Copyright 2022-present 650 Industries. All rights reserved.
import ExpoModulesCore
+import React
public final class GlassContainer: ExpoView {
private var containerEffect: Any?
@@ -46,11 +47,19 @@ public final class GlassContainer: ExpoView {
}
}
- public override func mountChildComponentView(_ childComponentView: UIView, index: Int) {
+ // Paper: redirect children into the container effect's contentView
+ public override func didUpdateReactSubviews() {
+ for subview in self.reactSubviews() {
+ containerEffectView.contentView.addSubview(subview)
+ }
+ }
+
+ // Fabric: redirect children into the container effect's contentView
+ @objc public func mountChildComponentView(_ childComponentView: UIView, index: Int) {
containerEffectView.contentView.insertSubview(childComponentView, at: index)
}
- public override func unmountChildComponentView(_ childComponentView: UIView, index: Int) {
+ @objc public func unmountChildComponentView(_ childComponentView: UIView, index: Int) {
childComponentView.removeFromSuperview()
}
}
diff --git a/ios/GlassView.swift b/ios/GlassView.swift
index 35cd8f320009a9e28fdbb2f55cc409734ba98f40..9587306b6fac3455ab27a5289eb62a711aa50c03 100644
--- a/ios/GlassView.swift
+++ b/ios/GlassView.swift
@@ -271,11 +271,19 @@ public final class GlassView: ExpoView {
#endif
}
}
- public override func mountChildComponentView(_ childComponentView: UIView, index: Int) {
+ // Paper: redirect children into the glass effect's contentView
+ public override func didUpdateReactSubviews() {
+ for subview in self.reactSubviews() {
+ glassEffectView.contentView.addSubview(subview)
+ }
+ }
+
+ // Fabric: redirect children into the glass effect's contentView
+ @objc public func mountChildComponentView(_ childComponentView: UIView, index: Int) {
glassEffectView.contentView.insertSubview(childComponentView, at: index)
}
- public override func unmountChildComponentView(_ childComponentView: UIView, index: Int) {
+ @objc public func unmountChildComponentView(_ childComponentView: UIView, index: Int) {
childComponentView.removeFromSuperview()
}
}
@@ -1,3 +0,0 @@
# expo-glass-effect patch
Patches in support for Expo SDK 54. Please delete when we update Expo
@@ -15,3 +15,17 @@ index 480746eb7acfbe86f67547d9e1de7a5be4d5faf2..13d30cb547195993dfcb4005cc0d248d
#endif
-
diff --git a/package.json b/package.json
index 469386dc2e81ded8994818dd4340409da1396488..36460e4e303ae56534c4d389471fc827433c7028 100644
--- a/package.json
+++ b/package.json
@@ -70,9 +70,6 @@
"ios": {
"componentProvider": {
"RNDatePicker": "RNDatePicker"
- },
- "modulesProvider": {
- "RNDatePicker": "RNDatePickerManager"
}
}
}
@@ -0,0 +1,31 @@
diff --git a/apple/RNGestureHandler.mm b/apple/RNGestureHandler.mm
index c4f760c41a9965245edcfa5e7cb781f8d2c7b66a..bf7d1fb092e22cbcedf787e606876e533879f810 100644
--- a/apple/RNGestureHandler.mm
+++ b/apple/RNGestureHandler.mm
@@ -470,15 +470,19 @@ + (RNGestureHandler *)findGestureHandlerByRecognizer:(UIGestureRecognizer *)reco
// We may try to extract "DummyGestureHandler" in case when "otherGestureRecognizer" belongs to
// a native view being wrapped with "NativeViewGestureHandler"
- RNGHUIView *reactView = recognizer.view;
- while (reactView != nil && reactView.reactTag == nil) {
- reactView = reactView.superview;
- }
+ RNGHUIView *view = recognizer.view;
+ while (view != nil) {
+ for (UIGestureRecognizer *candidateRecognizer in view.gestureRecognizers) {
+ if ([candidateRecognizer isKindOfClass:[RNDummyGestureRecognizer class]]) {
+ return candidateRecognizer.gestureHandler;
+ }
+ }
- for (UIGestureRecognizer *recognizer in reactView.gestureRecognizers) {
- if ([recognizer isKindOfClass:[RNDummyGestureRecognizer class]]) {
- return recognizer.gestureHandler;
+ if ([view isKindOfClass:[RCTViewComponentView class]]) {
+ return nil;
}
+
+ view = view.superview;
}
return nil;
@@ -0,0 +1,5 @@
# react-native-gesture-handler.patch
Updated `findGestureHandlerByRecognizer:` in `apple/RNGestureHandler.mm` to the version from RN GH 2.32.0
This fixes `UIContextMenuInteraction` from `ExpoBlueskyPeekMenuView.swift`. https://github.com/software-mansion/react-native-gesture-handler/commit/fba4dcc06d71dce08b10b2afc738a2af5b01e86a
+126
View File
@@ -1,3 +1,129 @@
diff --git a/ios/Fabric/RNCPagerViewComponentView.mm b/ios/Fabric/RNCPagerViewComponentView.mm
index 652a5c123100e7010011f07649517aa9e0cbc554..efbc3af622c4fee8267a78144b906c7b5de7859c 100644
--- a/ios/Fabric/RNCPagerViewComponentView.mm
+++ b/ios/Fabric/RNCPagerViewComponentView.mm
@@ -90,6 +90,62 @@ - (void)willMoveToSuperview:(UIView *)newSuperview {
}
}
+/*
+ * UIKit resolves several behaviors (status-bar-tap scroll-to-top, safe area
+ * propagation, appearance callbacks) by walking parentViewController from a
+ * view's nearest view controller up to the window's root view controller.
+ * The Paper implementation embeds the UIPageViewController into that chain
+ * via reactAddControllerToClosestParent:, but this Fabric implementation
+ * leaves it orphaned (parentViewController == nil), which among other things
+ * makes UIKit ignore every scroll view rendered inside the pager when
+ * handling the status bar scroll-to-top tap. Attach the page view controller
+ * to the nearest ancestor view controller to restore parity with Paper.
+ */
+- (void)attachNativePageViewControllerToNearestParent {
+ if (_nativePageViewController == nil ||
+ _nativePageViewController.parentViewController != nil) {
+ return;
+ }
+ UIResponder *responder = self.nextResponder;
+ while (responder != nil && ![responder isKindOfClass:[UIViewController class]]) {
+ responder = responder.nextResponder;
+ }
+ UIViewController *parent = (UIViewController *)responder;
+ if (parent == nil) {
+ return;
+ }
+ [parent addChildViewController:_nativePageViewController];
+ [_nativePageViewController didMoveToParentViewController:parent];
+}
+
+- (void)detachNativePageViewControllerFromParent {
+ if (_nativePageViewController.parentViewController == nil) {
+ return;
+ }
+ [_nativePageViewController willMoveToParentViewController:nil];
+ [_nativePageViewController removeFromParentViewController];
+}
+
+- (void)didMoveToWindow {
+ [super didMoveToWindow];
+ if (self.window != nil) {
+ [self attachNativePageViewControllerToNearestParent];
+ }
+}
+
+- (void)layoutSubviews {
+ [super layoutSubviews];
+ /*
+ * On the first didMoveToWindow the ancestor view controller may not be
+ * wired up yet (see callstack/react-native-pager-view#1089 for the same
+ * timing issue in v8), so retry here; the attach is a cheap no-op once
+ * the controller has a parent.
+ */
+ if (self.window != nil) {
+ [self attachNativePageViewControllerToNearestParent];
+ }
+}
+
#pragma mark - React API
@@ -126,6 +182,13 @@ -(void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetrics
-(void)prepareForRecycle {
[super prepareForRecycle];
+ /*
+ * Undo the child view controller relationship added in
+ * attachNativePageViewControllerToNearestParent, otherwise the parent
+ * view controller keeps the page view controller (and its subtree) alive
+ * after unmount.
+ */
+ [self detachNativePageViewControllerFromParent];
_nativePageViewController = nil;
_currentIndex = -1;
}
@@ -421,8 +484,44 @@ + (ComponentDescriptorProvider)componentDescriptorProvider
}
+/*
+ * Finds the navigation controller managing this pager via the responder
+ * chain, so the pager can cooperate with the controller's back gesture.
+ */
+- (UINavigationController *)nearestNavigationController {
+ UIResponder *responder = self.nextResponder;
+ while (responder != nil) {
+ if ([responder isKindOfClass:[UINavigationController class]]) {
+ return (UINavigationController *)responder;
+ }
+ responder = responder.nextResponder;
+ }
+ return nil;
+}
+
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
+ // iOS 26+ full-screen back gesture (interactiveContentPopGestureRecognizer)
+ if (@available(iOS 26.0, *)) {
+ if (gestureRecognizer == self.panGestureRecognizer &&
+ otherGestureRecognizer != nil &&
+ otherGestureRecognizer == [self nearestNavigationController].interactiveContentPopGestureRecognizer) {
+ UIPanGestureRecognizer* panGestureRecognizer = (UIPanGestureRecognizer*) gestureRecognizer;
+ CGPoint velocity = [panGestureRecognizer velocityInView:self];
+ BOOL isLTR = [self isLtrLayout];
+ BOOL isBackGesture = (isLTR && velocity.x > 0) || (!isLTR && velocity.x < 0);
+
+ if (self.currentIndex == 0 && isBackGesture) {
+ scrollView.panGestureRecognizer.enabled = false;
+ } else {
+ const auto &viewProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
+ scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
+ }
+
+ return YES;
+ }
+ }
+
// Recognize simultaneously only if the other gesture is RN Screen's pan gesture (one that is used to perform fullScreenGestureEnabled)
if (gestureRecognizer == self.panGestureRecognizer && [NSStringFromClass([otherGestureRecognizer class]) isEqual: @"RNSPanGestureRecognizer"]) {
UIPanGestureRecognizer* panGestureRecognizer = (UIPanGestureRecognizer*) gestureRecognizer;
diff --git a/ios/RNCPagerView.m b/ios/RNCPagerView.m
index adfc7c6f2224b898a02319d352bb4fe11a18fd7e..939bb801c5b0ca6f93b77cb0507c19d137e08e77 100644
--- a/ios/RNCPagerView.m
@@ -6,6 +6,20 @@ The pager already handles `RNSPanGestureRecognizer` (react-native-screens' custo
This patch adds the same logic for iOS 26's native `interactiveContentPopGestureRecognizer`, so the back gesture works on the leftmost page while the pager still handles swipes on other pages.
The fix is applied to both implementations: `ios/RNCPagerView.m` (Paper) and `ios/Fabric/RNCPagerViewComponentView.mm` (New Architecture). The Fabric variant finds the navigation controller via the responder chain (there is no `reactViewController` helper imported there) and reads `scrollEnabled` from the Fabric props.
Related issues:
- https://github.com/software-mansion/react-native-screens/issues/3512
- https://github.com/software-mansion/react-native-screens/pull/3420
---
Also embeds the Fabric `UIPageViewController` into the view controller hierarchy (`ios/Fabric/RNCPagerViewComponentView.mm`).
The Paper implementation calls `reactAddControllerToClosestParent:` when embedding its `UIPageViewController`, so the controller becomes a child of the nearest ancestor view controller (e.g. `RNSScreen`). The Fabric implementation never does this - the page view controller is orphaned (`parentViewController == nil`).
UIKit resolves the status-bar-tap scroll-to-top gesture by walking `parentViewController`/`presentingViewController` from each candidate scroll view's nearest view controller up to the window's root (see `-[UIWindow _scrollToTopViewsUnderScreenPointIfNecessary:resultHandler:]`). With the orphaned controller that walk dead-ends, so every scroll view rendered inside a pager (all Home feeds, Profile tabs, etc.) is dropped from candidate selection and tapping the status bar no longer scrolls feeds to top. It only kept "working" when the window happened to contain exactly one other eligible scroll view, via UIKit's single-candidate fallback.
The patch attaches the page view controller to the nearest view controller found via the responder chain on `didMoveToWindow` (with a `layoutSubviews` retry because the ancestor controller may not be wired up on the first pass - same timing issue as callstack/react-native-pager-view#1089), and detaches it in `prepareForRecycle` to avoid leaking the controller after unmount.
Fixed upstream in v8 by the SwiftUI rewrite, which embeds via `reactViewController()` + `addChild` (see `PagerViewProvider.swift`).
@@ -1,390 +0,0 @@
diff --git a/lib/module/component/PerformanceMonitor.js b/lib/module/component/PerformanceMonitor.js
index 9c98d6cc395419f50969753a4e4c7962b7be588f..3686a97280ac540efa0814ac4dea40358860a76f 100644
--- a/lib/module/component/PerformanceMonitor.js
+++ b/lib/module/component/PerformanceMonitor.js
@@ -1,125 +1,5 @@
'use strict';
-import React, { useEffect, useRef } from 'react';
-import { StyleSheet, TextInput, View } from 'react-native';
-import { addWhitelistedNativeProps } from "../ConfigHelper.js";
-import { createAnimatedComponent } from "../createAnimatedComponent/index.js";
-import { useAnimatedProps, useFrameCallback, useSharedValue } from "../hook/index.js";
-function createCircularDoublesBuffer(size) {
- 'worklet';
-
- return {
- next: 0,
- buffer: new Float32Array(size),
- size,
- count: 0,
- push(value) {
- const oldValue = this.buffer[this.next];
- const oldCount = this.count;
- this.buffer[this.next] = value;
- this.next = (this.next + 1) % this.size;
- this.count = Math.min(this.size, this.count + 1);
- return oldCount === this.size ? oldValue : null;
- },
- front() {
- const notEmpty = this.count > 0;
- if (notEmpty) {
- const current = this.next - 1;
- const index = current < 0 ? this.size - 1 : current;
- return this.buffer[index];
- }
- return null;
- },
- back() {
- const notEmpty = this.count > 0;
- return notEmpty ? this.buffer[this.next] : null;
- }
- };
-}
-const DEFAULT_BUFFER_SIZE = 20;
-addWhitelistedNativeProps({
- text: true
-});
-const AnimatedTextInput = createAnimatedComponent(TextInput);
-function loopAnimationFrame(fn) {
- let lastTime = 0;
- function loop() {
- requestAnimationFrame(time => {
- if (lastTime > 0) {
- fn(lastTime, time);
- }
- lastTime = time;
- requestAnimationFrame(loop);
- });
- }
- loop();
-}
-function getFps(renderTimeInMs) {
- 'worklet';
-
- return 1000 / renderTimeInMs;
-}
-function completeBufferRoutine(buffer, timestamp) {
- 'worklet';
-
- timestamp = Math.round(timestamp);
- const droppedTimestamp = buffer.push(timestamp) ?? timestamp;
- const measuredRangeDuration = timestamp - droppedTimestamp;
- return getFps(measuredRangeDuration / buffer.count);
-}
-function JsPerformance({
- smoothingFrames
-}) {
- const jsFps = useSharedValue(null);
- const totalRenderTime = useSharedValue(0);
- const circularBuffer = useRef(createCircularDoublesBuffer(smoothingFrames));
- useEffect(() => {
- loopAnimationFrame((_, timestamp) => {
- timestamp = Math.round(timestamp);
- const currentFps = completeBufferRoutine(circularBuffer.current, timestamp);
-
- // JS fps have to be measured every 2nd frame,
- // thus 2x multiplication has to occur here
- jsFps.value = (currentFps * 2).toFixed(0);
- });
- }, [jsFps, totalRenderTime]);
- const animatedProps = useAnimatedProps(() => {
- const text = 'JS: ' + (jsFps.value ?? 'N/A') + ' ';
- return {
- text,
- defaultValue: text
- };
- });
- return <View style={styles.container}>
- <AnimatedTextInput style={styles.text} animatedProps={animatedProps} editable={false} />
- </View>;
-}
-function UiPerformance({
- smoothingFrames
-}) {
- const uiFps = useSharedValue(null);
- const circularBuffer = useSharedValue(null);
- useFrameCallback(({
- timestamp
- }) => {
- if (circularBuffer.value === null) {
- circularBuffer.value = createCircularDoublesBuffer(smoothingFrames);
- }
- timestamp = Math.round(timestamp);
- const currentFps = completeBufferRoutine(circularBuffer.value, timestamp);
- uiFps.value = currentFps.toFixed(0);
- });
- const animatedProps = useAnimatedProps(() => {
- const text = 'UI: ' + (uiFps.value ?? 'N/A') + ' ';
- return {
- text,
- defaultValue: text
- };
- });
- return <View style={styles.container}>
- <AnimatedTextInput style={styles.text} animatedProps={animatedProps} editable={false} />
- </View>;
-}
/**
* A component that lets you measure fps values on JS and UI threads on both the
* Paper and Fabric architectures.
@@ -127,38 +7,7 @@ function UiPerformance({
* @param smoothingFrames - Determines amount of saved frames which will be used
* for fps value smoothing.
*/
-export function PerformanceMonitor({
- smoothingFrames = DEFAULT_BUFFER_SIZE
-}) {
- return <View style={styles.monitor}>
- <JsPerformance smoothingFrames={smoothingFrames} />
- <UiPerformance smoothingFrames={smoothingFrames} />
- </View>;
+export function PerformanceMonitor() {
+ return null;
}
-const styles = StyleSheet.create({
- monitor: {
- flexDirection: 'row',
- position: 'absolute',
- backgroundColor: '#0006',
- zIndex: 1000
- },
- header: {
- fontSize: 14,
- color: '#ffff',
- paddingHorizontal: 5
- },
- text: {
- fontSize: 13,
- fontVariant: ['tabular-nums'],
- color: '#ffff',
- fontFamily: 'monospace',
- paddingHorizontal: 3
- },
- container: {
- alignItems: 'center',
- justifyContent: 'center',
- flexDirection: 'row',
- flexWrap: 'wrap'
- }
-});
//# sourceMappingURL=PerformanceMonitor.js.map
\ No newline at end of file
diff --git a/src/component/PerformanceMonitor.tsx b/src/component/PerformanceMonitor.tsx
index ff8fc8a947a0aeb959e21ec061882c3d190a2ce0..34dde79727765623df80dbcdab5016de6fd5d82c 100644
--- a/src/component/PerformanceMonitor.tsx
+++ b/src/component/PerformanceMonitor.tsx
@@ -1,170 +1,5 @@
'use strict';
-import React, { useEffect, useRef } from 'react';
-import { StyleSheet, TextInput, View } from 'react-native';
-
-import { addWhitelistedNativeProps } from '../ConfigHelper';
-import { createAnimatedComponent } from '../createAnimatedComponent';
-import type { FrameInfo } from '../frameCallback';
-import { useAnimatedProps, useFrameCallback, useSharedValue } from '../hook';
-
-type CircularBuffer = ReturnType<typeof createCircularDoublesBuffer>;
-function createCircularDoublesBuffer(size: number) {
- 'worklet';
-
- return {
- next: 0 as number,
- buffer: new Float32Array(size),
- size,
- count: 0 as number,
-
- push(value: number): number | null {
- const oldValue = this.buffer[this.next];
- const oldCount = this.count;
- this.buffer[this.next] = value;
-
- this.next = (this.next + 1) % this.size;
- this.count = Math.min(this.size, this.count + 1);
- return oldCount === this.size ? oldValue : null;
- },
-
- front(): number | null {
- const notEmpty = this.count > 0;
- if (notEmpty) {
- const current = this.next - 1;
- const index = current < 0 ? this.size - 1 : current;
- return this.buffer[index];
- }
- return null;
- },
-
- back(): number | null {
- const notEmpty = this.count > 0;
- return notEmpty ? this.buffer[this.next] : null;
- },
- };
-}
-
-const DEFAULT_BUFFER_SIZE = 20;
-addWhitelistedNativeProps({ text: true });
-const AnimatedTextInput = createAnimatedComponent(TextInput);
-
-function loopAnimationFrame(fn: (lastTime: number, time: number) => void) {
- let lastTime = 0;
-
- function loop() {
- requestAnimationFrame((time) => {
- if (lastTime > 0) {
- fn(lastTime, time);
- }
- lastTime = time;
- requestAnimationFrame(loop);
- });
- }
-
- loop();
-}
-
-function getFps(renderTimeInMs: number): number {
- 'worklet';
- return 1000 / renderTimeInMs;
-}
-
-function completeBufferRoutine(
- buffer: CircularBuffer,
- timestamp: number
-): number {
- 'worklet';
- timestamp = Math.round(timestamp);
-
- const droppedTimestamp = buffer.push(timestamp) ?? timestamp;
-
- const measuredRangeDuration = timestamp - droppedTimestamp;
-
- return getFps(measuredRangeDuration / buffer.count);
-}
-
-function JsPerformance({ smoothingFrames }: { smoothingFrames: number }) {
- const jsFps = useSharedValue<string | null>(null);
- const totalRenderTime = useSharedValue(0);
- const circularBuffer = useRef<CircularBuffer>(
- createCircularDoublesBuffer(smoothingFrames)
- );
-
- useEffect(() => {
- loopAnimationFrame((_, timestamp) => {
- timestamp = Math.round(timestamp);
-
- const currentFps = completeBufferRoutine(
- circularBuffer.current,
- timestamp
- );
-
- // JS fps have to be measured every 2nd frame,
- // thus 2x multiplication has to occur here
- jsFps.value = (currentFps * 2).toFixed(0);
- });
- }, [jsFps, totalRenderTime]);
-
- const animatedProps = useAnimatedProps(() => {
- const text = 'JS: ' + (jsFps.value ?? 'N/A') + ' ';
- return { text, defaultValue: text };
- });
-
- return (
- <View style={styles.container}>
- <AnimatedTextInput
- style={styles.text}
- animatedProps={animatedProps}
- editable={false}
- />
- </View>
- );
-}
-
-function UiPerformance({ smoothingFrames }: { smoothingFrames: number }) {
- const uiFps = useSharedValue<string | null>(null);
- const circularBuffer = useSharedValue<CircularBuffer | null>(null);
-
- useFrameCallback(({ timestamp }: FrameInfo) => {
- if (circularBuffer.value === null) {
- circularBuffer.value = createCircularDoublesBuffer(smoothingFrames);
- }
-
- timestamp = Math.round(timestamp);
-
- const currentFps = completeBufferRoutine(circularBuffer.value, timestamp);
-
- uiFps.value = currentFps.toFixed(0);
- });
-
- const animatedProps = useAnimatedProps(() => {
- const text = 'UI: ' + (uiFps.value ?? 'N/A') + ' ';
- return { text, defaultValue: text };
- });
-
- return (
- <View style={styles.container}>
- <AnimatedTextInput
- style={styles.text}
- animatedProps={animatedProps}
- editable={false}
- />
- </View>
- );
-}
-
-export type PerformanceMonitorProps = {
- /**
- * Sets amount of previous frames used for smoothing at highest expectedFps.
- *
- * Automatically scales down at lower frame rates.
- *
- * Affects jumpiness of the FPS measurements value.
- */
- smoothingFrames?: number;
-};
-
/**
* A component that lets you measure fps values on JS and UI threads on both the
* Paper and Fabric architectures.
@@ -172,40 +7,6 @@ export type PerformanceMonitorProps = {
* @param smoothingFrames - Determines amount of saved frames which will be used
* for fps value smoothing.
*/
-export function PerformanceMonitor({
- smoothingFrames = DEFAULT_BUFFER_SIZE,
-}: PerformanceMonitorProps) {
- return (
- <View style={styles.monitor}>
- <JsPerformance smoothingFrames={smoothingFrames} />
- <UiPerformance smoothingFrames={smoothingFrames} />
- </View>
- );
+export function PerformanceMonitor() {
+ return null;
}
-
-const styles = StyleSheet.create({
- monitor: {
- flexDirection: 'row',
- position: 'absolute',
- backgroundColor: '#0006',
- zIndex: 1000,
- },
- header: {
- fontSize: 14,
- color: '#ffff',
- paddingHorizontal: 5,
- },
- text: {
- fontSize: 13,
- fontVariant: ['tabular-nums'],
- color: '#ffff',
- fontFamily: 'monospace',
- paddingHorizontal: 3,
- },
- container: {
- alignItems: 'center',
- justifyContent: 'center',
- flexDirection: 'row',
- flexWrap: 'wrap',
- },
-});
+500
View File
@@ -0,0 +1,500 @@
diff --git a/Common/cpp/reanimated/Fabric/updates/AnimatedPropsRegistry.cpp b/Common/cpp/reanimated/Fabric/updates/AnimatedPropsRegistry.cpp
index 531f0dc7b4eeb9b29cb2255d8444da02a74c35b7..534f419fce55c39a09a7eebfb7ab3c53f8a16637 100644
--- a/Common/cpp/reanimated/Fabric/updates/AnimatedPropsRegistry.cpp
+++ b/Common/cpp/reanimated/Fabric/updates/AnimatedPropsRegistry.cpp
@@ -1,8 +1,10 @@
#include <reanimated/Fabric/updates/AnimatedPropsRegistry.h>
#include <reanimated/Tools/FeatureFlags.h>
+#include <functional>
#include <memory>
#include <utility>
+#include <vector>
namespace reanimated {
@@ -25,25 +27,59 @@ void AnimatedPropsRegistry::update(jsi::Runtime &rt, const jsi::Value &operation
addUpdatesToBatch(shadowNode, jsi::dynamicFromValue(rt, updates));
if constexpr (StaticFeatureFlags::getFlag("FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS")) {
- timestampMap_[shadowNode->getTag()] = timestamp;
+ const auto tag = shadowNode->getTag();
+ timestampMap_[tag] = timestamp;
+ // If JS already has a `settledProps` snapshot for this tag, it is now
+ // stale — schedule a refresh on the next `collectSettledUpdates`.
+ if (syncedTags_.erase(tag) > 0) {
+ invalidatedTags_.insert(tag);
+ }
}
}
}
-jsi::Value AnimatedPropsRegistry::getUpdatesOlderThanTimestamp(
- jsi::Runtime &rt,
- const double timestamp,
- const double cleanupTimestamp) {
+jsi::Value AnimatedPropsRegistry::collectSettledUpdates(jsi::Runtime &rt, const double settledTimestamp) {
std::lock_guard<std::mutex> lock{mutex_};
- removeUpdatesOlderThanTimestamp(cleanupTimestamp);
std::vector<std::pair<Tag, std::reference_wrapper<const folly::dynamic>>> updates;
- for (const auto &[viewTag, pair] : updatesRegistry_) {
- auto it = timestampMap_.find(viewTag);
- if (it != timestampMap_.end() && it->second < timestamp) {
- updates.emplace_back(viewTag, std::cref(pair.second));
+ for (auto it = updatesRegistry_.begin(); it != updatesRegistry_.end();) {
+ const auto viewTag = it->first;
+
+ if (syncedTags_.contains(viewTag)) {
+ // React already has the latest value for this tag (synced on a previous
+ // call, so the `settledProps` state is committed by now) — the registry
+ // entry is redundant. `syncedTags_` is intentionally retained to detect
+ // re-animation staleness. Note that `syncedTags_` and `invalidatedTags_`
+ // are disjoint — `update()` moves tags from the former to the latter.
+ timestampMap_.erase(viewTag);
+ it = updatesRegistry_.erase(it);
+ continue;
+ }
+
+ const auto timestampIt = timestampMap_.find(viewTag);
+ if (timestampIt == timestampMap_.end()) {
+ ++it;
+ continue;
+ }
+ const bool isSettled = timestampIt->second < settledTimestamp;
+ const auto invalidatedIt = invalidatedTags_.find(viewTag);
+ const bool isInvalidated = invalidatedIt != invalidatedTags_.end();
+ if (isSettled || isInvalidated) {
+ updates.emplace_back(viewTag, std::cref(it->second.second));
+ if (isSettled) {
+ // Only settled-path tags are tracked as "synced" so that an ongoing
+ // animation doesn't re-trigger an invalidation/sync on every GC tick.
+ syncedTags_.insert(viewTag);
+ }
+ if (isInvalidated) {
+ // Only erase serviced invalidations; if a tag was invalidated but the
+ // matching update batch hasn't been flushed into updatesRegistry_ yet,
+ // we leave the entry so the next sync picks it up.
+ invalidatedTags_.erase(invalidatedIt);
+ }
}
+ ++it;
}
const jsi::Array array(rt, updates.size());
@@ -58,22 +94,11 @@ jsi::Value AnimatedPropsRegistry::getUpdatesOlderThanTimestamp(
return jsi::Value(rt, array);
}
-void AnimatedPropsRegistry::removeUpdatesOlderThanTimestamp(const double timestamp) {
- for (auto it = timestampMap_.begin(); it != timestampMap_.end();) {
- const auto viewTag = it->first;
- const auto viewTimestamp = it->second;
- if (viewTimestamp < timestamp) {
- it = timestampMap_.erase(it);
- updatesRegistry_.erase(viewTag);
- } else {
- it++;
- }
- }
-}
-
void AnimatedPropsRegistry::removeTag(const Tag tag) {
updatesRegistry_.erase(tag);
timestampMap_.erase(tag);
+ syncedTags_.erase(tag);
+ invalidatedTags_.erase(tag);
}
} // namespace reanimated
diff --git a/Common/cpp/reanimated/Fabric/updates/AnimatedPropsRegistry.h b/Common/cpp/reanimated/Fabric/updates/AnimatedPropsRegistry.h
index 2c6c0e13604c9421e147d7eea7f4a4752288011c..8cd67f118501c2786b94d76541aea29a14ba8c16 100644
--- a/Common/cpp/reanimated/Fabric/updates/AnimatedPropsRegistry.h
+++ b/Common/cpp/reanimated/Fabric/updates/AnimatedPropsRegistry.h
@@ -4,10 +4,8 @@
#include <react/renderer/uimanager/UIManager.h>
-#include <memory>
-#include <string>
#include <unordered_map>
-#include <vector>
+#include <unordered_set>
namespace reanimated {
@@ -15,13 +13,22 @@ class AnimatedPropsRegistry : public UpdatesRegistry {
public:
void update(jsi::Runtime &rt, const jsi::Value &operations, double timestamp);
- /// Also removes updates older than `cleanupTimestamp` from the registry.
- jsi::Value getUpdatesOlderThanTimestamp(jsi::Runtime &rt, double timestamp, double cleanupTimestamp);
+ /// Returns updates that settled (received no update since `settledTimestamp`)
+ /// or whose synced `settledProps` snapshot was invalidated by a fresh update.
+ /// Also evicts entries that have already been synced to React — by the time
+ /// of the next call, the corresponding `settledProps` state is guaranteed to
+ /// be committed, so the registry entries are redundant.
+ jsi::Value collectSettledUpdates(jsi::Runtime &rt, double settledTimestamp);
private:
std::unordered_map<Tag, double> timestampMap_; // viewTag -> timestamp, protected by `mutex_`
+ // Tags whose latest values have already been pushed to React `settledProps`.
+ // Intentionally retained after eviction to detect re-animation staleness.
+ std::unordered_set<Tag> syncedTags_;
+ // Tags that were synced to React but received a fresh worklet update since;
+ // their `settledProps` are stale and need to be refreshed on the next sync.
+ std::unordered_set<Tag> invalidatedTags_;
- void removeUpdatesOlderThanTimestamp(double timestamp);
void removeTag(Tag tag) override;
};
diff --git a/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxyCommon.h b/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxyCommon.h
index 096218ab9659955cd6272c97181bce3c893ed591..1a8e25fc8295b3ac943130709bf063ea41a50585 100644
--- a/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxyCommon.h
+++ b/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxyCommon.h
@@ -57,11 +57,11 @@ class LayoutAnimationsProxyCommon : public facebook::react::MountingOverrideDele
const SharedComponentDescriptorRegistry &componentDescriptorRegistry,
const std::shared_ptr<const ContextContainer> &contextContainer,
jsi::Runtime &uiRuntime,
- const std::shared_ptr<UIScheduler> &uiScheduler
+ const std::shared_ptr<UIScheduler> &uiScheduler,
+ const std::shared_ptr<facebook::react::UIManager> &uiManager
#ifdef ANDROID
,
const PreserveMountedTagsFunction &filterUnmountedTagsFunction,
- const std::shared_ptr<facebook::react::UIManager> &uiManager,
const std::shared_ptr<facebook::react::CallInvoker> &jsInvoker
#endif
)
@@ -69,11 +69,11 @@ class LayoutAnimationsProxyCommon : public facebook::react::MountingOverrideDele
contextContainer_(contextContainer),
componentDescriptorRegistry_(componentDescriptorRegistry),
uiRuntime_(uiRuntime),
- uiScheduler_(uiScheduler)
+ uiScheduler_(uiScheduler),
+ uiManager_(uiManager)
#ifdef ANDROID
,
preserveMountedTags_(filterUnmountedTagsFunction),
- uiManager_(uiManager),
jsInvoker_(jsInvoker)
#endif
{
@@ -93,10 +93,10 @@ class LayoutAnimationsProxyCommon : public facebook::react::MountingOverrideDele
SharedComponentDescriptorRegistry componentDescriptorRegistry_;
jsi::Runtime &uiRuntime_;
const std::shared_ptr<UIScheduler> uiScheduler_;
+ std::shared_ptr<facebook::react::UIManager> uiManager_;
PreserveMountedTagsFunction preserveMountedTags_;
#ifdef ANDROID
- std::shared_ptr<facebook::react::UIManager> uiManager_;
std::shared_ptr<facebook::react::CallInvoker> jsInvoker_;
void restoreOpacityInCaseOfFlakyEnteringAnimation(SurfaceId surfaceId) const;
diff --git a/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.h b/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.h
index eca44e4cf651d16e9741806004ce9119c85d07d6..e39c79a5d7b52659106ed6fe6fbcbbc048bf4787 100644
--- a/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.h
+++ b/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.h
@@ -66,11 +66,11 @@ struct LayoutAnimationsProxy_Experimental : public LayoutAnimationsProxyCommon,
const SharedComponentDescriptorRegistry &componentDescriptorRegistry,
const std::shared_ptr<const ContextContainer> &contextContainer,
jsi::Runtime &uiRuntime,
- const std::shared_ptr<UIScheduler> &uiScheduler
+ const std::shared_ptr<UIScheduler> &uiScheduler,
+ const std::shared_ptr<UIManager> &uiManager
#ifdef ANDROID
,
const PreserveMountedTagsFunction &filterUnmountedTagsFunction,
- const std::shared_ptr<UIManager> &uiManager,
const std::shared_ptr<CallInvoker> &jsInvoker
#endif
)
@@ -79,11 +79,11 @@ struct LayoutAnimationsProxy_Experimental : public LayoutAnimationsProxyCommon,
componentDescriptorRegistry,
contextContainer,
uiRuntime,
- uiScheduler
+ uiScheduler,
+ uiManager
#ifdef ANDROID
,
filterUnmountedTagsFunction,
- uiManager,
jsInvoker
#endif
),
diff --git a/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.cpp b/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.cpp
index 83ef7430b923b6b3b99368ee8072168769110cd0..2affd12822ab19bdc90963d3ce8ca1e6bb0d43b7 100644
--- a/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.cpp
+++ b/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.cpp
@@ -2,6 +2,7 @@
#include <reanimated/NativeModules/ReanimatedModuleProxy.h>
#include <react/renderer/animations/utils.h>
+#include <react/renderer/mounting/ShadowTree.h>
#include <react/renderer/mounting/ShadowViewMutation.h>
#include <memory>
@@ -53,14 +54,37 @@ std::optional<MountingTransaction> LayoutAnimationsProxy_Legacy::pullTransaction
parseRemoveMutations(movedViews, mutations, roots);
- auto shouldAnimate = !surfacesToRemove_.contains(surfaceId);
- surfacesToRemove_.erase(surfaceId);
+ // Consume the teardown mark only on the transaction that actually clears
+ // the root — pulls emitted for animation frames must not eat it early.
+ auto shouldAnimate = true;
+ const auto removesRootChildren = std::ranges::any_of(mutations, [surfaceId](const auto &mutation) {
+ return mutation.type == ShadowViewMutation::Remove && mutation.parentTag == surfaceId;
+ });
+ if (removesRootChildren) {
+ shouldAnimate = surfacesToRemove_.erase(surfaceId) == 0;
+ }
handleRemovals(filteredMutations, roots, deadNodes, shouldAnimate);
handleUpdatesAndEnterings(filteredMutations, movedViews, mutations, propsParserContext, surfaceId);
addOngoingAnimations(surfaceId, filteredMutations);
+ // The LayoutAnimationDriver can emit a final keyframe update in the same
+ // transaction as the deferred Remove/Delete it withheld for a delete
+ // animation. We emit removals before updates, so such an update would
+ // otherwise reach the mounting layer after its view was deleted.
+ std::unordered_set<Tag> deletedTags;
+ for (const auto &mutation : filteredMutations) {
+ if (mutation.type == ShadowViewMutation::Delete) {
+ deletedTags.insert(mutation.oldChildShadowView.tag);
+ }
+ }
+ if (!deletedTags.empty()) {
+ std::erase_if(filteredMutations, [&deletedTags](const auto &mutation) {
+ return mutation.type == ShadowViewMutation::Update && deletedTags.contains(mutation.newChildShadowView.tag);
+ });
+ }
+
return MountingTransaction{surfaceId, transactionNumber, std::move(filteredMutations), telemetry};
}
@@ -947,23 +971,22 @@ inline bool MutationNode::isMutationNode() {
return true;
}
-// UIManagerAnimationDelegate
-
-void LayoutAnimationsProxy_Legacy::uiManagerDidConfigureNextLayoutAnimation(
- jsi::Runtime &runtime,
- const RawValue &config,
- const jsi::Value &successCallbackValue,
- const jsi::Value &failureCallbackValue) const {}
+// UIManagerCommitHook
-void LayoutAnimationsProxy_Legacy::setComponentDescriptorRegistry(
- const SharedComponentDescriptorRegistry &componentDescriptorRegistry) {}
-
-bool LayoutAnimationsProxy_Legacy::shouldAnimateFrame() const {
- return false;
-}
-
-void LayoutAnimationsProxy_Legacy::stopSurface(SurfaceId surfaceId) {
- surfacesToRemove_.insert(surfaceId);
+// Surface teardown commits an empty root (SurfaceHandler::stop) before the
+// teardown transaction is pulled — mark it so pullTransaction skips exit
+// animations. Reading the ShadowTreeRegistry here instead would deadlock (#8579).
+RootShadowNode::Unshared LayoutAnimationsProxy_Legacy::shadowTreeWillCommit(
+ const ShadowTree &shadowTree,
+ const RootShadowNode::Shared & /*oldRootShadowNode*/,
+ const RootShadowNode::Unshared &newRootShadowNode) noexcept {
+ auto lock = std::unique_lock<std::recursive_mutex>(mutex);
+ if (newRootShadowNode->getChildren().empty()) {
+ surfacesToRemove_.insert(shadowTree.getSurfaceId());
+ } else {
+ surfacesToRemove_.erase(shadowTree.getSurfaceId());
+ }
+ return newRootShadowNode;
}
} // namespace reanimated
diff --git a/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.h b/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.h
index e9a5e9959e89ec33cee179ddb907c17f6dfbd3de..a2c89041518cd71e8ba5ac62ef89c0022d197c9b 100644
--- a/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.h
+++ b/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.h
@@ -3,8 +3,8 @@
#include <react/renderer/componentregistry/ComponentDescriptorFactory.h>
#include <react/renderer/mounting/MountingOverrideDelegate.h>
#include <react/renderer/scheduler/Scheduler.h>
-#include <react/renderer/uimanager/UIManagerAnimationDelegate.h>
#include <react/renderer/uimanager/UIManagerBinding.h>
+#include <react/renderer/uimanager/UIManagerCommitHook.h>
#include <reanimated/Compat/WorkletsApi.h>
#include <reanimated/LayoutAnimations/LayoutAnimationsManager.h>
#include <reanimated/LayoutAnimations/LayoutAnimationsProxyCommon.h>
@@ -102,7 +102,7 @@ struct SurfaceContext {
};
struct LayoutAnimationsProxy_Legacy : public LayoutAnimationsProxyCommon,
- public UIManagerAnimationDelegate,
+ public UIManagerCommitHook,
public std::enable_shared_from_this<LayoutAnimationsProxy_Legacy> {
mutable std::unordered_map<Tag, std::shared_ptr<Node>> nodeForTag_;
mutable std::recursive_mutex mutex;
@@ -116,11 +116,11 @@ struct LayoutAnimationsProxy_Legacy : public LayoutAnimationsProxyCommon,
const SharedComponentDescriptorRegistry &componentDescriptorRegistry,
const std::shared_ptr<const ContextContainer> &contextContainer,
jsi::Runtime &uiRuntime,
- const std::shared_ptr<UIScheduler> &uiScheduler
+ const std::shared_ptr<UIScheduler> &uiScheduler,
+ const std::shared_ptr<UIManager> &uiManager
#ifdef ANDROID
,
const PreserveMountedTagsFunction &filterUnmountedTagsFunction,
- const std::shared_ptr<UIManager> &uiManager,
const std::shared_ptr<CallInvoker> &jsInvoker
#endif
)
@@ -129,14 +129,19 @@ struct LayoutAnimationsProxy_Legacy : public LayoutAnimationsProxyCommon,
componentDescriptorRegistry,
contextContainer,
uiRuntime,
- uiScheduler
+ uiScheduler,
+ uiManager
#ifdef ANDROID
,
filterUnmountedTagsFunction,
- uiManager,
jsInvoker
#endif
) {
+ uiManager->registerCommitHook(*this);
+ }
+
+ ~LayoutAnimationsProxy_Legacy() override {
+ uiManager_->unregisterCommitHook(*this);
}
void startEnteringAnimation(const int tag, ShadowViewMutation &mutation) const;
@@ -202,19 +207,15 @@ struct LayoutAnimationsProxy_Legacy : public LayoutAnimationsProxyCommon,
const TransactionTelemetry &telemetry,
ShadowViewMutationList mutations) const override;
- // UIManagerAnimationDelegate
-
- void uiManagerDidConfigureNextLayoutAnimation(
- jsi::Runtime &runtime,
- const RawValue &config,
- const jsi::Value &successCallbackValue,
- const jsi::Value &failureCallbackValue) const override;
-
- void setComponentDescriptorRegistry(const SharedComponentDescriptorRegistry &componentDescriptorRegistry) override;
+ // UIManagerCommitHook
- bool shouldAnimateFrame() const override;
+ void commitHookWasRegistered(const UIManager &uiManager) noexcept override {}
+ void commitHookWasUnregistered(const UIManager &uiManager) noexcept override {}
- void stopSurface(SurfaceId surfaceId) override;
+ RootShadowNode::Unshared shadowTreeWillCommit(
+ const ShadowTree &shadowTree,
+ const RootShadowNode::Shared &oldRootShadowNode,
+ const RootShadowNode::Unshared &newRootShadowNode) noexcept override;
};
} // namespace reanimated
diff --git a/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp b/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp
index 9ade22bf773005613048a00c47b35767628e86c6..f3415e824da1a8da5c83762415ca54646bd6429f 100644
--- a/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp
+++ b/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp
@@ -524,15 +524,13 @@ jsi::Value ReanimatedModuleProxy::getSettledUpdates(jsi::Runtime &rt) {
StaticFeatureFlags::getFlag("FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS") &&
"getSettledUpdates requires FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS static feature flag to be enabled");
+ constexpr double SETTLED_ANIMATION_THRESHOLD_MS = 1000;
+
// TODO(future): use unified timestamp
const auto currentTimestamp = getAnimationTimestamp_();
- // TODO: fix bug when threshold difference is smaller than 1 second
// TODO(future): flush updates from CSS animations and CSS transitions registries
- // TODO(future): find a better way to obtain timestamp for removing updates
- // TODO(future): move removing old updates to separate method
- return animatedPropsRegistry_->getUpdatesOlderThanTimestamp(
- rt, currentTimestamp - 1000 /* 1 second */, currentTimestamp - 2000 /* 2 seconds */);
+ return animatedPropsRegistry_->collectSettledUpdates(rt, currentTimestamp - SETTLED_ANIMATION_THRESHOLD_MS);
}
bool ReanimatedModuleProxy::handleEvent(
@@ -1306,11 +1304,11 @@ void ReanimatedModuleProxy::initializeLayoutAnimationsProxy() {
componentDescriptorRegistry,
scheduler->getContextContainer(),
getJSIRuntimeFromWorkletRuntime(uiRuntime_),
- uiScheduler_
+ uiScheduler_,
+ uiManager_
#ifdef ANDROID
,
filterUnmountedTagsFunction_,
- uiManager_,
jsInvoker_
#endif
);
@@ -1319,22 +1317,19 @@ void ReanimatedModuleProxy::initializeLayoutAnimationsProxy() {
#endif
layoutAnimationsProxy_ = std::move(layoutAnimationsProxyExperimental);
} else {
- auto layoutAnimationsProxyLegacy = std::make_shared<LayoutAnimationsProxy_Legacy>(
+ layoutAnimationsProxy_ = std::make_shared<LayoutAnimationsProxy_Legacy>(
layoutAnimationsManager_,
componentDescriptorRegistry,
scheduler->getContextContainer(),
getJSIRuntimeFromWorkletRuntime(uiRuntime_),
- uiScheduler_
+ uiScheduler_,
+ uiManager_
#ifdef ANDROID
,
filterUnmountedTagsFunction_,
- uiManager_,
jsInvoker_
#endif
);
- // TODO (future): support in experimental
- uiManager_->setAnimationDelegate(layoutAnimationsProxyLegacy.get());
- layoutAnimationsProxy_ = std::move(layoutAnimationsProxyLegacy);
}
}
}
diff --git a/src/PropsRegistryGarbageCollector.ts b/src/PropsRegistryGarbageCollector.ts
index f917ce5a8586c02855f1d8d9ae73154592d22510..32148fbac8a9224ffec6edc784b48938da9585fb 100644
--- a/src/PropsRegistryGarbageCollector.ts
+++ b/src/PropsRegistryGarbageCollector.ts
@@ -11,7 +11,6 @@ import { ReanimatedModule } from './ReanimatedModule';
const FLUSH_INTERVAL_MS = 500;
export const PropsRegistryGarbageCollector = {
- viewsCount: 0,
viewsMap: new Map<number, IAnimatedComponentInternal>(),
intervalId: null as NodeJS.Timeout | null,
@@ -25,16 +24,14 @@ export const PropsRegistryGarbageCollector = {
return;
}
this.viewsMap.set(viewTag, component);
- this.viewsCount++;
- if (this.viewsCount === 1) {
+ if (this.viewsMap.size === 1) {
this.registerInterval();
}
},
unregisterView(viewTag: number) {
- this.viewsMap.delete(viewTag);
- this.viewsCount--;
- if (this.viewsCount === 0) {
+ const deleted = this.viewsMap.delete(viewTag);
+ if (deleted && this.viewsMap.size === 0) {
this.unregisterInterval();
}
},
@@ -0,0 +1,65 @@
# react-native-reanimated@4.3.2.patch
Backports of two merged upstream PRs:
1. PR 9901 (`LayoutAnimation.configureNext` compatibility)
2. PR 9971 (stale `settledProps` on worklet re-animation / after app resume)
## 1. Backport of PR 9901
Backport of https://github.com/software-mansion/react-native-reanimated/pull/9901
("refactor(LayoutAnimations): stop taking over UIManagerAnimationDelegate").
Reanimated's legacy `LayoutAnimationsProxy_Legacy` registered itself as the
`UIManagerAnimationDelegate` only to receive `stopSurface`. Occupying that slot
overwrites the `LayoutAnimationDriver` that React Native installs there, which
silently breaks `LayoutAnimation.configureNext` for the whole app.
The patch makes the proxy detect surface teardown itself via a
`UIManagerCommitHook` (a commit with an empty root marks the surface in
`surfacesToRemove_`), frees the animation-delegate slot, and drops final
keyframe `Update` mutations for views deleted in the same transaction (a
deterministic `configureNext` delete-animation crash found in this app).
`uiManager` moves from Android-only to shared constructor args since the hook
registration needs it on both platforms.
Only the `packages/react-native-reanimated` part of the PR is included (the
`apps/fabric-example` hunk is not part of the published package), and the
include hunk in `LayoutAnimationsProxy_Legacy.cpp` was adjusted to the 4.3.2
release sources.
## 2. Backport of PR 9971 (stale `settledProps`)
Verbatim application of
https://github.com/software-mansion/react-native-reanimated/pull/9971, the
4.3-stable cherry-pick of
https://github.com/software-mansion/react-native-reanimated/pull/9527
("Fix stale settledProps on worklet re-animation"). Fixes the Android DM
composer "phantom jump"
(https://github.com/software-mansion/react-native-reanimated/issues/9574).
Background: with `FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS`, once an
animation settles its final props are handed to JS (polled every 500 ms by
`PropsRegistryGarbageCollector`) and stored in React component state
(`settledProps`), after which the React-side snapshot becomes the sole owner
of the value.
The PR replaces `getUpdatesOlderThanTimestamp` (which evicted registry
entries on a wall-clock 1 s/2 s window) with `collectSettledUpdates`:
- `syncedTags_` / `invalidatedTags_` track which tags React already has a
snapshot for; when a previously-synced view re-animates, its stale snapshot
is refreshed on the next GC tick instead of waiting for the new value to
settle.
- Eviction is no longer time-based. An entry is only evicted on the tick
*after* it was returned to JS (once its `settledProps` commit is
guaranteed), so a missed timer window (app backgrounded, JS thread blocked)
can no longer destroy a settled value before it reaches React. This
replaces the ad-hoc eviction guard an earlier version of this patch added
on top of the pre-merge PR 9527.
- `PropsRegistryGarbageCollector` drops the separate `viewsCount` counter
(which could desync when nested animated components unregister a tag that
was never registered, stopping the GC interval while views remain) in favor
of `viewsMap.size`. Only `src/` is touched, matching the PR; Metro bundles
the app from `src/` via the package's `react-native` field, and the stale
`lib/` copy is unreachable (the feature is native-only).
@@ -1,35 +0,0 @@
diff --git a/ios/RNUITextViewShadow.swift b/ios/RNUITextViewShadow.swift
index c34ba712ca628ed8cf2db0f9fc332810ec86d34d..3602856dc8cd926b5321b4ecb109be9c00a23fe6 100644
--- a/ios/RNUITextViewShadow.swift
+++ b/ios/RNUITextViewShadow.swift
@@ -159,13 +159,25 @@ class RNUITextViewShadow: RCTShadowView {
let maxSize = CGSize(width: CGFloat(maxWidth), height: CGFloat(MAXFLOAT))
let textSize = self.attributedText.boundingRect(with: maxSize, options: .usesLineFragmentOrigin, context: nil)
- var totalLines = self.lineHeight == 0.0 ? 0 : Int(ceil(textSize.height / self.lineHeight))
-
- if self.numberOfLines != 0, totalLines > self.numberOfLines {
- totalLines = self.numberOfLines
+ var finalHeight: CGFloat
+
+ if self.numberOfLines != 0 && self.lineHeight != 0.0 {
+ // numberOfLines is set with custom line height - need to calculate lines and snap to lineHeight multiples
+ // NOTE: this calculation can be inaccurate with fractional font sizes
+ var totalLines = Int(ceil(textSize.height / self.lineHeight))
+ if totalLines > self.numberOfLines {
+ totalLines = self.numberOfLines
+ }
+ finalHeight = CGFloat(totalLines) * self.lineHeight
+ } else {
+ // Either no numberOfLines limit, or no custom lineHeight - use actual text height
+ // (numberOfLines without custom lineHeight is handled by the UITextView's textContainer.maximumNumberOfLines)
+ finalHeight = textSize.height
}
- self.frameSize = CGSize(width: CGFloat(maxWidth), height: CGFloat(CGFloat(totalLines) * self.lineHeight))
+ finalHeight = ceil(finalHeight)
+
+ self.frameSize = CGSize(width: CGFloat(maxWidth), height: finalHeight)
return YGSize(width: Float(self.frameSize.width), height: Float(self.frameSize.height))
}
+93 -2
View File
@@ -1,3 +1,28 @@
diff --git a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm
index c593d9ee2155a826352ebca34845aa5792b2eec3..3c26cd737f21116ff0aa48190e97e6c0649b5fac 100644
--- a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm
+++ b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm
@@ -101,6 +101,20 @@ - (void)setContentOffset:(CGPoint)contentOffset
RCTSanitizeNaNValue(contentOffset.y, @"scrollView.contentOffset.y"));
}
+- (void)setCenterContent:(BOOL)centerContent
+{
+ if (_centerContent != centerContent) {
+ _centerContent = centerContent;
+ [self centerContentIfNeeded];
+ }
+}
+
+- (void)setContentSize:(CGSize)contentSize
+{
+ [super setContentSize:contentSize];
+ [self centerContentIfNeeded];
+}
+
- (void)setFrame:(CGRect)frame
{
[super setFrame:frame];
diff --git a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.h b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.h
index 914a2494a57923fbf185644b7e2bb8aca8848e56..0deac55f22350f5e8377d8963fb1c2434bf6abfd 100644
--- a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.h
@@ -11,11 +36,60 @@ index 914a2494a57923fbf185644b7e2bb8aca8848e56..0deac55f22350f5e8377d8963fb1c243
@end
NS_ASSUME_NONNULL_END
diff --git a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm
index 0d231bc8aa938da296eb3b981e8ac9595a43b87f..be0a10d9c4de1892fa00bcbf8d63d739b66d8ffe 100644
--- a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm
+++ b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm
@@ -76,7 +76,17 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
return;
}
- const auto &oldConcreteProps = static_cast<const PullToRefreshViewProps &>(*_props);
+ /*
+ * TODO: Remove after upgrading React Native to 0.82+ (fixed upstream by
+ * facebook/react-native#52615, #52584 and #53231).
+ * Diff against oldProps instead of _props. During the initial-layout replay
+ * from layoutSubviews, _props already holds the new props, so diffing
+ * against it is a no-op and tintColor/progressViewOffset are never applied
+ * on mount (facebook/react-native#56343). oldProps is null-guarded because
+ * the create-mutation path passes nullptr.
+ */
+ const auto &oldConcreteProps = static_cast<const PullToRefreshViewProps &>(
+ oldProps ? *oldProps : *PullToRefreshViewShadowNode::defaultSharedProps());
const auto &newConcreteProps = static_cast<const PullToRefreshViewProps &>(*props);
if (newConcreteProps.tintColor != oldConcreteProps.tintColor) {
diff --git a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm
index 1494fd225aff1fa0429e917404d6b4ca5fc961c5..df643f5c844ad2e684de5161528eba17f4a188d0 100644
index 1494fd225aff1fa0429e917404d6b4ca5fc961c5..682e41b141c38c830bbcd9f2ce0de07b18f13977 100644
--- a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm
+++ b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm
@@ -1038,6 +1038,11 @@ - (void)_adjustForMaintainVisibleContentPosition
@@ -380,7 +380,15 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
MAP_SCROLL_VIEW_PROP(zoomScale);
- if (oldScrollViewProps.contentInset != newScrollViewProps.contentInset) {
+ // When disabling centerContent, reset inset to prop value
+ // (enabling is handled automatically by the setCenterContent: setter)
+ if (oldScrollViewProps.centerContent && !newScrollViewProps.centerContent) {
+ _scrollView.contentInset = RCTUIEdgeInsetsFromEdgeInsets(newScrollViewProps.contentInset);
+ }
+
+ // Only apply contentInset from props if centerContent is disabled
+ // When centerContent is enabled, the inset is calculated by centerContentIfNeeded
+ if (oldScrollViewProps.contentInset != newScrollViewProps.contentInset && !newScrollViewProps.centerContent) {
_scrollView.contentInset = RCTUIEdgeInsetsFromEdgeInsets(newScrollViewProps.contentInset);
}
@@ -507,7 +515,7 @@ - (UIView *)betterHitTest:(CGPoint)point withEvent:(UIEvent *)event
}
}
- return isPointInside ? self : nil;
+ return isPointInside ? _scrollView : nil;
}
/*
@@ -1038,6 +1046,11 @@ - (void)_adjustForMaintainVisibleContentPosition
}
}
@@ -150,6 +224,23 @@ index 8b6571698fc5dd091a0d8980a33bb40295faf305..27c97bfeb6f13907c89f1d85f2bb8b8a
reactChoreographer.postFrameCallback(ReactChoreographer.CallbackType.IDLE_EVENT, this)
}
}
diff --git a/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm b/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm
index 216bb23beb023ef6c3ae814c17e05bccbda7fc91..6ad5cc1d9ed5b8cd2df08ad77adca56c6bb58ff4 100644
--- a/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm
+++ b/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm
@@ -386,9 +386,10 @@ - (TextMeasurement)_measureTextStorage:(NSTextStorage *)textStorage
size.height = enumeratedLinesHeight;
}
+ CGFloat epsilon = 0.001;
size = (CGSize){
- ceil(size.width * layoutContext.pointScaleFactor) / layoutContext.pointScaleFactor,
- ceil(size.height * layoutContext.pointScaleFactor) / layoutContext.pointScaleFactor};
+ ceil((size.width + epsilon) * layoutContext.pointScaleFactor) / layoutContext.pointScaleFactor,
+ ceil((size.height + epsilon) * layoutContext.pointScaleFactor) / layoutContext.pointScaleFactor};
__block auto attachments = TextMeasurement::Attachments{};
diff --git a/third-party-podspecs/fmt.podspec b/third-party-podspecs/fmt.podspec
index 2f38990e226c13f483aaf1b986302d4094243814..9b02e481e290299be20a6f09c42056ff51695e9b 100644
--- a/third-party-podspecs/fmt.podspec
+58
View File
@@ -11,3 +11,61 @@ in the RN repo: https://github.com/facebook/react-native/issues/43388
Patching `RCTRefreshControl.m` and `RCTRefreshControl.h` to add a new `forwarderBeginRefreshing` method to the class.
This method is used by `ExpoScrollForwarder` to initiate a refresh of the underlying `UIScrollView` from inside that
module.
## RCTPullToRefreshViewComponentView.mm Patch - RefreshControl initial props dropped on New Arch
**TODO: Remove after bumping React Native to 0.82+** (fixed upstream by facebook/react-native#52615, #52584
and #53231).
On Fabric, `updateProps` diffs against `_props`, but the initial-layout replay in `layoutSubviews` passes
`_props` as the new props too, so the diff is a no-op and `tintColor`/`progressViewOffset`/`title` are never
applied on mount. This hides the pull-to-refresh spinner behind the floating home header (it stays at offset
0 instead of `headerOffset`). We diff against the `oldProps` argument instead, null-guarded with default
props for the create-mutation path.
Issue: https://github.com/facebook/react-native/issues/56343
## RCTEnhancedScrollView.mm / RCTScrollViewComponentView.mm Patch - centerContent insets stale after content resize on New Arch
**TODO: Remove after bumping React Native to 0.87+** (fixed upstream by facebook/react-native#56832,
commit d50c1b5207; first shipped in 0.87.0-rc.0).
On Fabric, `centerContent` centers by computing `contentInset` in `centerContentIfNeeded`, but that
recompute only ran on `setFrame`/`didAddSubview`/`scrollViewDidZoom` - not when a state update assigns a
new `contentSize` in `updateState`. Any content that resizes after mount inside a `centerContent`
ScrollView (e.g. the lightbox image crop view getting its real aspect ratio from `onLoad` when the embed
has no aspectRatio metadata) keeps the old insets: content rests off-center and the excess inset creates
phantom scroll range, so the image can be dragged and parked off-center and the native scroll steals the
swipe-down-to-dismiss pan. The old architecture paired every `contentSize` update with re-centering in
`RCTScrollView.updateContentSizeIfNeeded`; Fabric dropped that link.
Backport of the upstream fix: `setContentSize:`/`setCenterContent:` overrides on `RCTEnhancedScrollView`
that call `centerContentIfNeeded`, plus the `updateProps` guards so the `contentInset` prop does not
fight the computed centering inset.
Issue: https://github.com/facebook/react-native/issues/55090
## RCTScrollViewComponentView.mm Patch - ScrollView pinch/pan ignored outside content area on New Arch
**TODO: Remove after bumping React Native to 0.87+** (fixed upstream by facebook/react-native#56747,
commit efcab20908; first shipped in 0.87.0-rc.0).
On Fabric, `betterHitTest` in `RCTScrollViewComponentView` deliberately skips the `_containerView`
and hit-tests its grandchildren, returning `self` (the wrapper component view) when the touch lands
inside the scroll view bounds but outside any content. UIKit only delivers touches to a gesture
recognizer when the hit view is the recognizer's view or a descendant of it, and the `UIScrollView`
is a *child* of the wrapper - so its native pinch/pan recognizers never see those touches. In the
lightbox this means pinch-to-zoom and pan-while-zoomed only respond when the fingers are over the
image itself, not over the letterbox bars above/below it. On the old architecture, default UIKit
hit-testing returns the `UIScrollView` itself for those touches, so everything works.
Backport of the upstream one-liner: return `_scrollView` instead of `self` so touches in the
content-less area are attributed to the `UIScrollView`.
Issue: https://github.com/facebook/react-native/issues/54123
PR: https://github.com/react/react-native/pull/56747
## RCTTextLayoutManager.mm Patch - Text overflows instead of wrapping on the last line
Issue: https://github.com/react/react-native/issues/53450#issuecomment-3298157830
Bandaid fix taken from: https://github.com/react/react-native/commit/581d643a9e59fd88f93757f80194e1efd11bd0e5