react-native-slot-text 1.0.0

package/AnimatedNumbers.d.ts

@@ -0,0 +1,18 @@
+import type { AnimatedNumbersProps } from './types';
+/**
+ * AnimatedNumbers Component
+ *
+ * This component animates numeric values, transitioning between old and new numbers.
+ * 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 {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 {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.
+ *
+ * @returns {JSX.Element} The animated number component with slots for digits and commas.
+ */
+declare const AnimatedNumbers: (props: AnimatedNumbersProps) => import("react/jsx-runtime").JSX.Element;
+export default AnimatedNumbers;

package/AnimatedNumbers.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { View, Text, Animated } from "react-native";
+import ReAnimated, { ZoomIn, StretchOutX } from 'react-native-reanimated';
+import styles from './styles';
+import Slot from './Slot';
+import { formatString } from "./helpers";
+const DEFAULT_DURTION = 200;
+/**
+ * AnimatedNumbers Component
+ *
+ * This component animates numeric values, transitioning between old and new numbers.
+ * 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 {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 {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.
+ *
+ * @returns {JSX.Element} The animated number component with slots for digits and commas.
+ */
+const AnimatedNumbers = (props) => {
+    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));
+        }
+    }, [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;
+                }
+            }
+            setInZeroPositions(newValuePositions);
+            setOutFinalPositions([
+                ...newValuePositions.slice(0, oldNumber.length).map(val => val ? val * -1 : 0),
+                ...Array(Math.max(0, oldNumber.length - animatingValue.length)).fill(-1)
+            ]);
+        }
+    }, [animatingValue]);
+    const onMeasureLayout = useCallback((e) => {
+        if (containerSize.width === 0) {
+            containerWidth.setValue(e.nativeEvent.layout.width);
+            containerHeight.setValue(e.nativeEvent.layout.height);
+        }
+        else {
+            Animated.timing(containerWidth, {
+                toValue: e.nativeEvent.layout.width,
+                duration: props.animationDuration || DEFAULT_DURTION,
+                useNativeDriver: false,
+                delay: containerSize.width > e.nativeEvent.layout.width ? props.animationDuration || DEFAULT_DURTION : 0
+            }).start();
+            Animated.timing(containerHeight, {
+                toValue: e.nativeEvent.layout.height,
+                duration: props.animationDuration || DEFAULT_DURTION,
+                useNativeDriver: false
+            }).start();
+        }
+        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.delay(props.animationDuration || DEFAULT_DURTION).withInitialValues({ opacity: 0 }), exiting: StretchOutX.withInitialValues({ opacity: 1 }), children: _jsx(Text, { style: props.fontStyle, children: "," }) }, `${val}-${i}-comma`), _jsx(Slot, { value: val, height: containerSize.height, initial: 0, final: outFinalPositions[i] || 0, animationDuration: props.animationDuration || DEFAULT_DURTION, fontStyle: props.fontStyle }, `${val}-${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.delay(props.animationDuration || DEFAULT_DURTION).withInitialValues({ opacity: 0 }), exiting: StretchOutX.withInitialValues({ opacity: 1 }), children: _jsx(Text, { style: props.fontStyle, children: "," }) }, `${val}-${i}-comma-new`), _jsx(Slot, { value: val, initial: inZeroPositions[i] || -1, final: inZeroPositions[i] ? 0 : -1, height: containerSize.height, animationDuration: props.animationDuration || DEFAULT_DURTION, fontStyle: props.fontStyle, onCompleted: onCompleted }, `${val}-${i}`)] }))) })] }), _jsxs(View, { onLayout: onMeasureLayout, style: styles.spacer, ref: measureRef, children: [props.prefix && _jsx(Text, { style: props.fontStyle, children: props.prefix }), oldNumber.map((val, i) => (_jsx(Text, { style: props.fontStyle, children: val }, `${val}-${i}`)))] })] }));
+};
+/*
+Basic logic:
+
+When a new value comes in:
+
+1. If there is an animation currently in progress then queue the new value with any prefix prepended
+
+2. For an animation cycle, split the new number and set the new number state
+
+3. Loop through the new number and old number and compare digits, determing which way the new numbers
+and old numers need to animate. There are two versions of the number, one that's visible, and one outside
+the visible clipping container. If a slot has the same number between the old and new nummer, it wont be animated.
+
+4. Set the new positions wich will trigger the animations of the slots
+
+5. At the end, clear the new number and set the old number to the new number
+
+6. Pop any queued values and set the formated value, which will retriger the animation cycle
+
+*/
+export default AnimatedNumbers;

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Geist UI.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# react-native-slot-text
+
+To install dependencies:
+
+```bash
+bun install react-native-slot-text
+```
+
+This project was created using `bun init` in bun v1.1.21. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
+
+https://github.com/user-attachments/assets/df5449f1-e20c-4a18-8687-67f29652d7b6
+
+
+## Usage
+
+```
+    <Slider
+        value={value}
+        onValueChange={(value) => setValue(value[0])}
+        minimumValue={0}
+        maximumValue={limit_amount || 100}
+        step={1}
+        maximumTrackTintColor={theme.colors.quinaryText}
+        minimumTrackTintColor={theme.colors.blueText}
+        thumbTintColor={theme.colors.whiteText}
+        thumbStyle={{
+            width: 18,
+            height: 18,
+            shadowColor: theme.colors.navShadow,
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 1,
+            shadowRadius: 1,
+        }}
+    />
+```
+
+### 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.                                                 |

package/Slot.d.ts

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

package/Slot.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import { Text, Animated } from 'react-native';
+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();
+                }
+            });
+        }
+    }, [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 }) }));
+};
+export default Slot;

package/helpers.d.ts

@@ -0,0 +1 @@
+export declare const formatString: (v: string, p?: string) => string;

package/helpers.js

@@ -0,0 +1 @@
+export const formatString = (v, p) => `${p || ''}${v}`;

package/index.d.ts

@@ -0,0 +1 @@
+export { default as SlotText } from './AnimatedNumbers';

package/index.js

@@ -0,0 +1 @@
+export { default as SlotText } from './AnimatedNumbers';

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "react-native-slot-text",
+  "version": "1.0.0",
+  "author": "sc-mitton <scm.mitton@gmail.com> (https://github.com/sc-mitton)",
+  "main": "index.js",
+  "module": "index.ts",
+  "devDependencies": {
+    "@types/lodash": "^4.17.9",
+    "@types/react": "^18.3.10",
+    "@types/react-native": "^0.73.0",
+    "typescript": "^5.0.0",
+    "tsx": "^4.15.5",
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-native": "^0.75.3",
+    "react-native-reanimated": "^3.15.4"
+  },
+  "description": "Slot machine style animted text for React Native",
+  "keywords": [
+    "slot",
+    "text",
+    "react-native",
+    "react",
+    "slot-machine",
+    "react-native-slot-text",
+    "animation"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "release": "tsx src/pre-release.ts && cd lib && npm publish --access public --no-git-checks"
+  },
+  "type": "module",
+  "types": "src/types.d.ts"
+}

package/styles.d.ts

@@ -0,0 +1,18 @@
+declare const styles: {
+    animatedNumbers: {
+        overflow: "hidden";
+    };
+    spacer: {
+        position: "absolute";
+        flexDirection: "row";
+        opacity: number;
+        gap: number;
+    };
+    slotsContainer: {
+        position: "absolute";
+        flexDirection: "row";
+        justifyContent: "center";
+        gap: number;
+    };
+};
+export default styles;

package/styles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+const styles = StyleSheet.create({
+    animatedNumbers: {
+        overflow: 'hidden',
+    },
+    spacer: {
+        position: 'absolute',
+        flexDirection: 'row',
+        opacity: 0,
+        gap: 2
+    },
+    slotsContainer: {
+        position: 'absolute',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 2,
+    }
+});
+export default styles;

package/types.d.ts

@@ -0,0 +1,19 @@
+import type { StyleProp, TextStyle } from 'react-native';
+export type Position = -1 | 0 | 1;
+export interface SlotProps {
+    value: number | string;
+    animationDuration: number;
+    fontStyle?: StyleProp<TextStyle>;
+    initial: Position;
+    final: Position;
+    height: number;
+    isNew?: boolean;
+    onCompleted?: () => void;
+}
+export interface AnimatedNumbersProps {
+    value: `${number}`;
+    fontStyle?: StyleProp<TextStyle>;
+    animationDuration?: number;
+    prefix?: string;
+    includeComma?: boolean;
+}

package/types.js

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