React Native New Arch (#10980)

src/components/Lightbox/pager/ImageItem/ImageItem.android.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react-native-gesture-handler'
 import Animated, {
   type AnimatableValue,
+  Reanimated3DefaultSpringConfig,
   runOnJS,
   type SharedValue,
   useAnimatedReaction,
@@ -463,7 +464,10 @@ function clampTranslation(
 
 function withClampedSpring<T extends AnimatableValue>(value: T): T {
   'worklet'
-  return withSpring(value, {overshootClamping: true})
+  return withSpring(value, {
+    ...Reanimated3DefaultSpringConfig,
+    overshootClamping: true,
+  })
 }
 
 export default memo(ImageItem)

src/components/Lightbox/pager/ImageItem/ImageItem.ios.tsx

@@ -170,8 +170,6 @@ const ImageItem = ({
       width: screenSize.width,
       maxHeight: screenSize.height,
       alignSelf: 'center',
-      aspectRatio: imageAspect ?? 1 /* force onLoad */,
-      opacity: imageAspect === undefined ? 0 : 1,
     }
   })
 
@@ -180,11 +178,19 @@ const ImageItem = ({
     return {
       transform: cropContentTransform,
       width: '100%',
-      aspectRatio: imageAspect ?? 1 /* force onLoad */,
-      opacity: imageAspect === undefined ? 0 : 1,
     }
   })
 
+  /*
+   * When the aspect ratio is unknown until onLoad fires, these layout props
+   * change after mount. They must be applied via a React render rather than
+   * useAnimatedStyle
+   */
+  const imageLayoutStyle = {
+    aspectRatio: imageAspect ?? 1 /* force onLoad */,
+    opacity: imageAspect === undefined ? 0 : 1,
+  }
+
   const [showLoader, setShowLoader] = useState(false)
   const [hasLoaded, setHasLoaded] = useState(false)
   useAnimatedReaction(
@@ -225,8 +231,8 @@ const ImageItem = ({
         {showLoader && (
           <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
         )}
-        <Animated.View style={imageCropStyle}>
-          <Animated.View style={imageStyle}>
+        <Animated.View style={[imageCropStyle, imageLayoutStyle]}>
+          <Animated.View style={[imageStyle, imageLayoutStyle]}>
             <Image
               contentFit="contain"
               source={{uri: imageSrc.uri}}

src/components/Lightbox/pager/ImagePager.tsx

@@ -60,13 +60,11 @@ const SLOW_SPRING: WithSpringConfig = {
   mass: IS_IOS ? 1.25 : 0.75,
   damping: 300,
   stiffness: 800,
-  restDisplacementThreshold: 0.001,
 }
 const FAST_SPRING: WithSpringConfig = {
   mass: IS_IOS ? 1.25 : 0.75,
   damping: 150,
   stiffness: 900,
-  restDisplacementThreshold: 0.001,
 }
 
 function canAnimate(lightbox: Lightbox): boolean {
@@ -532,7 +530,7 @@ function LightboxImage({
     const dismissTranslateY =
       isActive && openProgressValue === 1 ? dismissSwipeTranslateY.get() : 0
 
-    if (openProgressValue === 0 && isFlyingAway.get()) {
+    if (openProgressValue === 0) {
       return {
         isHidden: true,
         isResting: false,
@@ -609,6 +607,7 @@ function LightboxImage({
           return withSpring(0, {
             stiffness: 700,
             damping: 50,
+            mass: 1,
             reduceMotion: ReduceMotion.Never,
           })
         })

src/components/Lightbox/types.ts

@@ -6,7 +6,6 @@
  *
  */
 
-import {type Component} from 'react'
 import {type TransformsStyle} from 'react-native'
 import {
   type AnimatedRef,
@@ -29,7 +28,7 @@ export type ImageSource = {
   thumbUri: string
   thumbDimensions: Dimensions | null
   thumbRect: MeasuredDimensions | null
-  thumbRef?: AnimatedRef<Component> | null
+  thumbRef?: AnimatedRef | null
   thumbBorderRadius?: number
   alt?: string
   type: 'image' | 'circle-avi' | 'rect-avi'