react-native-slot-text 2.2.2 → 3.0.0

package/AnimatedNumbers.d.ts

@@ -8,9 +8,14 @@ import type { AnimatedNumbersProps } from './types';
  *
  * @param {number|string} props.value - The value to animate to. Can be string of numbers.
  * @param {Object} props.fontStyle - The style of the text, passed as a TextStyle object.
- * @param {number} [props.animationDuration=200] - The duration of the animation in milliseconds. Defaults to 200ms.
+ * @param {number} [props.animationDuration=400] - The duration of the animation in milliseconds. Defaults to 400ms.
+ * Only supported when animateIntermediateValues is false
  * @param {string} [props.prefix=""] - A prefix to the number, such as a currency symbol.
  * @param {boolean} [props.includeComma=false] - Whether to include commas as thousand separators.
+ * @param {true} [props.animateIntermediateValues=false] - Whether to animate all intermediate numbers between new value
+ * and current value of a slot. If the value is changing rapidly, this option is best. Otherwise the animations
+ * may glitch or act unexpectedly.
+ * @param {number} [props.precision] - Number of decimal places. e.g. value prop of 42069 with precision of 2 would become 420.69
  *
  * @returns {JSX.Element} The animated number component with slots for digits and commas.
  */

package/AnimatedNumbers.js

@@ -1,11 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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';
-import Slot from './Slot';
-import { getNewSlots, getNewCommaPositions } from './helpers';
-const DEFAULT_DURATION = 200;
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import ContinuousSlots from './ContinuousSlots';
+import Slots from './Slots';
 /**
  * AnimatedNumbers Component
  *
@@ -15,81 +11,40 @@ const DEFAULT_DURATION = 200;
  *
  * @param {number|string} props.value - The value to animate to. Can be string of numbers.
  * @param {Object} props.fontStyle - The style of the text, passed as a TextStyle object.
- * @param {number} [props.animationDuration=200] - The duration of the animation in milliseconds. Defaults to 200ms.
+ * @param {number} [props.animationDuration=400] - The duration of the animation in milliseconds. Defaults to 400ms.
+ * Only supported when animateIntermediateValues is false
  * @param {string} [props.prefix=""] - A prefix to the number, such as a currency symbol.
  * @param {boolean} [props.includeComma=false] - Whether to include commas as thousand separators.
+ * @param {true} [props.animateIntermediateValues=false] - Whether to animate all intermediate numbers between new value
+ * and current value of a slot. If the value is changing rapidly, this option is best. Otherwise the animations
+ * may glitch or act unexpectedly.
+ * @param {number} [props.precision] - Number of decimal places. e.g. value prop of 42069 with precision of 2 would become 420.69
  *
  * @returns {JSX.Element} The animated number component with slots for digits and commas.
  */
 const AnimatedNumbers = (props) => {
-    // [number] : static number
-    /// [number, null]: removing slot
-    // [null, number]: adding slot
-    // [number, number]: animating slot
-    const idRef = useRef(`slots-${Math.random().toString(36).substring(7)}`);
-    // Indexes of slots that have finished animating
-    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) => Math.random().toString(36).substring(2, 9)));
-    const [slotHeight, setSlotHeight] = useState(0);
-    const [charSizes, setCharSizes] = useState(Array.from({ length: 10 }).map((_, i) => 0));
-    useLayoutEffect(() => {
-        if (slots.some(s => s.length > 1)) {
-            queuedNumber.value = props.value;
-        }
-        else {
-            const parseFromLeft = props.value.toString()[0] === slots[0]?.[0]?.toString();
-            if (props.includeComma) {
-                const newCommaPositions = getNewCommaPositions(props.value.toString(), commaPositions, parseFromLeft);
-                setCommaPositions(newCommaPositions);
-            }
-            const newSlots = getNewSlots(props.value, slots, parseFromLeft);
-            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]);
-    const onCompleted = useCallback(() => {
-        const cleanedSlots = slots
-            .filter(s => (Number.isFinite(s[0]) && s[1] !== null) || Number.isFinite(s[1]))
-            .map(s => Number.isFinite(s[1]) ? [s[1]] : [s[0]]);
-        const numberOfSlotsRemoved = Math.max(slots.length - cleanedSlots.length, 0);
-        const cleanedCommas = commaPositions
-            .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
-        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;
-                        return (_jsx(Slot, { slot: slot, index: i, height: slotHeight, charSizes: charSizes, commaWidth: commaWidth, commaPositions: props.includeComma && commaPositions.length ? commaPositions : undefined, onCompleted: callback, animationDuration: (props.animationDuration || DEFAULT_DURATION), fontStyle: props.fontStyle }, `${idRef.current}-${keys[i]}`));
-                    }), _jsx(Text, { style: [styles.spacer, props.fontStyle], children: "1" })] }), !sizesMeasured && Array.from({ length: 10 }).concat(',').map((_, i) => (_jsx(Fragment, { children: _jsx(Text, { style: [styles.hiddenSlot, props.fontStyle], onLayout: (e) => {
-                        setSlotHeight(e.nativeEvent.layout.height);
-                        if (i === 10) {
-                            setCommaWidth(e.nativeEvent.layout.width);
-                            setSizesMeasured(true);
-                        }
-                        else {
-                            const charSize = e.nativeEvent.layout.width;
-                            setCharSizes(prev => {
-                                const newSizes = [...prev];
-                                newSizes[i] = charSize;
-                                return newSizes;
-                            });
-                        }
-                    }, children: i === 10 ? ',' : i }, `slot-${i}`) }, `measure-slot-${i}`)))] }));
+    return (_jsx(_Fragment, { children: props.animateIntermediateValues
+            ? _jsx(ContinuousSlots, { ...props })
+            : _jsx(Slots, { ...props }) }));
 };
