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

src/view/com/composer/Composer.tsx

@@ -32,7 +32,6 @@ import Animated, {
   interpolateColor,
   LayoutAnimationConfig,
   LinearTransition,
-  runOnUI,
   scrollTo,
   useAnimatedRef,
   useAnimatedScrollHandler,
@@ -45,6 +44,7 @@ import Animated, {
   ZoomOut,
 } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {scheduleOnUI} from 'react-native-worklets'
 import * as FileSystem from 'expo-file-system'
 import {type ImagePickerAsset} from 'expo-image-picker'
 import {
@@ -2382,7 +2382,7 @@ function useScrollTracker({
 
   const onScrollViewContentSizeChange = useCallback(
     (_width: number, height: number) => {
-      runOnUI(onScrollViewContentSizeChangeUIThread)(height)
+      scheduleOnUI(onScrollViewContentSizeChangeUIThread, height)
     },
     [onScrollViewContentSizeChangeUIThread],
   )

src/view/com/pager/Pager.tsx

@@ -18,12 +18,12 @@ import PagerView, {
   type PageScrollStateChangedNativeEventData,
 } from 'react-native-pager-view'
 import Animated, {
-  runOnJS,
   type SharedValue,
   useEvent,
   useHandler,
   useSharedValue,
 } from 'react-native-reanimated'
+import {scheduleOnRN} from 'react-native-worklets'
 import {useFocusEffect} from '@react-navigation/native'
 
 import {useSetDrawerSwipeDisabled} from '#/state/shell'
@@ -125,7 +125,7 @@ export function Pager({
       },
       onPageScrollStateChanged(e: PageScrollStateChangedNativeEventData) {
         'worklet'
-        runOnJS(setIsIdle)(e.pageScrollState === 'idle')
+        scheduleOnRN(setIsIdle, e.pageScrollState === 'idle')
         if (dragState.get() === 'idle' && e.pageScrollState === 'settling') {
           // This is a programmatic scroll on Android.
           // Stay "idle" to match iOS and avoid confusing downstream code.
@@ -137,7 +137,7 @@ export function Pager({
       onPageSelected(e: PagerViewOnPageSelectedEventData) {
         'worklet'
         didInit.set(true)
-        runOnJS(onPageSelectedJSThread)(e.position)
+        scheduleOnRN(onPageSelectedJSThread, e.position)
       },
     },
     [parentOnPageScrollStateChanged],

src/view/com/pager/PagerWithHeader.tsx

@@ -8,13 +8,13 @@ import {
 } from 'react-native'
 import Animated, {
   type AnimatedRef,
-  runOnUI,
   scrollTo,
   type SharedValue,
   useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated'
+import {scheduleOnUI} from 'react-native-worklets'
 
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {
@@ -181,7 +181,7 @@ export function PagerWithHeader({
   )
 
   const onTabPressed = useCallback(() => {
-    runOnUI(adjustScrollForOtherPages)('dragging')
+    scheduleOnUI(adjustScrollForOtherPages, 'dragging')
   }, [adjustScrollForOtherPages])
 
   return (

src/view/com/pager/TabBar.tsx

@@ -7,8 +7,6 @@ import {
 } from 'react-native'
 import Animated, {
   interpolate,
-  runOnJS,
-  runOnUI,
   scrollTo,
   type SharedValue,
   useAnimatedReaction,
@@ -16,6 +14,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated'
+import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
 
 import {PressableWithHover} from '#/view/com/util/PressableWithHover'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
@@ -126,7 +125,7 @@ export function TabBar({
           const progress = dragProgress.get()
           const offset = progressToOffset(progress)
           // It's unclear why we need to go back to JS here. It seems iOS-specific.
-          runOnJS(scrollToOffsetJS)(offset)
+          scheduleOnRN(scrollToOffsetJS, offset)
         }
       }
     },
@@ -303,7 +302,7 @@ export function TabBar({
 
   const onPressItem = useCallback(
     (index: number) => {
-      runOnUI(onPressUIThread)(index)
+      scheduleOnUI(onPressUIThread, index)
       onSelect?.(index)
       if (index === selectedPage) {
         onPressSelected?.(index)
@@ -409,14 +408,14 @@ function TabBarItem({
 
   const handleLayout = useCallback(
     (e: LayoutChangeEvent) => {
-      runOnUI(onItemLayout)(index, e.nativeEvent.layout)
+      scheduleOnUI(onItemLayout, index, e.nativeEvent.layout)
     },
     [index, onItemLayout],
   )
 
   const handleTextLayout = useCallback(
     (e: LayoutChangeEvent) => {
-      runOnUI(onTextLayout)(index, e.nativeEvent.layout)
+      scheduleOnUI(onTextLayout, index, e.nativeEvent.layout)
     },
     [index, onTextLayout],
   )

src/view/com/util/List.tsx

@@ -2,10 +2,10 @@ import {forwardRef, memo, useDeferredValue, useMemo} from 'react'
 import {RefreshControl, type ViewToken} from 'react-native'
 import {
   type FlatListPropsWithLayout,
-  runOnJS,
   useAnimatedScrollHandler,
   useSharedValue,
 } from 'react-native-reanimated'
+import {scheduleOnRN} from 'react-native-worklets'
 import {updateActiveVideoViewAsync} from '@bsky.app/video'
 
 import {useDedupe} from '#/lib/hooks/useDedupe'
@@ -85,7 +85,7 @@ let List = forwardRef<ListMethods, ListProps>(
         onBeginDragFromContext?.(e, ctx)
       },
       onEndDrag(e, ctx) {
-        runOnJS(updateActiveVideoViewAsync)()
+        scheduleOnRN(updateActiveVideoViewAsync)
         onEndDragFromContext?.(e, ctx)
       },
       onScroll(e, ctx) {
@@ -95,18 +95,18 @@ let List = forwardRef<ListMethods, ListProps>(
         if (isScrolledDown.get() !== didScrollDown) {
           isScrolledDown.set(didScrollDown)
           if (onScrolledDownChange != null) {
-            runOnJS(handleScrolledDownChange)(didScrollDown)
+            scheduleOnRN(handleScrolledDownChange, didScrollDown)
           }
         }
 
         if (IS_IOS) {
-          runOnJS(dedupe)(updateActiveVideoViewAsync)
+          scheduleOnRN(dedupe, updateActiveVideoViewAsync)
         }
       },
       // Note: adding onMomentumBegin here makes simulator scroll
       // lag on Android. So either don't add it, or figure out why.
       onMomentumEnd(e, ctx) {
-        runOnJS(updateActiveVideoViewAsync)()
+        scheduleOnRN(updateActiveVideoViewAsync)
         onMomentumEndFromContext?.(e, ctx)
       },
     })