Duplicated thousandths place digit

[jyaconelli]

Bug description

The digit in the thousandths place gets doubled whenever you spin to a number with at least 4 digits

Version

1.0.12

Reproduction

https://snack.expo.dev/@jyaconelli/duplicate-first-digit-repro

Code

import { Button, SafeAreaView, StyleSheet } from 'react-native';
import SpinningNumbers from '@birdwingo/react-native-spinning-numbers';
import { useState } from 'react';

const numbers = [123, 4567];

export default function App() {
  const [currentNumberIdx, setCurrentNumberIdx] = useState(0);

  return (
    <SafeAreaView style={styles.container}>
      <SpinningNumbers>{numbers[currentNumberIdx]}</SpinningNumbers>
      <Button
        title="Change number"
        onPress={() =>
          setCurrentNumberIdx((currentNumberIdx + 1) % numbers.length)
        }
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Video

In the video, it is switching between two numbers: 4321 and 234, however the 4 or 4321 gets reliably repeated

ScreenRecording_10-01-2024.16-55-27_1.MP4

Additional notes

• If numbers are formatted with comma delineation (i.e. 1,000 instead of 1000) this solves the doubled digit issue. However, then the spinning animation doesn't trigger when going from a number with less than 4 digits to a number with at least 4 digits (i.e. 123 to 4321)

[mvritz]

If anyone still needs this, I found the issue.

The issue was located in createNumericAnimation function in src/core/helpers/index.ts

for (let i = 0; i < animation.decimals; ++i) {
-  if ((i && i % 3 === 0)) {
-    animation.pattern.unshift({ separator: thousandsSeparator, exponent: i });
-  }
-  animation.pattern.unshift({ exponent: i });
+
+  animation.pattern.unshift({ exponent: i });
+
+  if (i !== 0 && i % 3 === 0 && thousandsSeparator) {
+    animation.pattern.unshift({ separator: thousandsSeparator });
+  }
}

Now the array ends up like this:

// e.g. 1400 => decimals = 4
// i=0 => { exponent:0 }
// i=1 => { exponent:1 }
// i=2 => { exponent:2 }
// i=3 => { exponent:3 }, { separator: ',' }
[
  { exponent: 3 },
  { separator: ',' },
  { exponent: 2 },
  { exponent: 1 },
  { exponent: 0 },
]