From 2a1edab6d4a8e8b4197b10868153a525f918509c Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Fri, 13 Oct 2023 15:24:28 +0100
Subject: Don't re-render bars when showing/hiding them (#1691)

* Don't re-render bars when showing/hiding them

* Fix more cases

* Use autorun instead of reaction to fix first render
---
 src/view/com/pager/FeedsTabBarMobile.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

(limited to 'src/view/com/pager/FeedsTabBarMobile.tsx')

diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index ad1a69cf6..6bdba11a1 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react'
 import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import {autorun} from 'mobx'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {useStores} from 'state/index'
@@ -22,13 +23,15 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
   const interp = useAnimatedValue(0)
 
   React.useEffect(() => {
-    Animated.timing(interp, {
-      toValue: store.shell.minimalShellMode ? 1 : 0,
-      duration: 150,
-      useNativeDriver: true,
-      isInteraction: false,
-    }).start()
-  }, [interp, store.shell.minimalShellMode])
+    return autorun(() => {
+      Animated.timing(interp, {
+        toValue: store.shell.minimalShellMode ? 1 : 0,
+        duration: 150,
+        useNativeDriver: true,
+        isInteraction: false,
+      }).start()
+    })
+  }, [interp, store])
   const transform = {
     opacity: Animated.subtract(1, interp),
     transform: [{translateY: Animated.multiply(interp, -50)}],
-- 
cgit 1.4.1