+/*
+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/ContinuousSlot.d.ts

@@ -0,0 +1,3 @@
+import type { ContinuousSlotProps } from "./types";
+declare const ContinuousSlot: (props: ContinuousSlotProps) => import("react/jsx-runtime").JSX.Element;
+export default ContinuousSlot;

package/ContinuousSlot.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Text, StyleSheet, Animated, useAnimatedValue, Easing } from 'react-native';
+import MaskedView from "@react-native-masked-view/masked-view";
+import { easeGradient } from "react-native-easing-gradient";
+import ReAnimated, { LinearTransition, FadeOutDown, FadeInUp, useSharedValue, withTiming } from 'react-native-reanimated';
+import { LinearGradient } from "expo-linear-gradient";
+import styles from './styles';
+const GAP = 12;
+const PADDING_FRACTION = .25;
+const AnimatedMaskView = Animated.createAnimatedComponent(MaskedView);
+const ContinuousSlot = (props) => {
+    const config = {
+        useNativeDriver: true,
+        duration: props.animationDuration,
+        easing: Easing.bezier(0, .4, .4, .9)
+    };
+    const id = useRef(`rn-slottext-slot-${Math.random().toString(36).slice(0, 9)}`);
+    const width = useSharedValue(0);
+    const height = useSharedValue(0);
+    const y = useAnimatedValue(0);
+    const slotOpacity = useAnimatedValue(0);
+    const periodY = useAnimatedValue(0);
+    const commaY = useAnimatedValue(0);
+    const periodOpacity = useAnimatedValue(0);
+    const commaOpacity = useAnimatedValue(0);
+    const maskTop = useAnimatedValue(0);
+    const measuredHeight = useRef(0);
+    const [isMeasured, setIsMeasured] = useState(false);
+    useEffect(() => {
+        if (!isMeasured)
+            return;
+        const newWidth = props.charSizes[typeof props.slot[0] === 'number'
+            ? props.slot[0]
+            : props.slot[0] === ',' ? 10 : 11];
+        width.value = newWidth > width.value
+            ? newWidth // Growing
+            : withTiming(newWidth, { duration: props.animationDuration / 4 });
+        if (typeof props.slot[0] === 'number') {
+            Animated.timing(slotOpacity, { toValue: 1, ...config }).start();
+            Animated.timing(y, {
+                toValue: -1 * (((GAP + measuredHeight.current) * (9 - props.slot[0])) -
+                    (PADDING_FRACTION * measuredHeight.current)),
+                ...config
+            }).start();
+            Animated.timing(commaY, { toValue: 0, ...config }).start();
+            Animated.timing(periodY, { toValue: 0, ...config }).start();
+            Animated.timing(commaOpacity, { toValue: 0, ...config }).start();
+            Animated.timing(periodOpacity, { toValue: 0, ...config }).start();
+        }
+        else if (props.slot[0] === '.') {
+            Animated.timing(periodY, { toValue: (PADDING_FRACTION * measuredHeight.current), ...config }).start();
+            Animated.timing(periodOpacity, { toValue: 1, ...config }).start();
+            Animated.timing(slotOpacity, { toValue: 0, ...config }).start();
+            Animated.timing(commaY, { toValue: 0, ...config }).start();
+        }
+        else if (props.slot[0] === ',') {
+            Animated.timing(commaY, { toValue: (PADDING_FRACTION * measuredHeight.current), ...config }).start();
+            Animated.timing(commaOpacity, { toValue: 1, ...config }).start();
+            Animated.timing(periodY, { toValue: 1, ...config }).start();
+            Animated.timing(slotOpacity, { toValue: 0, ...config }).start();
+        }
+    }, [props.slot]);
+    // LINEAR GRADIENT
+    const { colors, locations } = easeGradient({
+        colorStops: {
+            0: { color: 'transparent' },
+            0.1: { color: 'black' },
+            .9: { color: 'black' },
+            1: { color: 'transparent' }
+        },
+    });
+    return (_jsx(ReAnimated.View, { layout: LinearTransition.duration(props.animationDuration / 4), entering: props.charSizes[0] ? FadeInUp.duration(props.animationDuration / 2) : undefined, exiting: FadeOutDown.duration(props.animationDuration / 2), children: isMeasured
+            ?
+                _jsx(ReAnimated.View, { style: { height, width }, children: _jsxs(AnimatedMaskView, { maskElement: _jsx(LinearGradient, { locations: locations, colors: colors, style: StyleSheet.absoluteFill }), style: [styles.mask, { top: maskTop, bottom: maskTop }], children: [_jsx(Animated.View, { style: {
+                                    position: 'absolute',
+                                    opacity: slotOpacity,
+                                    gap: GAP,
+                                    transform: [{ translateY: y }]
+                                }, children: Array.from({ length: 10 }, (_, i) => (9 - i))
+                                    .concat([',', '.'])
+                                    .map(i => (_jsx(Text, { style: props.fontStyle, children: i }, `${id}-${i}`))) }), _jsx(Animated.View, { style: {
+                                    opacity: commaOpacity,
+                                    transform: [{ translateY: commaY }],
+                                    position: 'absolute'
+                                }, children: _jsx(Text, { style: props.fontStyle, children: "," }) }), _jsx(Animated.View, { style: {
+                                    opacity: periodOpacity,
+                                    transform: [{ translateY: periodY }],
+                                    position: 'absolute'
+                                }, children: _jsx(Text, { style: props.fontStyle, children: "." }) })] }) })
+            :
+                _jsx(Text, { style: props.fontStyle, onLayout: ({ nativeEvent: ne }) => {
+                        width.value = ne.layout.width;
+                        height.value = ne.layout.height;
+                        maskTop.setValue(-1 * (PADDING_FRACTION * ne.layout.height));
+                        measuredHeight.current = ne.layout.height;
+                        if (typeof props.slot[0] === 'number') {
+                            y.setValue(-1 * (((GAP + ne.layout.height) * (9 - props.slot[0])) -
+                                (PADDING_FRACTION * ne.layout.height)));
+                            slotOpacity.setValue(1);
+                        }
+                        else if (props.slot[0] === ',') {
+                            commaY.setValue(PADDING_FRACTION * ne.layout.height);
+                            commaOpacity.setValue(1);
+                        }
+                        else if (props.slot[0] === '.') {
+                            periodY.setValue(PADDING_FRACTION * ne.layout.height);
+                            periodOpacity.setValue(1);
+                        }
+                        setIsMeasured(true);
+                    }, children: props.slot[0] }) }));
+};
+export default ContinuousSlot;

package/ContinuousSlots.d.ts

@@ -0,0 +1,3 @@
+import type { AnimatedNumbersProps } from './types';
+declare const ContinuousSlots: (props: AnimatedNumbersProps) => import("react/jsx-runtime").JSX.Element;
+export default ContinuousSlots;

package/ContinuousSlots.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useState, Fragment, useEffect } from 'react';
+import { Text, View } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+import ContinuousSlot from './ContinuousSlot';
+import styles from './styles';
+const DEFAULT_DURATION = 700;
+const ContinuousSlots = (props) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'decimal',
+        minimumFractionDigits: props.precision || 0,
+        maximumFractionDigits: props.precision || 0
+    });
+    const idRef = useRef(`rn-continuous-slot-${Math.random().toString(36).substring(7)}`);
+    // [value, key]
+    const [slots, setSlots] = useState(formatter.format(props.value).split('').map((v, i) => {
+        const slotValue = Number.isFinite(parseInt(v)) ? parseInt(v) : v;
+        return [
+            slotValue,
+            Math.random().toString(36).slice(0, 9)
+        ];
+    }));
+    const [charSizes, setCharSizes] = useState(Array.from({ length: 10 }).map((_, i) => 0));
+    const [sizesMeasured, setSizesMeasured] = useState(false);
+    useEffect(() => {
+        // Left parsing
+        // _ _ _ _ _ _ new val
+        // _ _ _       old val
+        // Right parsing
+        //       _ _ _ new val
+        // _ _ _ _ _ _ old val
+        const parseFromLeft = slots[0][0] === parseInt(props.value.toString()[0]);
+        const formatted = props.includeComma
+            ? formatter.format(props.value).split('')
+            : `${props.value}`.split('');
+        const parser = Array.from({ length: formatted.length }, (_, i) => parseFromLeft ? i : formatted.length - i - 1);
+        const newSlots = parser.map((index) => {
+            const slotValue = Number.isFinite(parseInt(formatted[index]))
+                ? parseInt(formatted[index])
+                : formatted[index];
+            const parseIndex = parseFromLeft
+                ? index
+                : index + (slots.length - formatted.length);
+            const keepKeySame = [
+                // Both numbers
+                Number.isFinite(parseInt(formatted[index])) && Number.isFinite(slots[parseIndex]?.[0]),
+                // Both comma or period
+                typeof slots[parseIndex]?.[0] === 'string' && !Number.isFinite(parseInt(formatted[index]))
+            ];
+            const slot = keepKeySame.some(Boolean)
+                ? [slotValue, slots[parseIndex][1]]
+                : [slotValue, Math.random().toString(36).slice(0, 9)];
+            return slot;
+        });
+        setSlots(parseFromLeft ? newSlots : newSlots.reverse());
+    }, [props.value]);
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.slotsContainer, children: [props.prefix && (_jsx(Animated.Text, { style: props.fontStyle, layout: LinearTransition, children: props.prefix })), slots.map((slot, i) => (_jsx(ContinuousSlot, { slot: slot, index: i, charSizes: charSizes, fontStyle: props.fontStyle, animationDuration: DEFAULT_DURATION }, `${idRef.current}-${slot[1]}`))), _jsx(Text, { style: [styles.spacer, props.fontStyle], children: "1" })] }), !sizesMeasured &&
+                Array.from({ length: 10 }, (_, i) => i)
+                    .concat([',', '.'])
+                    .map((char, i) => (_jsx(Fragment, { children: _jsx(Text, { style: [styles.hiddenSlot, props.fontStyle], onLayout: (e) => {
+                            const charSize = e.nativeEvent.layout.width;
+                            setCharSizes(prev => {
+                                const newSizes = [...prev];
+                                newSizes[i] = charSize;
+                                return newSizes;
+                            });
+                            if (char === '.') {
+                                setSizesMeasured(true);
+                            }
+                        }, children: char }) }, `rn-slots-measure-slot-${i}`)))] }));
+};
+export default ContinuousSlots;

package/README.md

@@ -10,10 +10,13 @@ This project was created using `bun init` in bun v1.1.21. [Bun](https://bun.sh)
 
 
 
-https://github.com/user-attachments/assets/192d168a-6497-4035-9c8e-b39b88dabf56
+https://github.com/user-attachments/assets/49671041-9481-4c04-b61d-6afdca74757d
 
 
 
+https://github.com/user-attachments/assets/9cea5bdb-032e-4e4a-8d32-f2fa58684d9d
+
+
 ## Usage
 
 ```
@@ -28,10 +31,11 @@ https://github.com/user-attachments/assets/192d168a-6497-4035-9c8e-b39b88dabf56
 
 ### Props
 
-| Prop                | Type                  | Default  | Description                                                                                      |
-|---------------------|-----------------------|----------|--------------------------------------------------------------------------------------------------|
-| `value`             | '${number}'  | `N/A`    | The value to animate to. Can be a number or a string of numbers.                                  |
-| `fontStyle`         | `Object`              | `N/A`    | The style of the text, passed as a `TextStyle` object.                                            |
-| `animationDuration`  | `number`              | `200`    | The duration of the animation in milliseconds. Defaults to 200ms.                                 |
-| `prefix`            | `string`              | `""`     | A prefix to the number, such as a currency symbol.                                                |
-| `includeComma`      | `boolean`             | `false`  | Whether to include commas as thousand separators.                                                 |
+| **Prop**                    | **Type**                | **Default** | **Description**                                                                                                                                   |
+|-----------------------------|-------------------------|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
+| `value`                    | `number` \| `string`    | **Required** | The value to animate to. Can be a number or a string of numeric characters.                                                                      |
+| `fontStyle`                | `Object` (TextStyle)    | **Required** | The style of the text, passed as a TextStyle object.                                                                                             |
+| `animationDuration`        | `number`               | `400`       | The duration of the animation in milliseconds. Only supported when `animateIntermediateValues` is `false`.                                       |
+| `prefix`                   | `string`               | `""`        | A prefix to the number, such as a currency symbol (e.g., `$` or `€`).                                                                            |
+| `includeComma`             | `boolean`              | `false`     | Whether to include commas as thousand separators.                                                                                                |
+| `animateIntermediateValues`| `boolean`              | `false`     | Whether to animate all intermediate numbers between the new value and the current value of a digit. Useful for rapidly changing values to prevent glitches in animation. |

package/Slot.js

@@ -4,7 +4,7 @@ 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 easing = Easing.bezier(0, 0.4, 0.4, .8);
 const Slot = (props) => {
     const margin = useSharedValue(0);
     const y = useSharedValue(0);
@@ -82,26 +82,26 @@ const Slot = (props) => {
     const currentStyle = useAnimatedStyle(() => ({
         transform: [
             { translateY: y.value },
-            { scale: interpolate(y.value, [-1 * props.height, 0, props.height], [0, 1, 0]) }
+            { scale: interpolate(y.value, [-1 * props.height, 0, props.height], [.25, 1, .25]) }
         ],
         marginRight: margin.value,
-        opacity: interpolate(y.value, [-1 * Math.pow(props.height, .95), 0, Math.pow(props.height, .95)], [0, 1, 0]),
+        opacity: interpolate(y.value, [-1 * props.height / 2, 0, 1 * props.height / 2], [0, 1, 0]),
     }));
     const incomingStyle = useAnimatedStyle(() => {
         return ({
             transform: [
                 { translateY: incomingY.value },
-                { scale: interpolate(incomingY.value, [-1 * props.height, 0, props.height], [0, 1, 0]) },
+                { scale: interpolate(incomingY.value, [-1 * props.height, 0, props.height], [.25, 1, .25]) },
             ],
-            opacity: interpolate(incomingY.value, [-1 * Math.pow(props.height, .95), 0, Math.pow(props.height, .95)], [0, 1, 0]),
+            opacity: interpolate(incomingY.value, [-1 * props.height / 2, 0, 1 * props.height / 2], [0, 1, 0]),
             position: 'absolute'
         });
     });
     const incomingTextStyle = useAnimatedStyle(() => ({
-        transform: [{ rotateX: `${interpolate(incomingY.value, [-1 * props.height / 2, 0, props.height / 2], [90, 0, -90])}deg` }]
+        transform: [{ rotateX: `${interpolate(incomingY.value, [-1 * props.height / 2, 0, props.height / 2], [45, 0, -45])}deg` }]
     }));
     const currentTextStyle = useAnimatedStyle(() => ({
-        transform: [{ rotateX: `${interpolate(y.value, [-1 * props.height / 2, 0, props.height / 2], [90, 0, -90])}deg` }]
+        transform: [{ rotateX: `${interpolate(y.value, [-1 * props.height / 2, 0, props.height / 2], [45, 0, -45])}deg` }]
     }));
     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]) &&

package/Slots.d.ts

@@ -0,0 +1,3 @@
+import type { AnimatedNumbersProps } from './types';
+declare const Slots: (props: AnimatedNumbersProps) => import("react/jsx-runtime").JSX.Element;
+export default Slots;

package/Slots.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useLayoutEffect, useCallback, Fragment, useRef } from 'react';
+import { View, Text } from 'react-native';
+import styles from './styles';
+import { getNewSlots, getNewCommaPositions } from './helpers';
+import Slot from './Slot';
+const DEFAULT_DURATION = 400;
+const Slots = (props) => {
+    const idRef = useRef(`slots-${Math.random().toString(36).substring(7)}`);
+    // [number] : static number
+    /// [number, null]: removing slot
+    // [null, number]: adding slot
+    // [number, number]: animating slot
+    const [slots, setSlots] = useState([]);
+    const [commaPositions, setCommaPositions] = useState([]);
+    const [commaWidth, setCommaWidth] = useState(0);
+    const [periodWidth, setPeriodWidth] = useState(0);
+    const [sizesMeasured, setSizesMeasured] = useState(false);
+    const [keys, setKeys] = useState(Array.from({ length: props.value.toString().replace('.', '').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(() => {
+        const stringValue = props.value.toString().replace('.', '');
+        if (props.animateIntermediateValues)
+            return;
+        const parseFromLeft = stringValue[0] === slots[0]?.[0]?.toString();
+        if (props.includeComma) {
+            const newCommaPositions = getNewCommaPositions(stringValue, commaPositions, parseFromLeft, props.precision);
+            setCommaPositions(newCommaPositions);
+        }
+        const newSlots = getNewSlots(stringValue, slots, parseFromLeft);
+        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]);
+    const onCompleted = useCallback(() => {
+        const cleanedSlots = slots
+            .filter(s => (Number.isFinite(s[0]) && s[1] !== null) || Number.isFinite(s[1]))
+            .map(s => Number.isFinite(s[1]) ? [s[1]] : [s[0]]);
+        const numberOfSlotsRemoved = Math.max(slots.length - cleanedSlots.length, 0);
+        const cleanedCommas = commaPositions
+            .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
+        setTimeout(() => {
+            setSlots(cleanedSlots);
+            setCommaPositions(cleanedCommas);
+        }, 200);
+    }, [slots, commaPositions]);
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.slotsContainer, children: [props.prefix && (_jsx(Text, { style: props.fontStyle, children: props.prefix })), _jsx(Text, { style: [styles.spacer, props.fontStyle], children: "1" }), slots.map((slot, i) => {
+                        const callback = i === slots.findIndex(s => s.length > 1) ? onCompleted : undefined;
+                        const animationDuration = "animationDuration" in props
+                            ? props.animationDuration || DEFAULT_DURATION
+                            : DEFAULT_DURATION;
+                        return (_jsxs(Fragment, { children: [_jsx(Slot, { slot: slot, index: i, height: slotHeight, charSizes: charSizes, commaWidth: commaWidth, periodWidth: periodWidth, commaPositions: props.includeComma && commaPositions.length ? commaPositions : undefined, onCompleted: callback, animationDuration: animationDuration, fontStyle: props.fontStyle }), (props.precision || 0) > 0 && props.precision === (slots.length - 1 - i) &&
+                                    _jsx(Text, { style: props.fontStyle, children: "." })] }, `${idRef.current}-${keys[i]}`));
+                    })] }), !sizesMeasured &&
+                Array.from({ length: 10 }, (_, i) => i)
+                    .concat([',', '.'])
+                    .map((char, i) => (_jsx(Fragment, { children: _jsx(Text, { style: [styles.hiddenSlot, props.fontStyle], onLayout: (e) => {
+                            if (i === 10) {
+                                setSlotHeight(e.nativeEvent.layout.height);
+                                setCommaWidth(e.nativeEvent.layout.width);
+                            }
+                            else if (i === 11) {
+                                setPeriodWidth(e.nativeEvent.layout.width);
+                                setSizesMeasured(true);
+                            }
+                            else {
+                                const charSize = e.nativeEvent.layout.width;
+                                setCharSizes(prev => {
+                                    const newSizes = [...prev];
+                                    newSizes[i] = charSize;
+                                    return newSizes;
+                                });
+                            }
+                        }, children: char }, `slot-${i}`) }, `measure-slot-${i}`)))] }));
+};
+export default Slots;

package/helpers.d.ts

@@ -1,3 +1,3 @@
 import type { SlotValue, CommaPosition } from "./types";
-export declare const getNewSlots: (newValue: number, currentSlots: SlotValue[], parseFromLeft: boolean) => SlotValue[];
-export declare const getNewCommaPositions: (newValue: string, currentCommaPositions: CommaPosition[], parseFromLeft: boolean) => CommaPosition[];
+export declare const getNewSlots: (newValue: string, currentSlots: SlotValue[], parseFromLeft: boolean) => SlotValue[];
+export declare const getNewCommaPositions: (newValue: string, currentCommaPositions: CommaPosition[], parseFromLeft: boolean, precision?: number) => CommaPosition[];

package/helpers.js

@@ -1,11 +1,11 @@
 export const getNewSlots = (newValue, currentSlots, parseFromLeft) => {
-    const iterLength = Math.max(newValue.toString().length, currentSlots.length);
+    const iterLength = Math.max(newValue.length, currentSlots.length);
     const shiftCurrent = parseFromLeft
         ? 0
-        : newValue.toString().length > currentSlots.length ? currentSlots.length - newValue.toString().length : 0;
+        : newValue.length > currentSlots.length ? currentSlots.length - newValue.length : 0;
     const shiftIncoming = parseFromLeft
         ? 0
-        : currentSlots.length > newValue.toString().length ? newValue.toString().length - currentSlots.length : 0;
+        : currentSlots.length > newValue.length ? newValue.length - currentSlots.length : 0;
     const newSlots = Array.from({ length: iterLength }, (_, i) => [i]);
     Array.from({ length: iterLength }, (_, i) => parseFromLeft ? i : iterLength - i - 1).forEach(i => {
         const newValueParsed = parseInt(`${newValue}`[i + shiftIncoming]);
@@ -35,7 +35,7 @@ export const getNewSlots = (newValue, currentSlots, parseFromLeft) => {
 };
 // Takes in a new value and spits out an array of comma positions
 // for all of the commas being added, removed, or staying the sameM
-export const getNewCommaPositions = (newValue, currentCommaPositions, parseFromLeft) => {
+export const getNewCommaPositions = (newValue, currentCommaPositions, parseFromLeft, precision) => {
     const parseLength = Math.max(newValue.length, currentCommaPositions.length);
     // On first render, no size change
     const sizeChange = currentCommaPositions.length === 0
@@ -74,5 +74,5 @@ export const getNewCommaPositions = (newValue, currentCommaPositions, parseFromL
             newCommaPositions[index] = -1;
         }
     }
-    return newCommaPositions;
+    return newCommaPositions.concat(Array.from({ length: precision || 0 }, () => null)).filter((_, i) => i >= (precision || 0));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-slot-text",
-  "version": "2.2.2",
+  "version": "3.0.0",
   "author": "sc-mitton <scm.mitton@gmail.com> (https://github.com/sc-mitton)",
   "main": "index.js",
   "module": "index.ts",
@@ -37,5 +37,10 @@
     "release": "tsx src/pre-release.ts && cd lib && npm publish --access public --no-git-checks"
   },
   "type": "module",
-  "types": "src/types.d.ts"
+  "types": "src/types.d.ts",
+  "dependencies": {
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "expo-linear-gradient": "^14.0.1",
+    "react-native-easing-gradient": "^1.1.1"
+  }
 }

package/styles.d.ts

@@ -14,5 +14,11 @@ declare const styles: {
         position: "absolute";
         opacity: number;
     };
+    mask: {
+        position: "absolute";
+        left: number;
+        right: number;
+        width: "100%";
+    };
 };
 export default styles;

package/styles.js

@@ -5,7 +5,7 @@ const styles = StyleSheet.create({
     },
     slotsContainer: {
         flexDirection: 'row',
-        justifyContent: 'center',
+        justifyContent: 'center'
     },
     slotContainer: {
         flexDirection: 'row',
@@ -13,7 +13,13 @@ const styles = StyleSheet.create({
     },
     hiddenSlot: {
         position: 'absolute',
-        opacity: 0,
+        opacity: 0
+    },
+    mask: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        width: '100%'
     }
 });
 export default styles;

package/types.d.ts

@@ -8,11 +8,16 @@ export interface SlotProps {
     animationDuration: number;
     fontStyle?: StyleProp<TextStyle>;
     commaWidth: number;
+    periodWidth: number;
     onCompleted?: () => void;
     commaPositions?: CommaPosition[];
     charSizes: number[];
     height: number;
 }
+type Shared = 'fontStyle' | 'index' | 'charSizes' | 'animationDuration';
+export interface ContinuousSlotProps extends Pick<SlotProps, Shared> {
+    slot: [number | string, string];
+}
 export type CommaPosition = 1 | -1 | 0 | null;
 export interface CommaProps {
     isEntering: boolean;
@@ -26,7 +31,10 @@ export interface CommaProps {
 export interface AnimatedNumbersProps {
     value: number;
     fontStyle?: StyleProp<TextStyle>;
-    animationDuration?: number;
     prefix?: string;
     includeComma?: boolean;
+    precision?: number;
+    animationDuration?: number;
+    animateIntermediateValues?: true;
 }
+export {};