npm - react-native-slot-text - Versions diffs - 3.0.0 → 3.2.0 - Mend

react-native-slot-text 3.0.0 → 3.2.0

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.

Files changed (12) hide show

package/AnimatedNumbers.d.ts CHANGED Viewed

@@ -6,16 +6,22 @@ import type { AnimatedNumbersProps } from './types';
  * It supports animation of individual digits, optional commas, and a customizable prefix.
  * The animation occurs over a defined duration and can be repeated as the value changes.
  *
- * @param {number|string} props.value - The value to animate to. Can be string of numbers.
+ * @param {number} props.value - The value to animate to.
  * @param {Object} props.fontStyle - The style of the text, passed as a TextStyle object.
- * @param {number} [props.animationDuration=400] - The duration of the animation in milliseconds. Defaults to 400ms.
- * Only supported when animateIntermediateValues is false
+ * @param {number} [props.animationDuration=500] - The duration of the animation in milliseconds.
+ * Defaults to 500ms (700ms when also animating intermediate values) 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
+ * @param {number} [props.precision] - Number of decimal places. For example, a value prop of 42069 with precision of 2 would become 420.69.
+ * @param {boolean|Object} [props.spring=false] - Spring transition, can be used in place of easing for physics-based transitions.
+ * If true, a default spring configuration will be applied. If an object, it must include the following keys:
+ *   - {number} mass - The mass of the spring (affects how heavy it feels).
+ *   - {number} stiffness - The stiffness of the spring (affects how bouncy it feels).
+ *   - {number} damping - The damping of the spring (affects how quickly it slows down).
  *
  * @returns {JSX.Element} The animated number component with slots for digits and commas.
  */

package/AnimatedNumbers.js CHANGED Viewed

@@ -9,16 +9,22 @@ import Slots from './Slots';
  * It supports animation of individual digits, optional commas, and a customizable prefix.
  * The animation occurs over a defined duration and can be repeated as the value changes.
  *
- * @param {number|string} props.value - The value to animate to. Can be string of numbers.
+ * @param {number} props.value - The value to animate to.
  * @param {Object} props.fontStyle - The style of the text, passed as a TextStyle object.
- * @param {number} [props.animationDuration=400] - The duration of the animation in milliseconds. Defaults to 400ms.
- * Only supported when animateIntermediateValues is false
+ * @param {number} [props.animationDuration=500] - The duration of the animation in milliseconds.
+ * Defaults to 500ms (700ms when also animating intermediate values) 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
+ * @param {number} [props.precision] - Number of decimal places. For example, a value prop of 42069 with precision of 2 would become 420.69.
+ * @param {boolean|Object} [props.spring=false] - Spring transition, can be used in place of easing for physics-based transitions.
+ * If true, a default spring configuration will be applied. If an object, it must include the following keys:
+ *   - {number} mass - The mass of the spring (affects how heavy it feels).
+ *   - {number} stiffness - The stiffness of the spring (affects how bouncy it feels).
+ *   - {number} damping - The damping of the spring (affects how quickly it slows down).
  *
  * @returns {JSX.Element} The animated number component with slots for digits and commas.
  */

package/ContinuousSlot.js CHANGED Viewed

@@ -3,17 +3,36 @@ 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 ReAnimated, { LinearTransition, FadeOutDown, FadeInUp, useSharedValue, withTiming, Easing as ReEasing, ReduceMotion, withSpring } from 'react-native-reanimated';
 import { LinearGradient } from "expo-linear-gradient";
 import styles from './styles';
