mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-01-19 05:45:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

ADD: Slide up animation for FloatButton

Browse Source
This commit is contained in:
Marcos Rodriguez Velez 2024-04-12 21:26:41 -04:00
parent c988c192b4
commit 8a90e0e905
No known key found for this signature in database
GPG Key ID: 6030B2F48CCE86D7
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/FloatButtons.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useRef, forwardRef, ReactNode } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions, PixelRatio } from 'react-native';
import React, { useState, useRef, forwardRef, ReactNode, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions, PixelRatio, Animated, useWindowDimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTheme } from './themes';
@ -39,6 +39,18 @@ export const FContainer = forwardRef<View, FContainerProps>((props, ref) => {
const [newWidth, setNewWidth] = useState<number | undefined>(undefined);
const layoutCalculated = useRef(false);
const bottomInsets = { bottom: insets.bottom ? insets.bottom + 10 : 30 };
const { height } = useWindowDimensions();
const slideAnimation = useRef(new Animated.Value(height)).current;
useEffect(() => {
slideAnimation.setValue(height);
Animated.spring(slideAnimation, {
toValue: 0,
useNativeDriver: true,
speed: 100,
bounciness: 3,
}).start();
}, [height, slideAnimation]);
const onLayout = (event: { nativeEvent: { layout: { width: number } } }) => {
if (layoutCalculated.current) return;
@ -53,7 +65,7 @@ export const FContainer = forwardRef<View, FContainerProps>((props, ref) => {
};
return (
<View
<Animated.View
ref={ref}
onLayout={onLayout}
style={[
@ -61,6 +73,7 @@ export const FContainer = forwardRef<View, FContainerProps>((props, ref) => {
props.inline ? cStyles.rootInline : cStyles.rootAbsolute,
bottomInsets,
newWidth ? cStyles.rootPost : cStyles.rootPre,
{ transform: [{ translateY: slideAnimation }] },
]}
>
{newWidth
@ -82,7 +95,7 @@ export const FContainer = forwardRef<View, FContainerProps>((props, ref) => {
});
})
: props.children}
</View>
</Animated.View>
);
});

11
components/StyledButton.tsx
View File

@ -11,12 +11,7 @@ interface StyledButtonProps {
buttonStyle?: keyof typeof StyledButtonType;
}
const StyledButton: FC<StyledButtonProps> = ({
onPress,
text,
disabled = false,
buttonStyle = StyledButtonType.default
}) => {
const StyledButton: FC<StyledButtonProps> = ({ onPress, text, disabled = false, buttonStyle = StyledButtonType.default }) => {
const { colors } = useTheme();
const stylesHook = StyleSheet.create({
buttonGrey: {
@ -26,8 +21,8 @@ const StyledButton: FC<StyledButtonProps> = ({
color: colors.buttonTextColor,
},
container: {
opacity: disabled ? 0.5 : 1.0
}
opacity: disabled ? 0.5 : 1.0,
},
});
const textStyles = () => {
if (buttonStyle === StyledButtonType.grey) {