react-native-spinning-numbers icon indicating copy to clipboard operation
react-native-spinning-numbers copied to clipboard

Duplicated thousandths place digit

Open jyaconelli opened this issue 4 months ago • 0 comments

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

https://github.com/user-attachments/assets/9aafd9da-b52d-40b5-8935-42036e6909cb

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)

jyaconelli avatar Oct 01 '24 23:10 jyaconelli