From 11d14be6902d6694a921d43101deed69bee3b2f8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 30 Nov 2024 19:10:06 +0000
Subject: [PATCH] Fast path for initial styles

---
 src/view/com/pager/TabBar.tsx | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index b2264767f4..f9ac7a0024 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -65,9 +65,7 @@ export function TabBar({
   // We'll re-sync it here (with an animation) if you interact with the pager again.
   // From that point on, it'll remain synced again (unless you scroll the tabbar again).
   useAnimatedReaction(
-    () => {
-      return dragState.value
-    },
+    () => dragState.value,
     (nextDragState, prevDragState) => {
       if (
         nextDragState !== prevDragState &&
@@ -121,6 +119,9 @@ export function TabBar({
   )
 
   const indicatorStyle = useAnimatedStyle(() => {
+    if (!_WORKLET) {
+      return {opacity: 0}
+    }
     const layoutsValue = layouts.get()
     if (
       layoutsValue.length !== itemsLength ||
@@ -238,14 +239,19 @@ function TabBarItem({
   onItemLayout: (index: number, layout: {x: number; width: number}) => void
 }) {
   const pal = usePalette('default')
-  const style = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      dragProgress.get(),
-      [index - 1, index, index + 1],
-      [0.7, 1, 0.7],
-      'clamp',
-    ),
-  }))
+  const style = useAnimatedStyle(() => {
+    if (!_WORKLET) {
+      return {opacity: 0.7}
+    }
+    return {
+      opacity: interpolate(
+        dragProgress.get(),
+        [index - 1, index, index + 1],
+        [0.7, 1, 0.7],
+        'clamp',
+      ),
+    }
+  })
 
   const handleLayout = useCallback(
     (e: LayoutChangeEvent) => {