+import { bezier_points } from './constants';
 const GAP = 12;
 const PADDING_FRACTION = .25;
 const AnimatedMaskView = Animated.createAnimatedComponent(MaskedView);
 const ContinuousSlot = (props) => {
+    const easing = bezier_points[props.easing || 'linear'];
+    const springConfig = {
+        mass: 1,
+        damping: 20,
+        stiffness: 170,
+        useNativeDriver: true,
+        ...(typeof props.spring === 'object' ? props.spring : {})
+    };
+    const reSpringConfig = {
+        mass: 1,
+        damping: 27,
+        stiffness: 315,
+        overshootClamping: false,
+        restDisplacementThreshold: 0.01,
+        restSpeedThreshold: 0.01,
+        reduceMotion: ReduceMotion.System,
+        ...(typeof props.spring === 'object' ? props.spring : {})
+    };
     const config = {
         useNativeDriver: true,
         duration: props.animationDuration,
-        easing: Easing.bezier(0, .4, .4, .9)
+        easing: Easing.bezier(...easing)
     };
     const id = useRef(`rn-slottext-slot-${Math.random().toString(36).slice(0, 9)}`);
     const width = useSharedValue(0);
@@ -35,30 +54,56 @@ const ContinuousSlot = (props) => {
             : props.slot[0] === ',' ? 10 : 11];
         width.value = newWidth > width.value
             ? newWidth // Growing
-            : withTiming(newWidth, { duration: props.animationDuration / 4 });
+            : props.spring
+                ? withSpring(newWidth, reSpringConfig)
+                : withTiming(newWidth, { duration: props.animationDuration });
         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();
+            const finalY = -1 * (((GAP + measuredHeight.current) * (9 - props.slot[0])) -
+                (PADDING_FRACTION * measuredHeight.current));
+            if (props.spring) {
+                Animated.spring(slotOpacity, { toValue: 1, ...springConfig }).start();
+                Animated.spring(y, { toValue: finalY, ...springConfig }).start();
+                Animated.spring(commaY, { toValue: 0, ...springConfig }).start();
+                Animated.spring(periodY, { toValue: 0, ...springConfig }).start();
+                Animated.spring(commaOpacity, { toValue: 0, ...springConfig }).start();
+                Animated.spring(periodOpacity, { toValue: 0, ...springConfig }).start();
+            }
+            else {
+                Animated.timing(slotOpacity, { toValue: 1, ...config }).start();
+                Animated.timing(y, { toValue: finalY, ...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();
+            if (props.spring) {
+                Animated.spring(periodY, { toValue: (PADDING_FRACTION * measuredHeight.current), ...springConfig }).start();
+                Animated.spring(periodOpacity, { toValue: 1, ...springConfig }).start();
+                Animated.spring(slotOpacity, { toValue: 0, ...springConfig }).start();
+                Animated.spring(commaY, { toValue: 0, ...springConfig }).start();
+            }
+            else {
+                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();
+            if (props.spring) {
+                Animated.spring(commaY, { toValue: (PADDING_FRACTION * measuredHeight.current), ...springConfig }).start();
+                Animated.spring(commaOpacity, { toValue: 1, ...springConfig }).start();
+                Animated.spring(periodY, { toValue: 1, ...springConfig }).start();
+                Animated.spring(slotOpacity, { toValue: 0, ...springConfig }).start();
+            }
+            else {
+                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
@@ -70,7 +115,15 @@ const ContinuousSlot = (props) => {
             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
+    return (_jsx(ReAnimated.View, { layout: props.spring
+            ? LinearTransition.springify().mass(reSpringConfig.mass).stiffness(reSpringConfig.stiffness).damping(reSpringConfig.damping)
+            : LinearTransition.duration(props.animationDuration).easing(ReEasing.bezier(...easing).factory()), entering: props.charSizes[0]
+            ? props.spring
+                ? FadeInUp.springify().mass(reSpringConfig.mass).stiffness(reSpringConfig.stiffness).damping(reSpringConfig.damping)
+                : FadeInUp.duration(props.animationDuration / 1.5).easing(ReEasing.bezier(...easing).factory())
+            : undefined, exiting: props.spring
+            ? FadeOutDown.springify().mass(reSpringConfig.mass).stiffness(reSpringConfig.stiffness).damping(reSpringConfig.damping)
+            : FadeOutDown.duration(props.animationDuration / 1.5).easing(ReEasing.bezier(...easing).factory()), 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',

package/ContinuousSlots.js CHANGED Viewed

@@ -54,7 +54,7 @@ const ContinuousSlots = (props) => {
         });
         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 &&
+    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, easing: props.easing, spring: props.spring, 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) => {

package/Slot.js CHANGED Viewed

@@ -1,68 +1,128 @@
 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 { useEffect, useLayoutEffect, useState, useRef } from 'react';
+import { Animated, Text, View, Easing } from 'react-native';
+import Reanimated, { useSharedValue, withTiming, withSpring, withSequence, useAnimatedStyle, Easing as ReEasing, ReduceMotion } from 'react-native-reanimated';
 import styles from './styles';
-const easing = Easing.bezier(0, 0.4, 0.4, .8);
+import { bezier_points } from './constants';
 const Slot = (props) => {
-    const margin = useSharedValue(0);
-    const y = useSharedValue(0);
-    const incomingY = useSharedValue(0);
+    const reEasing = ReEasing.bezier(...bezier_points[props.easing || 'linear']);
+    const reSpringConfig = {
+        mass: 1,
+        damping: 20,
+        stiffness: 170,
+        overshootClamping: false,
+        restDisplacementThreshold: 0.01,
+        restSpeedThreshold: 0.01,
+        reduceMotion: ReduceMotion.System
+    };
+    const easing = bezier_points[props.easing || 'linear'];
+    const springConfig = {
+        mass: 1,
+        damping: 20,
+        stiffness: 170,
+        useNativeDriver: true,
+        ...(typeof props.spring === 'object' ? props.spring : {})
+    };
+    const timedConfig = {
+        duration: props.animationDuration,
+        useNativeDriver: true,
+        easing: Easing.bezier(...easing)
+    };
+    const width = useSharedValue(props.slot[0].length === 1 ? -1 : 0);
+    const yA = useRef(new Animated.Value(0)).current;
+    const yB = useRef(new Animated.Value(0)).current;
     const commaScale = useSharedValue(0);
     const commaWidth = useSharedValue(0);
+    const [valA, setValA] = useState(props.slot[0][0]);
+    const [valB, setValB] = useState();
     // React to slot value changes
     useLayoutEffect(() => {
-        if (!props.slot) {
+        if (!props.slot)
             return;
-        }
-        const incomingValue = props.slot[1];
-        const currentValue = props.slot[0];
+        const incomingValue = props.slot[0][1];
+        const currentValue = props.slot[0][0];
+        const shown = currentValue === valA ? 'A' : 'B';
         if (incomingValue === undefined) {
-            y.value = 0;
-            incomingY.value = props.height;
-            margin.value = 0;
+            if (props.charSizes[0])
+                width.value = props.charSizes[currentValue];
+            return;
         }
+        ;
         // Removing slot
-        else if (incomingValue === null) {
-            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 });
+        if (incomingValue === null) {
+            width.value = props.spring
+                ? withSpring(0, { ...reSpringConfig, damping: reSpringConfig.damping + 12 })
+                : withTiming(0, { duration: props.animationDuration / 2, easing: reEasing });
+            const animation = props.spring
+                ? Animated.spring(shown === 'A' ? yA : yB, { toValue: -1 * props.height, ...springConfig })
+                : Animated.timing(shown === 'A' ? yA : yB, { toValue: -1 * props.height, ...timedConfig });
+            animation.start(() => props.onCompleted && props.onCompleted());
         }
         // 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 }, () => {
-                props.onCompleted && runOnJS(props.onCompleted)();
-            }));
+            setValA(incomingValue);
+            width.value = props.spring
+                ? withSpring(props.charSizes[incomingValue], reSpringConfig)
+                : withTiming(props.charSizes[incomingValue], { duration: props.animationDuration / 2, easing: reEasing });
+            yB.setValue(-1 * props.height); // Set outside of view
+            const sequence = [
+                Animated.timing(yA, { toValue: -1 * props.height, duration: 0, useNativeDriver: true }),
+                props.spring
+                    ? Animated.spring(yA, { toValue: 0, ...springConfig })
+                    : Animated.timing(yA, { toValue: 0, ...timedConfig })
+            ];
+            Animated.sequence(sequence).start(() => { props.onCompleted && 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 });
-                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 });
-                incomingY.value = withSequence(withTiming(1 * props.height, { duration: 0, easing }), withTiming(0, { duration: props.animationDuration }, () => {
-                    props.onCompleted && runOnJS(props.onCompleted)();
-                }));
-            }
+        else if (Number.isFinite(incomingValue) && Number.isFinite(currentValue)) {
+            width.value = props.spring
+                ? withSpring(props.charSizes[incomingValue], { ...reSpringConfig, damping: reSpringConfig.damping + 12 })
+                : withTiming(props.charSizes[incomingValue], { duration: props.animationDuration / 2 });
+            const finalY = incomingValue > currentValue ? props.height : -1 * props.height;
+            Animated.timing(shown === 'A' ? yB : yA, { toValue: finalY, ...timedConfig, duration: 0 }).start(() => {
+                shown === 'A' ? setValB(incomingValue) : setValA(incomingValue);
+            });
         }
-    }, [props.slot]);
+    }, [props.slot, props.charSizes]);
+    useEffect(() => {
+        if (typeof valA === 'number' && typeof valB === 'number') {
+            const shown = props.slot[0][0] === valA ? 'A' : 'B';
+            const shownValFinalY = valA > valB
+                ? shown === 'A' ? props.height * -1 : props.height
+                : shown === 'A' ? props.height : props.height * -1;
+            const outAnimation = props.spring
+                ? Animated.spring(shown === 'A' ? yA : yB, { toValue: shownValFinalY, ...springConfig })
+                : Animated.timing(shown === 'A' ? yA : yB, { toValue: shownValFinalY, ...timedConfig });
+            outAnimation.start();
+            const sequence = [
+                Animated.timing(shown === 'A' ? yB : yA, { toValue: shownValFinalY * -1, duration: 0, useNativeDriver: true }),
+                props.spring
+                    ? Animated.spring(shown === 'A' ? yB : yA, { toValue: 0, ...springConfig })
+                    : Animated.timing(shown === 'A' ? yB : yA, { toValue: 0, ...timedConfig })
+            ];
+            Animated.sequence(sequence).start(() => {
+                shown === 'A' ? setValA(undefined) : setValB(undefined);
+                props.onCompleted && props.onCompleted();
+            });
+        }
+    }, [valA, valB]);
     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 }));
