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 renderzio/stable
parent
4431cfe2d2
commit
2a1edab6d4
|
@ -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}
|
||||
}
|
||||
|
|
|
@ -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)}],
|
||||
|
|
|
@ -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,22 +155,24 @@ const Container = observer(function ContainerImpl({
|
|||
const interp = useAnimatedValue(0)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (store.shell.minimalShellMode) {
|
||||
Animated.timing(interp, {
|
||||
toValue: 1,
|
||||
duration: 100,
|
||||
useNativeDriver: true,
|
||||
isInteraction: false,
|
||||
}).start()
|
||||
} else {
|
||||
Animated.timing(interp, {
|
||||
toValue: 0,
|
||||
duration: 100,
|
||||
useNativeDriver: true,
|
||||
isInteraction: false,
|
||||
}).start()
|
||||
}
|
||||
}, [interp, store.shell.minimalShellMode])
|
||||
return autorun(() => {
|
||||
if (store.shell.minimalShellMode) {
|
||||
Animated.timing(interp, {
|
||||
toValue: 1,
|
||||
duration: 100,
|
||||
useNativeDriver: true,
|
||||
isInteraction: false,
|
||||
}).start()
|
||||
} else {
|
||||
Animated.timing(interp, {
|
||||
toValue: 0,
|
||||
duration: 100,
|
||||
useNativeDriver: true,
|
||||
isInteraction: false,
|
||||
}).start()
|
||||
}
|
||||
})
|
||||
}, [interp, store])
|
||||
const transform = {
|
||||
transform: [{translateY: Animated.multiply(interp, -100)}],
|
||||
}
|
||||
|
|
|
@ -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(() => {
|
||||
Animated.timing(interp, {
|
||||
toValue: store.shell.minimalShellMode ? 0 : 1,
|
||||
duration: 100,
|
||||
useNativeDriver: true,
|
||||
isInteraction: false,
|
||||
}).start()
|
||||
}, [interp, store.shell.minimalShellMode])
|
||||
return autorun(() => {
|
||||
Animated.timing(interp, {
|
||||
toValue: store.shell.minimalShellMode ? 0 : 1,
|
||||
duration: 100,
|
||||
useNativeDriver: true,
|
||||
isInteraction: false,
|
||||
}).start()
|
||||
})
|
||||
}, [interp, store])
|
||||
const transform = isTablet
|
||||
? undefined
|
||||
: {
|
||||
|
|
Loading…
Reference in New Issue