react-native-slot-text 1.0.8 → 2.0.1

package/AnimatedNumbers.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useRef, useCallback, Fragment } from "react";
-import { View, Text, Animated } from "react-native";
-import ReAnimated, { ZoomIn, StretchOutX } from 'react-native-reanimated';
+import { useState, useRef, Fragment, useLayoutEffect, useCallback } from "react";
+import { View, Text } from "react-native";
+import { useSharedValue } from 'react-native-reanimated';
 import styles from './styles';
 import Slot from './Slot';
-import { formatString } from "./helpers";
+import { getNewSlots, getNewCommaPositions } from './helpers';
 const DEFAULT_DURATION = 200;
 /**
  * AnimatedNumbers Component
@@ -22,108 +22,73 @@ const DEFAULT_DURATION = 200;
  * @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)}`);
-    const [state, setState] = useState('idle');
-    const [oldNumber, setOldNumber] = useState([]);
-    const [newNumber, setNewNumber] = useState([]);
-    const [animatingValue, setAnimatingValue] = useState();
-    // The initial positions of the slots that are animating in
-    // -1 indicates above the slot, 0 indicates the slot, 1 indicates below the slot
-    const [inZeroPositions, setInZeroPositions] = useState([]);
-    // The final positions of the slots animating out
-    const [outFinalPositions, setOutFinalPositions] = useState([]);
-    const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-    const containerWidth = useRef(new Animated.Value(0)).current;
-    const containerHeight = useRef(new Animated.Value(0)).current;
-    const measureRef = useRef(null);
-    useEffect(() => {
-        setOldNumber(`${props.prefix || ''}${props.value}`
-            .split('')
-            .map((val, i) => isNaN(val) ? val : parseInt(val)));
-    }, []);
-    useEffect(() => {
-        // Animation is in progress, queue the new value
-        if (state === 'idle' && oldNumber.join('') !== formatString(props.value, props.prefix)) {
-            setAnimatingValue(formatString(props.value, props.prefix));
+    // 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 [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;
         }
-    }, [props.value, state]);
-    useEffect(() => {
-        if (!animatingValue)
-            return;
-        setState('animating');
-        // If the old number is not set, this means it's the initial rendering of this component
-        // and the value needs to be loaded
-        if (oldNumber?.length === 0) {
-            setOldNumber(animatingValue
-                .split('')
-                .map((val, i) => isNaN(val) ? val : parseInt(val)));
-        }
-        // Prepare the new number for animation
         else {
-            setNewNumber(animatingValue
-                .split('')
-                .map((val, i) => isNaN(val) ? val : parseInt(val)));
-            // The positions of the slots that are animating in
-            let newValuePositions = Array(animatingValue.length).fill(0);
-            // Compare from the right to the left
-            // * If the slots are the same value, no animation is needed for the slot, just stick it in the -1 position
-            // * If one of the slots is a string, the new slot will move down
-            // * If the new slot is greater than the old slot, the new slot will move down
-            // or up depending on which is greater
-            for (let i = 0; i < newValuePositions.length; i++) {
-                const oldNum = oldNumber[i];
-                const newNum = isNaN(animatingValue.charAt(i))
-                    ? animatingValue.charAt(i)
-                    : parseInt(animatingValue.charAt(i));
-                if (oldNum === newNum) {
-                    newValuePositions[i] = undefined;
-                }
-                else {
-                    newValuePositions[i] = typeof oldNum === 'string' || typeof newNum === 'string'
-                        ? -1
-                        : oldNum === undefined ? -1 : newNum > oldNum ? -1 : 1;
-                }
+            const parseFromLeft = props.value.toString()[0] === slots[0]?.[0]?.toString();
+            if (props.includeComma) {
+                const newCommaPositions = getNewCommaPositions(props.value.toString(), commaPositions, parseFromLeft);
+                setCommaPositions(newCommaPositions);
             }
-            setInZeroPositions(newValuePositions);
-            setOutFinalPositions([
-                ...newValuePositions.slice(0, oldNumber.length).map(val => val ? val * -1 : 0),
-                ...Array(Math.max(0, oldNumber.length - animatingValue.length)).fill(-1)
-            ]);
+            const newSlots = getNewSlots(props.value, slots, parseFromLeft);
+            setKeys(Array.from({ length: newSlots.length }).map((_, i) => i));
+            setSlots(newSlots);
         }
-    }, [animatingValue]);
-    const onMeasureLayout = useCallback((e) => {
-        if (containerSize.width === 0) {
-            containerWidth.setValue(e.nativeEvent.layout.width);
-            containerHeight.setValue(e.nativeEvent.layout.height);
+    }, [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
+        if (cleanedSlots.length < slots.length) {
+            setKeys(prev => prev.slice(-1 * cleanedSlots.length));
         }
         else {
-            Animated.timing(containerWidth, {
-                toValue: e.nativeEvent.layout.width,
-                useNativeDriver: false,
-                duration: containerSize.width > e.nativeEvent.layout.width ? props.animationDuration || DEFAULT_DURATION : 0
-            }).start();
-            Animated.timing(containerHeight, {
-                toValue: e.nativeEvent.layout.height,
-                duration: 100,
-                useNativeDriver: false
-            }).start();
+            setKeys(Array.from({ length: cleanedSlots.length }).map((_, i) => i));
         }
-        setContainerSize(e.nativeEvent.layout);
-    }, []);
-    const onCompleted = useCallback(() => {
-        setOldNumber(newNumber);
-        setNewNumber([]);
-        setInZeroPositions([]);
-        setOutFinalPositions([]);
-        setState('idle');
-    }, [newNumber]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Animated.View, { style: [
-                    { width: containerWidth, height: containerHeight },
-                    styles.animatedNumbers
-                ], children: [_jsx(View, { style: styles.slotsContainer, children: oldNumber.map((val, i) => (_jsxs(Fragment, { children: [(oldNumber.length - i) % 3 === 0 && i > 1 && props.includeComma &&
-                                    _jsx(ReAnimated.View, { entering: ZoomIn.duration((props.animationDuration || DEFAULT_DURATION) / 2).withInitialValues({ opacity: 0 }), exiting: StretchOutX.withInitialValues({ opacity: 1 }).duration(props.animationDuration || DEFAULT_DURATION), children: _jsx(Text, { style: props.fontStyle, children: "," }) }, `${idRef}-comma-${i}-old`), _jsx(Slot, { value: val, height: containerSize.height, initial: 0, final: outFinalPositions[i] || 0, animationDuration: props.animationDuration || DEFAULT_DURATION, fontStyle: props.fontStyle }, `${idRef}-${val}-${i}-old`)] }, `${idRef}-slot-${i}`))) }), _jsx(View, { style: styles.slotsContainer, children: newNumber.map((val, i) => (_jsxs(Fragment, { children: [(newNumber.length - i) % 3 === 0 && i > 1 && props.includeComma &&
-                                    _jsx(ReAnimated.View, { entering: ZoomIn.duration((props.animationDuration || DEFAULT_DURATION) / 2), exiting: StretchOutX.withInitialValues({ opacity: 1 }).duration(props.animationDuration || DEFAULT_DURATION), style: styles.hiddenComma, children: _jsx(Text, { style: props.fontStyle, children: "," }) }), _jsx(Slot, { value: val, initial: inZeroPositions[i] || -1, final: inZeroPositions[i] ? 0 : -1, height: containerSize.height, animationDuration: props.animationDuration || DEFAULT_DURATION, fontStyle: props.fontStyle, onCompleted: onCompleted })] }, `${idRef}-${val}-${i}-new`))) })] }), newNumber.length > 0 &&
-                _jsxs(View, { onLayout: onMeasureLayout, style: styles.spacer, ref: measureRef, children: [props.prefix && _jsx(Text, { style: props.fontStyle, children: props.prefix }), newNumber.map((val, i) => (_jsx(Text, { style: props.fontStyle, children: val }, `${val}-${i}`)))] })] }));
+        setSlots(cleanedSlots);
+        setCommaPositions(cleanedCommas);
+        slotsTrashBin.value = [];
+    }, [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);
+                        }
+                        else {
+                            const charSize = e.nativeEvent.layout.width;
+                            setCharSizes(prev => {
+                                const newSizes = [...prev];
+                                newSizes[i] = charSize;
+                                return newSizes;
+                            });
+                            setSizesMeasured(true);
+                        }
+                    }, children: i === 10 ? ',' : i }, `slot-${i}`) }, `measure-slot-${i}`)))] }));
 };
 /*
 Basic logic:

package/Slot.js

@@ -1,27 +1,113 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
-import { Text, Animated } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from 'react';
+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 Slot = (props) => {
-    const Y = useRef(new Animated.Value(props.initial * props.height));
-    useEffect(() => {
-        if (props.final !== undefined) {
-            Animated.timing(Y.current, {
-                toValue: props.final * props.height,
-                duration: props.animationDuration,
-                useNativeDriver: true
-            }).start(() => {
-                if (props.onCompleted) {
-                    props.onCompleted();
-                }
+    const [value1, setValue1] = useState();
+    const [value2, setValue2] = useState();
+    const margin = useSharedValue(0);
+    const y = useSharedValue(0);
+    const incomingY = useSharedValue(0);
+    const commaScale = useSharedValue(0);
+    const commaWidth = useSharedValue(0);
+    // React to slot value changes
+    useLayoutEffect(() => {
+        if (!props.slot) {
+            return;
+        }
+        const incomingValue = props.slot[1];
+        const currentValue = props.slot[0];
+        if (incomingValue === undefined) {
+            y.value = 0;
+            incomingY.value = props.height;
+            margin.value = 0;
+        }
+        // Removing slot
+        else if (incomingValue === null) {
+            y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing: Easing.ease }, () => {
+                props.onCompleted && runOnJS(props.onCompleted)();
             });
+            margin.value = withTiming(-1 * props.charSizes[currentValue], { duration: props.animationDuration / 2 });
+        }
+        // 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 }, () => {
+                props.onCompleted && runOnJS(props.onCompleted)();
+            }));
+        }
+        // Animating slot
+        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)(); }));
+            }
+            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)(); }));
+            }
+        }
+    }, [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 });
+            commaWidth.value = withSequence(withTiming(0, { duration: 0 }), withTiming(props.commaWidth, { duration: props.animationDuration }));
+        }
+        else if (props.commaPositions?.[props.index] === -1) {
+            commaScale.value = withSequence(withTiming(1, { duration: 0 }), withTiming(0, { duration: props.animationDuration }));
+            const timeout = setTimeout(() => {
+                commaWidth.value = withTiming(0, { duration: props.animationDuration });
+            }, 0);
+            return () => clearTimeout(timeout);
+        }
+        else if (props.commaPositions?.[props.index] === 0) {
+            commaScale.value = 1;
+            commaWidth.value = props.commaWidth;
+        }
+        else {
+            commaScale.value = 0;
+            commaWidth.value = 0;
         }
-    }, [props.final]);
-    return (_jsx(Animated.View, { style: [{
-                transform: [{ translateY: Y.current }],
-                opacity: Y.current.interpolate({
-                    inputRange: [-1 * props.height, 0, props.height],
-                    outputRange: [0, 1, 0]
-                })
-            }], children: _jsx(Text, { style: props.fontStyle, children: props.value }) }));
+    }, [props.commaPositions, props.commaWidth]);
+    const commaStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: commaScale.value }],
+        width: commaWidth.value
+    }));
+    const currentStyle = useAnimatedStyle(() => ({
+        transform: [
+            { translateY: y.value },
+            { scale: interpolate(y.value, [-1 * props.height, 0, props.height], [0, 1, 0]) }
+        ],
+        marginRight: margin.value,
+        opacity: interpolate(y.value, [-1 * Math.pow(props.height, .95), 0, Math.pow(props.height, .95)], [0, 1, 0]),
+    }));
+    const incomingStyle = useAnimatedStyle(() => {
+        return ({
+            transform: [
+                { translateY: incomingY.value },
+                { scale: interpolate(incomingY.value, [-1 * props.height, 0, props.height], [0, 1, 0]) },
+            ],
+            opacity: interpolate(incomingY.value, [-1 * Math.pow(props.height, .95), 0, Math.pow(props.height, .95)], [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` }]
+    }));
+    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: "," }) })] }));
 };
 export default Slot;

package/helpers.d.ts

@@ -1 +1,3 @@
-export declare const formatString: (v: string, p?: string) => string;
+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[];

package/helpers.js

@@ -1 +1,78 @@
-export const formatString = (v, p) => `${p || ''}${v}`;
+export const getNewSlots = (newValue, currentSlots, parseFromLeft) => {
+    const iterLength = Math.max(newValue.toString().length, currentSlots.length);
+    const shiftCurrent = parseFromLeft
+        ? 0
+        : newValue.toString().length > currentSlots.length ? currentSlots.length - newValue.toString().length : 0;
+    const shiftIncoming = parseFromLeft
+        ? 0
+        : currentSlots.length > newValue.toString().length ? newValue.toString().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]);
+        const currentSlotValue = currentSlots[i + shiftCurrent]?.[0];
+        // First pass through, just set the slots since shared slots is empty
+        if (currentSlots.length === 0) {
+            return newSlots[i] = [newValueParsed];
+        }
+        // Removing slot
+        if (isNaN(newValueParsed)) {
+            newSlots[i] = [currentSlotValue, null];
+        }
+        // Adding slot
+        else if (currentSlotValue === undefined || currentSlotValue === null) {
+            newSlots[i] = [null, newValueParsed];
+        }
+        // Animating slot
+        else if (currentSlotValue !== newValueParsed) {
+            newSlots[i] = [currentSlotValue, newValueParsed];
+        }
+        // Static slot
+        else {
+            newSlots[i] = [newValueParsed];
+        }
+    });
+    return newSlots;
+};
+// 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) => {
+    const parseLength = Math.max(newValue.length, currentCommaPositions.length);
+    // On first render, no size change
+    const sizeChange = currentCommaPositions.length === 0
+        ? 0
+        : newValue.length - currentCommaPositions.length;
+    const windowSize = sizeChange > 0 ? parseLength : parseLength + sizeChange;
+    const newCommaPositions = Array.from({ length: parseLength }, (_, i) => null);
+    // Copy over the current comma positions
+    currentCommaPositions.forEach((c, i) => {
+        if (parseFromLeft || sizeChange < 0) {
+            newCommaPositions[i] = c;
+        }
+        else {
+            newCommaPositions[i + sizeChange] = c;
+        }
+    });
+    for (let i = 0; i < parseLength; i++) {
+        const index = parseFromLeft ? i : parseLength - i - 1;
+        const windowIndex = parseFromLeft ? i : windowSize - i - 1;
+        const isCommaIndex = (windowSize - windowIndex - 1) % 3 === 0 && (windowSize - windowIndex - 1) !== 0;
+        const outSizeVisibleWindow = parseFromLeft
+            ? index > windowSize - 1
+            : index < parseLength - windowSize;
+        // If in the section that's being removed, animate out all commmas
+        if (outSizeVisibleWindow && currentCommaPositions.length > 0) {
+            newCommaPositions[index] = Number.isFinite(newCommaPositions[index]) ? -1 : null;
+        }
+        // If is a comma index
+        else if (isCommaIndex) {
+            newCommaPositions[index] = Number.isFinite(newCommaPositions[index])
+                ? 0
+                : currentCommaPositions.length === 0 ? 0 : 1;
+        }
+        // Animate out since the comma doesn't match the new value's comma positions
+        else if (Number.isFinite(newCommaPositions[index])) {
+            newCommaPositions[index] = -1;
+        }
+    }
+    return newCommaPositions;
+};

package/package.json

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

package/styles.d.ts

@@ -1,18 +1,17 @@
 declare const styles: {
-    animatedNumbers: {
-        overflow: "hidden";
-    };
     spacer: {
-        position: "absolute";
-        flexDirection: "row";
-        opacity: number;
+        width: number;
     };
     slotsContainer: {
-        position: "absolute";
         flexDirection: "row";
         justifyContent: "center";
     };
-    hiddenComma: {
+    slotContainer: {
+        flexDirection: "row";
+        alignItems: "flex-end";
+    };
+    hiddenSlot: {
+        position: "absolute";
         opacity: number;
     };
 };

package/styles.js

@@ -1,19 +1,18 @@
 import { StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
-    animatedNumbers: {
-        overflow: 'hidden',
-    },
     spacer: {
-        position: 'absolute',
-        flexDirection: 'row',
-        opacity: 0,
+        width: 0,
     },
     slotsContainer: {
-        position: 'absolute',
         flexDirection: 'row',
         justifyContent: 'center',
     },
-    hiddenComma: {
+    slotContainer: {
+        flexDirection: 'row',
+        alignItems: 'flex-end'
+    },
+    hiddenSlot: {
+        position: 'absolute',
         opacity: 0,
     }
 });

package/types.d.ts

@@ -1,17 +1,30 @@
 import type { StyleProp, TextStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 export type Position = -1 | 0 | 1;
+export type SlotValue = [number] | [number | null, number | null];
 export interface SlotProps {
-    value: number | string;
+    slot: SlotValue;
+    index: number;
     animationDuration: number;
     fontStyle?: StyleProp<TextStyle>;
-    initial: Position;
-    final: Position;
-    height: number;
-    isNew?: boolean;
+    commaWidth: number;
     onCompleted?: () => void;
+    commaPositions?: CommaPosition[];
+    charSizes: number[];
+    height: number;
+}
+export type CommaPosition = 1 | -1 | 0 | null;
+export interface CommaProps {
+    isEntering: boolean;
+    isExiting: boolean;
+    width: SharedValue<number>;
+    animationDuration: number;
+    fontStyle?: StyleProp<TextStyle>;
+    onExited: () => void;
+    onEntered: () => void;
 }
 export interface AnimatedNumbersProps {
-    value: `${number}`;
+    value: number;
     fontStyle?: StyleProp<TextStyle>;
     animationDuration?: number;
     prefix?: string;

package/types.js

@@ -1 +1 @@
-import { Text } from 'react-native';
+export {};