Use the native driver on the tabbar indicator to improve perf

3 files changed, 17 insertions, 10 deletions

diff --git a/src/view/com/util/Pager.tsx b/src/view/com/util/Pager.tsx
index 89ba59e85..47b786fb1 100644
--- a/src/view/com/util/Pager.tsx
+++ b/src/view/com/util/Pager.tsx
@@ -68,7 +68,7 @@ export const Pager = ({
               },
             },
           ],
-          {useNativeDriver: false},
+          {useNativeDriver: true},
         )}>
         {children}
       </AnimatedPagerView>
diff --git a/src/view/com/util/TabBar.tsx b/src/view/com/util/TabBar.tsx
index ac1814685..d3fe54830 100644
--- a/src/view/com/util/TabBar.tsx
+++ b/src/view/com/util/TabBar.tsx
@@ -44,14 +44,20 @@ export function TabBar({
     backgroundColor: indicatorColor || pal.colors.link,
     bottom: indicatorPosition === 'bottom' ? -1 : undefined,
     top: indicatorPosition === 'top' ? -1 : undefined,
-    left: panX.interpolate({
-      inputRange: items.map((_item, i) => i),
-      outputRange: itemLayouts.map(l => l.x),
-    }),
-    width: panX.interpolate({
-      inputRange: items.map((_item, i) => i),
-      outputRange: itemLayouts.map(l => l.width),
-    }),
+    transform: [
+      {
+        translateX: panX.interpolate({
+          inputRange: items.map((_item, i) => i),
+          outputRange: itemLayouts.map(l => l.x + l.width / 2),
+        }),
+      },
+      {
+        scaleX: panX.interpolate({
+          inputRange: items.map((_item, i) => i),
+          outputRange: itemLayouts.map(l => l.width),
+        }),
+      },
+    ],
   }
 
   const onLayout = () => {
@@ -116,6 +122,8 @@ const styles = StyleSheet.create({
   },
   indicator: {
     position: 'absolute',
+    left: 0,
+    width: 1,
     height: 3,
     borderRadius: 4,
   },
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 390746eb3..52cf4352f 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -311,7 +311,6 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     paddingTop: 0,
     paddingBottom: 30,
-    // height: 100,
   },
   tabBarAvi: {
     marginRight: 4,