react-native-slot-text 1.0.0 → 1.0.2

package/AnimatedNumbers.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useRef, useCallback } from "react";
+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 styles from './styles';
 import Slot from './Slot';
 import { formatString } from "./helpers";
-const DEFAULT_DURTION = 200;
+const DEFAULT_DURATION = 200;
 /**
  * AnimatedNumbers Component
  *
@@ -98,13 +98,13 @@ const AnimatedNumbers = (props) => {
         else {
             Animated.timing(containerWidth, {
                 toValue: e.nativeEvent.layout.width,
-                duration: props.animationDuration || DEFAULT_DURTION,
+                duration: props.animationDuration || DEFAULT_DURATION,
                 useNativeDriver: false,
-                delay: containerSize.width > e.nativeEvent.layout.width ? props.animationDuration || DEFAULT_DURTION : 0
+                delay: containerSize.width > e.nativeEvent.layout.width ? props.animationDuration || DEFAULT_DURATION : 0
             }).start();
             Animated.timing(containerHeight, {
                 toValue: e.nativeEvent.layout.height,
-                duration: props.animationDuration || DEFAULT_DURTION,
+                duration: props.animationDuration || DEFAULT_DURATION,
                 useNativeDriver: false
             }).start();
         }
@@ -120,9 +120,9 @@ const AnimatedNumbers = (props) => {
     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}`)))] })] }));
+                ], 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_DURATION).withInitialValues({ opacity: 0 }), exiting: StretchOutX.withInitialValues({ opacity: 1 }), children: _jsx(Text, { style: props.fontStyle, children: "," }) }), _jsx(Slot, { value: val, height: containerSize.height, initial: 0, final: outFinalPositions[i] || 0, animationDuration: props.animationDuration || DEFAULT_DURATION, 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_DURATION).withInitialValues({ opacity: 0 }), exiting: StretchOutX.withInitialValues({ opacity: 1 }), 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 })] }, `${val}-${i}-new`))) })] }), _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:

package/README.md

@@ -8,29 +8,21 @@ 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
+
+
+https://github.com/user-attachments/assets/192d168a-6497-4035-9c8e-b39b88dabf56
+
 
 
 ## 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,
-        }}
+    <SlotText
+        fontStyle={styles.animatedNumbers}
+        value={`${value}`}
+        prefix='$'
+        animationDuration={200}
+        includeComma={true}
     />
 ```
 

package/package.json

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

package/styles.d.ts

@@ -6,13 +6,11 @@ declare const styles: {
         position: "absolute";
         flexDirection: "row";
         opacity: number;
-        gap: number;
     };
     slotsContainer: {
         position: "absolute";
         flexDirection: "row";
         justifyContent: "center";
-        gap: number;
     };
 };
 export default styles;

package/styles.js

@@ -7,13 +7,11 @@ const styles = StyleSheet.create({
         position: 'absolute',
         flexDirection: 'row',
         opacity: 0,
-        gap: 2
     },
     slotsContainer: {
         position: 'absolute',
         flexDirection: 'row',
         justifyContent: 'center',
-        gap: 2,
     }
 });
 export default styles;