react-native-slot-text 2.1.0 → 2.2.1

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;
@@ -78,6 +80,7 @@ const AnimatedNumbers = (props) => {
                         setSlotHeight(e.nativeEvent.layout.height);
                         if (i === 10) {
                             setCommaWidth(e.nativeEvent.layout.width);
+                            setSizesMeasured(true);
                         }
                         else {
                             const charSize = e.nativeEvent.layout.width;
@@ -86,28 +89,7 @@ const AnimatedNumbers = (props) => {
                                 newSizes[i] = charSize;
                                 return newSizes;
                             });
-                            setSizesMeasured(true);
                         }
                     }, 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

@@ -43,11 +43,15 @@ const Slot = (props) => {
             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)(); }));
+                incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0, easing: Easing.ease }), 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)(); }));
+                incomingY.value = withSequence(withTiming(1 * props.height, { duration: 0, easing: Easing.ease }), withTiming(0, { duration: props.animationDuration }, () => {
+                    props.onCompleted && runOnJS(props.onCompleted)();
+                }));
             }
         }
     }, [props.slot]);

package/package.json

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