+            commaScale.value = props.spring
+                ? withSpring(1, reSpringConfig)
+                : withTiming(1, { duration: props.animationDuration, easing: reEasing });
+            commaWidth.value = withSequence(withTiming(0, { duration: 0 }), props.spring
+                ? withSpring(props.commaWidth, reSpringConfig)
+                : withTiming(props.commaWidth, { duration: props.animationDuration, easing: reEasing }));
         }
         else if (props.commaPositions?.[props.index] === -1) {
-            commaScale.value = withSequence(withTiming(1, { duration: 0 }), withTiming(0, { duration: props.animationDuration }));
+            commaScale.value = withSequence(withTiming(1, { duration: 0 }), props.spring
+                ? withSpring(0, reSpringConfig)
+                : withTiming(0, { duration: props.animationDuration, easing: reEasing }));
             const timeout = setTimeout(() => {
-                commaWidth.value = withTiming(0, { duration: props.animationDuration });
+                commaWidth.value = props.spring
+                    ? withSpring(0, { ...reSpringConfig, damping: reSpringConfig.damping + 12 })
+                    : withTiming(0, { duration: props.animationDuration, easing: reEasing });
             }, 0);
             return () => clearTimeout(timeout);
         }
@@ -79,32 +139,42 @@ const Slot = (props) => {
         transform: [{ scale: commaScale.value }],
         width: commaWidth.value
     }));
