-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.tsx
79 lines (70 loc) · 1.64 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React, { useEffect } from 'react';
import type { FadeProps } from './Fade';
import Animated, {
Easing,
withTiming,
useSharedValue,
useAnimatedStyle,
} from 'react-native-reanimated';
function Fade(props: FadeProps) {
const { style, children, direction, visible, duration = 200 } = props;
function getInitialTranslationValue() {
if (direction === 'up') {
return -5;
} else if (direction === 'down') {
return 5;
} else {
return 0;
}
}
const opacityValue = useSharedValue(1);
const translationValue = useSharedValue(getInitialTranslationValue());
const opacityStyle = useAnimatedStyle(() => {
return {
opacity: withTiming(opacityValue.value, {
duration,
easing: Easing.linear,
}),
};
});
const translationStyle = useAnimatedStyle(() => {
return {
transform: [
{
translateY: withTiming(translationValue.value, {
duration,
easing: Easing.linear,
}),
},
],
};
});
useEffect(
function didUpdate() {
if (visible) {
opacityValue.value = 1;
} else {
opacityValue.value = 0;
}
if (direction) {
if (visible) {
translationValue.value = 0;
} else {
if (direction === 'up') {
translationValue.value = 5;
} else if (direction === 'down') {
translationValue.value = -5;
} else {
}
}
}
},
[visible]
);
return (
<Animated.View style={[opacityStyle, translationStyle, style]}>
{children}
</Animated.View>
);
}
export default Fade;