react-native-slot-text 2.2.0 → 2.2.2

package/AnimatedNumbers.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, Fragment, useLayoutEffect, useCallback } from "react";
+import { useState, useRef, Fragment, useLayoutEffect, useCallback, useEffect } from "react";
 import { View, Text } from "react-native";
 import { useSharedValue } from 'react-native-reanimated';
 import styles from './styles';
@@ -28,13 +28,12 @@ const AnimatedNumbers = (props) => {
     // [number, number]: animating slot
     const idRef = useRef(`slots-${Math.random().toString(36).substring(7)}`);
     // Indexes of slots that have finished animating
-    const slotsTrashBin = useSharedValue([]);
     const queuedNumber = useSharedValue(null);
     const [slots, setSlots] = useState([]);
     const [commaPositions, setCommaPositions] = useState([]);
     const [commaWidth, setCommaWidth] = useState(0);
     const [sizesMeasured, setSizesMeasured] = useState(false);
-    const [keys, setKeys] = useState(Array.from({ length: props.value.toString().length }).map((_, i) => i));
+    const [keys, setKeys] = useState(Array.from({ length: props.value.toString().length }).map((_, i) => Math.random().toString(36).substring(2, 9)));
     const [slotHeight, setSlotHeight] = useState(0);
     const [charSizes, setCharSizes] = useState(Array.from({ length: 10 }).map((_, i) => 0));
     useLayoutEffect(() => {
@@ -48,7 +47,15 @@ const AnimatedNumbers = (props) => {
                 setCommaPositions(newCommaPositions);
             }
             const newSlots = getNewSlots(props.value, slots, parseFromLeft);
-            setKeys(Array.from({ length: newSlots.length }).map((_, i) => i));
+            setKeys(prev => prev.length > newSlots.length
+                ? newSlots[0]?.[1] === null
+                    ? prev.slice(-1 * prev.length - newSlots.length)
+                    : prev.slice(0, newSlots.length)
+                : prev.length < newSlots.length
+                    ? newSlots[0]?.[0] === null
+                        ? Array.from({ length: newSlots.length - prev.length }).map((_, i) => Math.random().toString(36).substring(2, 9)).concat(prev)
+                        : prev.concat(Array.from({ length: newSlots.length - prev.length }).map((_, i) => Math.random().toString(36).substring(2, 9)))
+                    : prev);
             setSlots(newSlots);
         }
     }, [props.value]);
@@ -61,15 +68,10 @@ const AnimatedNumbers = (props) => {
             .map(c => c === -1 ? null : c === 1 ? 0 : c)
             .slice(slots[0]?.[1] === null ? numberOfSlotsRemoved : 0) // Trim from left
             .slice(0, slots[slots.length - 1]?.[1] === null ? -1 * numberOfSlotsRemoved : undefined); // Trim from right
-        if (cleanedSlots.length < slots.length) {
-            setKeys(prev => prev.slice(-1 * cleanedSlots.length));
-        }
-        else {
-            setKeys(Array.from({ length: cleanedSlots.length }).map((_, i) => i));
-        }
-        setSlots(cleanedSlots);
-        setCommaPositions(cleanedCommas);
-        slotsTrashBin.value = [];
+        setTimeout(() => {
+            setSlots(cleanedSlots);
+            setCommaPositions(cleanedCommas);
+        }, 0);
     }, [slots, commaPositions]);
     return (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.slotsContainer, children: [props.prefix && (_jsx(Text, { style: props.fontStyle, children: props.prefix })), slots.map((slot, i) => {
                         const callback = i === slots.findIndex(s => s.length > 1) ? onCompleted : undefined;
@@ -90,24 +92,4 @@ const AnimatedNumbers = (props) => {
                         }
                     }, children: i === 10 ? ',' : i }, `slot-${i}`) }, `measure-slot-${i}`)))] }));
 };
-/*
-Basic logic:
-
-When a new value comes in:
-
-1. If there is an animation currently in progress then queue the new value with any prefix prepended
-
-2. For an animation cycle, split the new number and set the new number state
-
-3. Loop through the new number and old number and compare digits, determing which way the new numbers
-and old numers need to animate. There are two versions of the number, one that's visible, and one outside
-the visible clipping container. If a slot has the same number between the old and new nummer, it wont be animated.
-
-4. Set the new positions wich will trigger the animations of the slots
-
-5. At the end, clear the new number and set the old number to the new number
-
-6. Pop any queued values and set the formated value, which will retriger the animation cycle
-
-*/
 export default AnimatedNumbers;

package/Slot.js

@@ -4,9 +4,8 @@ import { View } from 'react-native';
 import { Text } from 'react-native';
 import Animated, { useSharedValue, withTiming, withSequence, useAnimatedStyle, interpolate, runOnJS, Easing } from 'react-native-reanimated';
 import styles from './styles';