-    const currentStyle = useAnimatedStyle(() => ({
-        transform: [
-            { translateY: y.value },
-            { scale: interpolate(y.value, [-1 * props.height, 0, props.height], [.25, 1, .25]) }
-        ],
-        marginRight: margin.value,
-        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], [.25, 1, .25]) },
-            ],
-            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], [45, 0, -45])}deg` }]
-    }));
-    const currentTextStyle = useAnimatedStyle(() => ({
-        transform: [{ rotateX: `${interpolate(y.value, [-1 * props.height / 2, 0, props.height / 2], [45, 0, -45])}deg` }]
+    const widthAnimation = useAnimatedStyle(() => ({
+        width: width.value,
     }));
-    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: "," }) })] }));
+    return (_jsxs(View, { style: styles.slotContainer, children: [_jsx(Animated.View, { style: {
+                    transform: [
+                        { translateY: yA },
+                        { scale: yA.interpolate({ inputRange: [-1 * props.height, 0, props.height], outputRange: [.25, 1, .25] }) }
+                    ],
+                    opacity: yA.interpolate({ inputRange: [-1 * props.height / 2, 0, 1 * props.height / 2], outputRange: [0, 1, 0] })
+                }, children: _jsx(Reanimated.View, { style: widthAnimation, children: _jsx(Animated.Text, { style: [
+                            props.fontStyle,
+                            {
+                                transform: [{
+                                        rotateX: `${yA.interpolate({
+                                            inputRange: [-1 * props.height / 2, 0, props.height / 2],
+                                            outputRange: [45, 0, -45]
+                                        })}deg`
+                                    }]
+                            }
+                        ], children: valA }) }) }), _jsx(Animated.View, { style: {
+                    position: 'absolute',
+                    transform: [
+                        { translateY: yB },
+                        { scale: yB.interpolate({ inputRange: [-1 * props.height, 0, props.height], outputRange: [.25, 1, .25] }) }
+                    ],
+                    opacity: yB.interpolate({ inputRange: [-1 * props.height / 2, 0, 1 * props.height / 2], outputRange: [0, 1, 0] })
+                }, children: _jsx(Animated.Text, { style: [
+                        props.fontStyle,
+                        {
+                            transform: [{
+                                    rotateX: `${yB.interpolate({
+                                        inputRange: [-1 * props.height / 2, 0, props.height / 2],
+                                        outputRange: [45, 0, -45]
+                                    })}deg`
+                                }]
+                        }
+                    ], children: valB }) }), _jsx(Reanimated.View, { style: commaStyle, children: _jsx(Text, { style: props.fontStyle, children: "," }) })] }));
 };
 export default Slot;

package/Slots.js CHANGED Viewed

@@ -1,22 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useLayoutEffect, useCallback, Fragment, useRef } from 'react';
+import React, { useState, useLayoutEffect, useCallback, Fragment, useRef, useEffect } from 'react';
 import { View, Text } from 'react-native';
 import styles from './styles';
-import { getNewSlots, getNewCommaPositions } from './helpers';
+import { getNewSlotValues, getNewCommaPositions } from './helpers';
 import Slot from './Slot';
-const DEFAULT_DURATION = 400;
+const DEFAULT_DURATION = 500;
 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(() => {
@@ -28,39 +23,36 @@ const Slots = (props) => {
             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);
+        const newSlotValues = getNewSlotValues(stringValue, slots, parseFromLeft);
+        setSlots(prev => newSlotValues.map((v, i) => {
+            const shift = parseFromLeft
+                ? 0
+                : Math.max(newSlotValues.length - prev.length, 0);
+            // When adding slots, they will need a new key, otherwise
+            // mantain the same slot key. Also if this is the first run through
+            // and the slots are empty, the keys will need to be set.
+            const key = v[0] === null || prev.length === 0
+                ? Math.random().toString(36).slice(0, 9)
+                : prev[i - shift][1] || Math.random().toString(36).slice(0, 9);
+            return [v, key];
+        }));
     }, [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]]);
+            .filter(s => (Number.isFinite(s[0][0]) && s[0][1] !== null) || Number.isFinite(s[0][1]))
+            .map(s => Number.isFinite(s[0][1]) ? [[s[0][1]], s[1]] : [[s[0][0]], s[1]]);
         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);
+            .slice(slots[0]?.[0][1] === null ? numberOfSlotsRemoved : 0) // Trim from left
+            .slice(0, slots[slots.length - 1]?.[0][1] === null ? -1 * numberOfSlotsRemoved : undefined); // Trim from right
+        setSlots(cleanedSlots);
+        setCommaPositions(cleanedCommas);
     }, [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]}`));
