diff --git a/src/screens/Wallet/ResultModalInfo.tsx b/src/screens/Wallet/ResultModalInfo.tsx index fb513340..4c686ceb 100644 --- a/src/screens/Wallet/ResultModalInfo.tsx +++ b/src/screens/Wallet/ResultModalInfo.tsx @@ -22,27 +22,30 @@ export const ResultModalInfo = function(props: { const textColor = useThemeColor('textDim') - const glowOpacity = useSharedValue(0) + const contentOpacity = useSharedValue(0) const iconScale = useSharedValue(0.8) useEffect(() => { - // Delay animation start to allow modal to fully appear - + contentOpacity.value = withTiming(1, { duration: 350, easing: Easing.out(Easing.ease) }) iconScale.value = withDelay( - 300, + 150, withSequence( - withTiming(1.15, { duration: 400, easing: Easing.out(Easing.ease) }), - withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) }) + withTiming(1.15, { duration: 350, easing: Easing.out(Easing.ease) }), + withTiming(1, { duration: 250, easing: Easing.inOut(Easing.ease) }) ) ) }, []) + const containerAnimatedStyle = useAnimatedStyle(() => ({ + opacity: contentOpacity.value, + })) + const iconAnimatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: iconScale.value }], })) return ( - + @@ -53,7 +56,7 @@ export const ResultModalInfo = function(props: { style={{color: textColor, textAlign: 'center', marginTop: spacing.small}} text={props.message} /> - + ) }