react-native-slot-text 2.2.1 → 2.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Slot.js +16 -23
- package/package.json +1 -1
package/Slot.js
CHANGED
|
@@ -4,9 +4,8 @@ import { View } from 'react-native';
|
|
|
4
4
|
import { Text } from 'react-native';
|
|
5
5
|
import Animated, { useSharedValue, withTiming, withSequence, useAnimatedStyle, interpolate, runOnJS, Easing } from 'react-native-reanimated';
|
|
6
6
|
import styles from './styles';
|
|
7
|
+
const easing = Easing.bezier(0, 0.4, 0.4, .8);
|
|
7
8
|
const Slot = (props) => {
|
|
8
|
-
const [value1, setValue1] = useState();
|
|
9
|
-
const [value2, setValue2] = useState();
|
|
10
9
|
const margin = useSharedValue(0);
|
|
11
10
|
const y = useSharedValue(0);
|
|
12
11
|
const incomingY = useSharedValue(0);
|
|
@@ -26,7 +25,7 @@ const Slot = (props) => {
|
|
|
26
25
|
}
|
|
27
26
|
// Removing slot
|
|
28
27
|
else if (incomingValue === null) {
|
|
29
|
-
y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing
|
|
28
|
+
y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing }, () => {
|
|
30
29
|
props.onCompleted && runOnJS(props.onCompleted)();
|
|
31
30
|
});
|
|
32
31
|
margin.value = withTiming(-1 * props.charSizes[currentValue], { duration: props.animationDuration / 2 });
|
|
@@ -34,7 +33,7 @@ const Slot = (props) => {
|
|
|
34
33
|
// Adding slot
|
|
35
34
|
else if (currentValue === null) {
|
|
36
35
|
margin.value = withTiming(props.charSizes[incomingValue], { duration: props.animationDuration / 2 });
|
|
37
|
-
incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0 }), withTiming(0, { duration: props.animationDuration, easing
|
|
36
|
+
incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0 }), withTiming(0, { duration: props.animationDuration, easing }, () => {
|
|
38
37
|
props.onCompleted && runOnJS(props.onCompleted)();
|
|
39
38
|
}));
|
|
40
39
|
}
|
|
@@ -42,25 +41,19 @@ const Slot = (props) => {
|
|
|
42
41
|
else {
|
|
43
42
|
margin.value = withTiming((props.charSizes[incomingValue] - props.charSizes[currentValue]), { duration: props.animationDuration / 2 });
|
|
44
43
|
if (incomingValue > currentValue) {
|
|
45
|
-
y.value = withTiming(props.height, { duration: props.animationDuration, easing
|
|
46
|
-
incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0, easing
|
|
44
|
+
y.value = withTiming(props.height, { duration: props.animationDuration, easing });
|
|
45
|
+
incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0, easing }), withTiming(0, { duration: props.animationDuration }, () => {
|
|
47
46
|
props.onCompleted && runOnJS(props.onCompleted)();
|
|
48
47
|
}));
|
|
49
48
|
}
|
|
50
49
|
else if (incomingValue < currentValue) {
|
|
51
|
-
y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing
|
|
52
|
-
incomingY.value = withSequence(withTiming(1 * props.height, { duration: 0, easing
|
|
50
|
+
y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing });
|
|
51
|
+
incomingY.value = withSequence(withTiming(1 * props.height, { duration: 0, easing }), withTiming(0, { duration: props.animationDuration }, () => {
|
|
53
52
|
props.onCompleted && runOnJS(props.onCompleted)();
|
|
54
53
|
}));
|
|
55
54
|
}
|
|
56
55
|
}
|
|
57
56
|
}, [props.slot]);
|
|
58
|
-
useLayoutEffect(() => {
|
|
59
|
-
if (props.slot) {
|
|
60
|
-
setValue1(props.slot[0]);
|
|
61
|
-
setValue2(props.slot[1]);
|
|
62
|
-
}
|
|
63
|
-
}, [props.slot]);
|
|
64
57
|
useLayoutEffect(() => {
|
|
65
58
|
if (props.commaPositions?.[props.index] === 1) {
|
|
66
59
|
commaScale.value = withTiming(1, { duration: props.animationDuration });
|
|
@@ -89,29 +82,29 @@ const Slot = (props) => {
|
|
|
89
82
|
const currentStyle = useAnimatedStyle(() => ({
|
|
90
83
|
transform: [
|
|
91
84
|
{ translateY: y.value },
|
|
92
|
-
{ scale: interpolate(y.value, [-1 * props.height, 0, props.height], [
|
|
85
|
+
{ scale: interpolate(y.value, [-1 * props.height, 0, props.height], [.25, 1, .25]) }
|
|
93
86
|
],
|
|
94
87
|
marginRight: margin.value,
|
|
95
|
-
opacity: interpolate(y.value, [-1 *
|
|
88
|
+
opacity: interpolate(y.value, [-1 * props.height / 2, 0, 1 * props.height / 2], [0, 1, 0]),
|
|
96
89
|
}));
|
|
97
90
|
const incomingStyle = useAnimatedStyle(() => {
|
|
98
91
|
return ({
|
|
99
92
|
transform: [
|
|
100
93
|
{ translateY: incomingY.value },
|
|
101
|
-
{ scale: interpolate(incomingY.value, [-1 * props.height, 0, props.height], [
|
|
94
|
+
{ scale: interpolate(incomingY.value, [-1 * props.height, 0, props.height], [.25, 1, .25]) },
|
|
102
95
|
],
|
|
103
|
-
opacity: interpolate(incomingY.value, [-1 *
|
|
96
|
+
opacity: interpolate(incomingY.value, [-1 * props.height / 2, 0, 1 * props.height / 2], [0, 1, 0]),
|
|
104
97
|
position: 'absolute'
|
|
105
98
|
});
|
|
106
99
|
});
|
|
107
100
|
const incomingTextStyle = useAnimatedStyle(() => ({
|
|
108
|
-
transform: [{ rotateX: `${interpolate(incomingY.value, [-1 * props.height / 2, 0, props.height / 2], [
|
|
101
|
+
transform: [{ rotateX: `${interpolate(incomingY.value, [-1 * props.height / 2, 0, props.height / 2], [45, 0, -45])}deg` }]
|
|
109
102
|
}));
|
|
110
103
|
const currentTextStyle = useAnimatedStyle(() => ({
|
|
111
|
-
transform: [{ rotateX: `${interpolate(y.value, [-1 * props.height / 2, 0, props.height / 2], [
|
|
104
|
+
transform: [{ rotateX: `${interpolate(y.value, [-1 * props.height / 2, 0, props.height / 2], [45, 0, -45])}deg` }]
|
|
112
105
|
}));
|
|
113
|
-
return (_jsxs(View, { style: styles.slotContainer, children: [_jsx(Animated.View, { style: currentStyle, children: Number.isFinite(
|
|
114
|
-
_jsx(Animated.Text, { style: [props.fontStyle, currentTextStyle], children:
|
|
115
|
-
_jsx(Animated.Text, { style: [props.fontStyle, incomingTextStyle], children:
|
|
106
|
+
return (_jsxs(View, { style: styles.slotContainer, children: [_jsx(Animated.View, { style: currentStyle, children: Number.isFinite(props.slot[0]) &&
|
|
107
|
+
_jsx(Animated.Text, { style: [props.fontStyle, currentTextStyle], children: props.slot[0] }) }), _jsx(Animated.View, { style: incomingStyle, children: Number.isFinite(props.slot[1]) &&
|
|
108
|
+
_jsx(Animated.Text, { style: [props.fontStyle, incomingTextStyle], children: props.slot[1] }) }), _jsx(Text, { style: styles.hiddenSlot, children: "1" }), _jsx(Animated.View, { style: commaStyle, children: _jsx(Text, { style: props.fontStyle, children: "," }) })] }));
|
|
116
109
|
};
|
|
117
110
|
export default Slot;
|