+                        const callback = i === slots.findIndex(s => s[0].length > 1) ? onCompleted : undefined;
+                        return (_jsxs(Fragment, { children: [_jsx(Slot, { slot: slot, index: i, height: slotHeight, charSizes: charSizes, commaWidth: commaWidth, periodWidth: periodWidth, onCompleted: callback, easing: props.easing, fontStyle: props.fontStyle, animationDuration: props.animationDuration || DEFAULT_DURATION, spring: props.spring, commaPositions: props.includeComma && commaPositions.length ? commaPositions : undefined }), (props.precision || 0) > 0 && props.precision === (slots.length - 1 - i) &&
+                                    _jsx(Text, { style: props.fontStyle, children: "." })] }, `${idRef.current}-${slot[1]}`));
                     })] }), !sizesMeasured &&
                 Array.from({ length: 10 }, (_, i) => i)
                     .concat([',', '.'])

package/constants.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const bezier_points: {
+    [key: string]: [number, number, number, number];
+};

package/constants.js ADDED Viewed

@@ -0,0 +1,5 @@
+export const bezier_points = {
+    'in-out': [.23, 0, .23, .99],
+    'linear': [0, 0, 1, 1],
+    'out': [0, .4, .4, .9]
+};

package/helpers.d.ts CHANGED Viewed

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

