From 2a1edab6d4a8e8b4197b10868153a525f918509c Mon Sep 17 00:00:00 2001 From: dan 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