Migrate runOnUI/runOnJS to scheduleOnUI/scheduleOnRN (#11249)

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

@@ -8,7 +8,6 @@ import {
 import Animated, {
   type AnimatableValue,
   Reanimated3DefaultSpringConfig,
-  runOnJS,
   type SharedValue,
   useAnimatedReaction,
   useAnimatedRef,
@@ -16,6 +15,7 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated'
+import {scheduleOnRN} from 'react-native-worklets'
 import {Image} from 'expo-image'
 
 import {
@@ -95,7 +95,7 @@ const ImageItem = ({
     },
     (nextIsScaled, prevIsScaled) => {
       if (nextIsScaled !== prevIsScaled) {
-        runOnJS(handleZoom)(nextIsScaled)
+        scheduleOnRN(handleZoom, nextIsScaled)
       }
     },
   )
@@ -245,7 +245,7 @@ const ImageItem = ({
 
   const singleTap = Gesture.Tap().onEnd(() => {
     'worklet'
-    runOnJS(onTap)()
+    scheduleOnRN(onTap)
   })
 
   const doubleTap = Gesture.Tap()
@@ -359,9 +359,9 @@ const ImageItem = ({
     },
     (show, prevShow) => {
       if (!prevShow && show) {
-        runOnJS(setShowLoader)(true)
+        scheduleOnRN(setShowLoader, true)
       } else if (prevShow && !show) {
-        runOnJS(setShowLoader)(false)
+        scheduleOnRN(setShowLoader, false)
       }
     },
   )

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

@@ -14,7 +14,6 @@ import {
   type PanGesture,
 } from 'react-native-gesture-handler'
 import Animated, {
-  runOnJS,
   type SharedValue,
   useAnimatedProps,
   useAnimatedReaction,
@@ -24,6 +23,7 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated'
 import {useSafeAreaFrame} from 'react-native-safe-area-context'
+import {scheduleOnRN} from 'react-native-worklets'
 import {Image} from 'expo-image'
 
 import {
@@ -84,7 +84,7 @@ const ImageItem = ({
       'worklet'
       const nextIsScaled = e.zoomScale > 1
       if (scaled !== nextIsScaled) {
-        runOnJS(handleZoom)(nextIsScaled)
+        scheduleOnRN(handleZoom, nextIsScaled)
       }
     },
     onBeginDrag() {
@@ -118,7 +118,7 @@ const ImageItem = ({
 
   const singleTap = Gesture.Tap().onEnd(() => {
     'worklet'
-    runOnJS(onTap)()
+    scheduleOnRN(onTap)
   })
 
   const doubleTap = Gesture.Tap()
@@ -142,7 +142,7 @@ const ImageItem = ({
           screenSize,
         )
       }
-      runOnJS(zoomTo)(nextZoomRect)
+      scheduleOnRN(zoomTo, nextZoomRect)
     })
 
   const composedGesture = Gesture.Exclusive(
@@ -199,9 +199,9 @@ const ImageItem = ({
     },
     (show, prevShow) => {
       if (!prevShow && show) {
-        runOnJS(setShowLoader)(true)
+        scheduleOnRN(setShowLoader, true)
       } else if (prevShow && !show) {
-        runOnJS(setShowLoader)(false)
+        scheduleOnRN(setShowLoader, false)
       }
     },
   )

src/components/Lightbox/pager/ImagePager.tsx

@@ -20,8 +20,6 @@ import Animated, {
   measure,
   type MeasuredDimensions,
   ReduceMotion,
-  runOnJS,
-  runOnUI,
   type SharedValue,
   useAnimatedReaction,
   useAnimatedRef,
@@ -32,6 +30,7 @@ import Animated, {
   withSpring,
   type WithSpringConfig,
 } from 'react-native-reanimated'
+import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
 import {Image} from 'expo-image'
 import * as ScreenOrientation from 'expo-screen-orientation'
 
@@ -136,10 +135,10 @@ export default function ImageViewRoot({
 
   const onFullyClosed = useCallback(() => {
     setActiveLightbox(null)
-    runOnUI(() => {
+    scheduleOnUI(() => {
       'worklet'
       thumbRects.set({})
-    })()
+    })
     requestIdleCallback(() => {
       void Image.clearMemoryCache()
     })
@@ -149,7 +148,7 @@ export default function ImageViewRoot({
     () => openProgress.get() === 0,
     (isGone, wasGone) => {
       if (isGone && !wasGone) {
-        runOnJS(onFullyClosed)()
+        scheduleOnRN(onFullyClosed)
       }
     },
   )
@@ -160,10 +159,10 @@ export default function ImageViewRoot({
     () => openProgress.get() === 1,
     (isOpen, wasOpen) => {
       if (isOpen && !wasOpen) {
-        runOnJS(ScreenOrientation.unlockAsync)()
+        scheduleOnRN(ScreenOrientation.unlockAsync)
       } else if (!isOpen && wasOpen) {
         // default is PORTRAIT_UP - set via config plugin in app.config.js -sfn
-        runOnJS(ScreenOrientation.lockAsync)(PORTRAIT_UP)
+        scheduleOnRN(ScreenOrientation.lockAsync, PORTRAIT_UP)
       }
     },
   )
@@ -171,7 +170,7 @@ export default function ImageViewRoot({
   const onFlyAway = useCallback(() => {
     'worklet'
     openProgress.set(0)
-    runOnJS(onRequestClose)()
+    scheduleOnRN(onRequestClose)
   }, [onRequestClose, openProgress])
 
   return (
@@ -320,7 +319,7 @@ function ImageView({
   const handleRequestClose = useCallback(() => {
     const activeRef = images[imageIndex]?.thumbRef
     if (isAnimated && activeRef) {
-      runOnUI(() => {
+      scheduleOnUI(() => {
         'worklet'
         const rect = measure(activeRef)
         thumbRects.modify(rects => {
@@ -328,8 +327,8 @@ function ImageView({
           rects[imageIndex] = rect
           return rects
         })
-        runOnJS(onRequestClose)()
-      })()
+        scheduleOnRN(onRequestClose)
+      })
     } else {
       onRequestClose()
     }