package/helpers.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export const getNewSlots = (newValue, currentSlots, parseFromLeft) => {
+export const getNewSlotValues = (newValue, currentSlots, parseFromLeft) => {
     const iterLength = Math.max(newValue.length, currentSlots.length);
     const shiftCurrent = parseFromLeft
         ? 0
@@ -6,35 +6,35 @@ export const getNewSlots = (newValue, currentSlots, parseFromLeft) => {
     const shiftIncoming = parseFromLeft
         ? 0
         : currentSlots.length > newValue.length ? newValue.length - currentSlots.length : 0;
-    const newSlots = Array.from({ length: iterLength }, (_, i) => [i]);
+    const newSlotValues = 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];
+        const currentSlotValue = currentSlots[i + shiftCurrent]?.[0][0];
         // First pass through, just set the slots since shared slots is empty
         if (currentSlots.length === 0) {
-            return newSlots[i] = [newValueParsed];
+            return newSlotValues[i] = [newValueParsed];
         }
         // Removing slot
         if (isNaN(newValueParsed)) {
-            newSlots[i] = [currentSlotValue, null];
+            newSlotValues[i] = [currentSlotValue, null];
         }
         // Adding slot
         else if (currentSlotValue === undefined || currentSlotValue === null) {
-            newSlots[i] = [null, newValueParsed];
+            newSlotValues[i] = [null, newValueParsed];
         }
         // Animating slot
         else if (currentSlotValue !== newValueParsed) {
-            newSlots[i] = [currentSlotValue, newValueParsed];
+            newSlotValues[i] = [currentSlotValue, newValueParsed];
         }
         // Static slot
         else {
-            newSlots[i] = [newValueParsed];
+            newSlotValues[i] = [newValueParsed];
         }
     });
-    return newSlots;
+    return newSlotValues;
 };
 // 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
+// for all of the commas being added, removed, or staying the same
 export const getNewCommaPositions = (newValue, currentCommaPositions, parseFromLeft, precision) => {
     const parseLength = Math.max(newValue.length, currentCommaPositions.length);
     // On first render, no size change

package/package.json CHANGED Viewed

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

package/types.d.ts CHANGED Viewed

@@ -1,10 +1,17 @@
 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 type SlotValue = [[number] | [number | null, number | null], string];
+type EasingT = 'linear' | 'in-out' | 'out';
+type Spring = {
+    damping: number;
+    mass: number;
+    stiffness: number;
+} | true;
 export interface SlotProps {
     slot: SlotValue;
     index: number;
+    easing?: EasingT;
     animationDuration: number;
     fontStyle?: StyleProp<TextStyle>;
     commaWidth: number;
@@ -13,10 +20,13 @@ export interface SlotProps {
     commaPositions?: CommaPosition[];
     charSizes: number[];
     height: number;
+    spring?: Spring;
 }
-type Shared = 'fontStyle' | 'index' | 'charSizes' | 'animationDuration';
+type Shared = 'fontStyle' | 'index' | 'charSizes' | 'animationDuration' | 'spring';
 export interface ContinuousSlotProps extends Pick<SlotProps, Shared> {
     slot: [number | string, string];
+    spring?: Spring;
+    easing?: EasingT;
 }
 export type CommaPosition = 1 | -1 | 0 | null;
 export interface CommaProps {
@@ -28,13 +38,21 @@ export interface CommaProps {
     onExited: () => void;
     onEntered: () => void;
 }
-export interface AnimatedNumbersProps {
+interface AnimatedNumbersPropsBase {
     value: number;
     fontStyle?: StyleProp<TextStyle>;
     prefix?: string;
     includeComma?: boolean;
     precision?: number;
-    animationDuration?: number;
     animateIntermediateValues?: true;
 }
+export type AnimatedNumbersProps = ({
+    easing?: EasingT;
+    animationDuration?: number;
+    spring?: never;
+} & AnimatedNumbersPropsBase) | ({
+    easing?: never;
+    animationDuration?: never;
+    spring?: Spring;
+} & AnimatedNumbersPropsBase);
 export {};