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

1 files changed, 19 insertions, 16 deletions

diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx
index 2a0a4e4d0..68f405dc4 100644
--- a/src/lib/hooks/useMinimalShellMode.tsx
+++ b/src/lib/hooks/useMinimalShellMode.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import {autorun} from 'mobx'
 import {useStores} from 'state/index'
 import {Animated} from 'react-native'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
@@ -12,22 +13,24 @@ export function useMinimalShellMode() {
   }
 
   React.useEffect(() => {
-    if (store.shell.minimalShellMode) {
-      Animated.timing(minimalShellInterp, {
-        toValue: 1,
-        duration: 150,
-        useNativeDriver: true,
-        isInteraction: false,
-      }).start()
-    } else {
-      Animated.timing(minimalShellInterp, {
-        toValue: 0,
-        duration: 150,
-        useNativeDriver: true,
-        isInteraction: false,
-      }).start()
-    }
-  }, [minimalShellInterp, store.shell.minimalShellMode])
+    return autorun(() => {
+      if (store.shell.minimalShellMode) {
+        Animated.timing(minimalShellInterp, {
+          toValue: 1,
+          duration: 150,
+          useNativeDriver: true,
+          isInteraction: false,
+        }).start()
+      } else {
+        Animated.timing(minimalShellInterp, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+          isInteraction: false,
+        }).start()
+      }
+    })
+  }, [minimalShellInterp, store])
 
   return {footerMinimalShellTransform}
 }