diff options
Diffstat (limited to 'src/view/com/util/load-latest/LoadLatestBtn.tsx')
-rw-r--r-- | src/view/com/util/load-latest/LoadLatestBtn.tsx | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx index f5d12ce2c..095ebea44 100644 --- a/src/view/com/util/load-latest/LoadLatestBtn.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx @@ -10,6 +10,10 @@ import {colors} from 'lib/styles' import {HITSLOP_20} from 'lib/constants' import {isWeb} from 'platform/detection' import {clamp} from 'lib/numbers' +import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated' + +const AnimatedTouchableOpacity = + Animated.createAnimatedComponent(TouchableOpacity) export const LoadLatestBtn = observer(function LoadLatestBtnImpl({ onPress, @@ -30,15 +34,18 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({ ? 50 : (minMode || isDesktop ? 16 : 60) + (isWeb ? 20 : clamp(safeAreaInsets.bottom, 15, 60)) + const animatedStyle = useAnimatedStyle(() => ({ + bottom: withTiming(bottom, {duration: 150}), + })) return ( - <TouchableOpacity + <AnimatedTouchableOpacity style={[ styles.loadLatest, isDesktop && styles.loadLatestDesktop, isTablet && styles.loadLatestTablet, pal.borderDark, pal.view, - {bottom}, + animatedStyle, ]} onPress={onPress} hitSlop={HITSLOP_20} @@ -47,7 +54,7 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({ accessibilityHint=""> <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} /> {showIndicator && <View style={[styles.indicator, pal.borderDark]} />} - </TouchableOpacity> + </AnimatedTouchableOpacity> ) }) |