react-native-slot-text 1.0.4 → 1.0.5

package/AnimatedNumbers.js

@@ -22,6 +22,7 @@ const DEFAULT_DURATION = 200;
  * @returns {JSX.Element} The animated number component with slots for digits and commas.
  */
 const AnimatedNumbers = (props) => {
+    const idRef = useRef(`slots-${Math.random().toString(36).substring(7)}`);
     const [state, setState] = useState('idle');
     const [oldNumber, setOldNumber] = useState([]);
     const [newNumber, setNewNumber] = useState([]);
@@ -98,13 +99,12 @@ const AnimatedNumbers = (props) => {
         else {
             Animated.timing(containerWidth, {
                 toValue: e.nativeEvent.layout.width,
-                duration: props.animationDuration || DEFAULT_DURATION,
                 useNativeDriver: false,
-                delay: containerSize.width > e.nativeEvent.layout.width ? props.animationDuration || DEFAULT_DURATION : 0
+                duration: containerSize.width > e.nativeEvent.layout.width ? props.animationDuration || DEFAULT_DURATION : 0
             }).start();
             Animated.timing(containerHeight, {
                 toValue: e.nativeEvent.layout.height,
-                duration: props.animationDuration || DEFAULT_DURATION,
+                duration: 100,
                 useNativeDriver: false
             }).start();
         }
@@ -121,7 +121,9 @@ const AnimatedNumbers = (props) => {
                     { 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_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) => (_jsx(Fragment, { 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}`)))] })] }));
+                                    _jsx(ReAnimated.View, { entering: ZoomIn.delay(props.animationDuration || DEFAULT_DURATION).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.delay(props.animationDuration || DEFAULT_DURATION), 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}`)))] })] }));
 };
 /*
 Basic logic:

package/package.json

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

package/styles.d.ts

@@ -12,5 +12,8 @@ declare const styles: {
         flexDirection: "row";
         justifyContent: "center";
     };
+    hiddenComma: {
+        opacity: number;
+    };
 };
 export default styles;

package/styles.js

@@ -12,6 +12,9 @@ const styles = StyleSheet.create({
         position: 'absolute',
         flexDirection: 'row',
         justifyContent: 'center',
+    },
+    hiddenComma: {
+        opacity: 0,
     }
 });
 export default styles;