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/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,6 +13,7 @@ export function useMinimalShellMode() {
   }
 
   React.useEffect(() => {
+    return autorun(() => {
       if (store.shell.minimalShellMode) {
         Animated.timing(minimalShellInterp, {
           toValue: 1,
@@ -27,7 +29,8 @@ export function useMinimalShellMode() {
           isInteraction: false,
         }).start()
       }
-  }, [minimalShellInterp, store.shell.minimalShellMode])
+    })
+  }, [minimalShellInterp, store])
 
   return {footerMinimalShellTransform}
 }

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(() => {
+    return autorun(() => {
       Animated.timing(interp, {
         toValue: store.shell.minimalShellMode ? 1 : 0,
         duration: 150,
         useNativeDriver: true,
         isInteraction: false,
       }).start()
-  }, [interp, store.shell.minimalShellMode])
+    })
+  }, [interp, store])
   const transform = {
     opacity: Animated.subtract(1, interp),
     transform: [{translateY: Animated.multiply(interp, -50)}],

src/view/com/util/ViewHeader.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
+import {autorun} from 'mobx'
 import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
@@ -154,6 +155,7 @@ const Container = observer(function ContainerImpl({
   const interp = useAnimatedValue(0)
 
   React.useEffect(() => {
+    return autorun(() => {
       if (store.shell.minimalShellMode) {
         Animated.timing(interp, {
           toValue: 1,
@@ -169,7 +171,8 @@ const Container = observer(function ContainerImpl({
           isInteraction: false,
         }).start()
       }
-  }, [interp, store.shell.minimalShellMode])
+    })
+  }, [interp, store])
   const transform = {
     transform: [{translateY: Animated.multiply(interp, -100)}],
   }

src/view/com/util/fab/FABInner.tsx

@@ -1,5 +1,6 @@
 import React, {ComponentProps} from 'react'
 import {observer} from 'mobx-react-lite'
+import {autorun} from 'mobx'
 import {Animated, StyleSheet, TouchableWithoutFeedback} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {gradients} from 'lib/styles'
@@ -25,13 +26,15 @@ export const FABInner = observer(function FABInnerImpl({
   const store = useStores()
   const interp = useAnimatedValue(0)
   React.useEffect(() => {
+    return autorun(() => {
       Animated.timing(interp, {
         toValue: store.shell.minimalShellMode ? 0 : 1,
         duration: 100,
         useNativeDriver: true,
         isInteraction: false,
       }).start()
-  }, [interp, store.shell.minimalShellMode])
+    })
+  }, [interp, store])
   const transform = isTablet
     ? undefined
     : {