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
zio/stable
dan 2023-10-13 15:24:28 +01:00 committed by GitHub
parent 4431cfe2d2
commit 2a1edab6d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 46 deletions

View File

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

View File

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

View File

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

View File

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