+const easing = Easing.bezier(0.22, 0.48, 0.25, 1.02);
 const Slot = (props) => {
-    const [value1, setValue1] = useState();
-    const [value2, setValue2] = useState();
     const margin = useSharedValue(0);
     const y = useSharedValue(0);
     const incomingY = useSharedValue(0);
@@ -26,7 +25,7 @@ const Slot = (props) => {
         }
         // Removing slot
         else if (incomingValue === null) {
-            y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing: Easing.ease }, () => {
+            y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing }, () => {
                 props.onCompleted && runOnJS(props.onCompleted)();
             });
             margin.value = withTiming(-1 * props.charSizes[currentValue], { duration: props.animationDuration / 2 });
@@ -34,7 +33,7 @@ const Slot = (props) => {
         // Adding slot
         else if (currentValue === null) {
             margin.value = withTiming(props.charSizes[incomingValue], { duration: props.animationDuration / 2 });
-            incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0 }), withTiming(0, { duration: props.animationDuration, easing: Easing.ease }, () => {
+            incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0 }), withTiming(0, { duration: props.animationDuration, easing }, () => {
                 props.onCompleted && runOnJS(props.onCompleted)();
             }));
         }
@@ -42,21 +41,19 @@ const Slot = (props) => {
         else {
             margin.value = withTiming((props.charSizes[incomingValue] - props.charSizes[currentValue]), { duration: props.animationDuration / 2 });
             if (incomingValue > currentValue) {
-                y.value = withTiming(props.height, { duration: props.animationDuration, easing: Easing.ease });
-                incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0, easing: Easing.ease }), withTiming(0, { duration: props.animationDuration }, () => { props.onCompleted && runOnJS(props.onCompleted)(); }));
+                y.value = withTiming(props.height, { duration: props.animationDuration, easing });
+                incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0, easing }), withTiming(0, { duration: props.animationDuration }, () => {
+                    props.onCompleted && runOnJS(props.onCompleted)();
+                }));
             }
             else if (incomingValue < currentValue) {
-                y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing: Easing.ease });
-                incomingY.value = withSequence(withTiming(1 * props.height, { duration: 0, easing: Easing.ease }), withTiming(0, { duration: props.animationDuration }, () => { props.onCompleted && runOnJS(props.onCompleted)(); }));
+                y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing });
+                incomingY.value = withSequence(withTiming(1 * props.height, { duration: 0, easing }), withTiming(0, { duration: props.animationDuration }, () => {
+                    props.onCompleted && runOnJS(props.onCompleted)();
+                }));
             }
         }
     }, [props.slot]);
-    useLayoutEffect(() => {
-        if (props.slot) {
-            setValue1(props.slot[0]);
-            setValue2(props.slot[1]);
-        }
-    }, [props.slot]);
     useLayoutEffect(() => {
         if (props.commaPositions?.[props.index] === 1) {
             commaScale.value = withTiming(1, { duration: props.animationDuration });
@@ -106,8 +103,8 @@ const Slot = (props) => {
     const currentTextStyle = useAnimatedStyle(() => ({
         transform: [{ rotateX: `${interpolate(y.value, [-1 * props.height / 2, 0, props.height / 2], [90, 0, -90])}deg` }]
     }));
-    return (_jsxs(View, { style: styles.slotContainer, children: [_jsx(Animated.View, { style: currentStyle, children: Number.isFinite(value1) &&
-                    _jsx(Animated.Text, { style: [props.fontStyle, currentTextStyle], children: value1 }) }), _jsx(Animated.View, { style: incomingStyle, children: Number.isFinite(value2) &&
-                    _jsx(Animated.Text, { style: [props.fontStyle, incomingTextStyle], children: value2 }) }), _jsx(Text, { style: styles.hiddenSlot, children: "1" }), _jsx(Animated.View, { style: commaStyle, children: _jsx(Text, { style: props.fontStyle, children: "," }) })] }));
+    return (_jsxs(View, { style: styles.slotContainer, children: [_jsx(Animated.View, { style: currentStyle, children: Number.isFinite(props.slot[0]) &&
+                    _jsx(Animated.Text, { style: [props.fontStyle, currentTextStyle], children: props.slot[0] }) }), _jsx(Animated.View, { style: incomingStyle, children: Number.isFinite(props.slot[1]) &&
+                    _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: "," }) })] }));
 };
 export default Slot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-slot-text",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "author": "sc-mitton <scm.mitton@gmail.com> (https://github.com/sc-mitton)",
   "main": "index.js",
   "module": "index.ts",