feat: support for locale-based numbers when comma is allowed (#61)

* feat: support for locale-based  numbers when comma is allowed

* feat: add prop to support locale

README.md

@@ -32,6 +32,7 @@ yarn add react-native-animated-numbers
 |      easing       |  Easing?   | Easing.elastic(1.2) | React Native Easing API in Animated    |
 |  containerStyle   | ViewStyle? |        none         | Style of container view                |
 |    fontVariant    |  string[]  |  ['tabular-nums']   | Font variants for a font               |
+| locale | Intl.LocalesArgument | 'en-US' | the locale to be used to split the number when includeComma is true |
 
 ## example
 

src/components/AnimatedNumber.tsx

@@ -18,6 +18,7 @@ export interface AnimatedNumberProps {
   easing?: Animated.TimingAnimationConfig['easing'];
   containerStyle?: StyleProp<ViewStyle>;
   fontVariant?: TextStyle['fontVariant'];
+  locale?: Intl.LocalesArgument;
 }
 
 const AnimatedNumber = ({
@@ -28,6 +29,7 @@ const AnimatedNumber = ({
   easing,
   containerStyle,
   fontVariant = DEFAULT_FONT_VARIANT,
+  locale = 'en-US',
 }: AnimatedNumberProps) => {
   const animationRef = useRef<Animated.CompositeAnimation | null>(null);
 
@@ -49,15 +51,15 @@ const AnimatedNumber = ({
 
   const nextNumbersArr = useMemo(() => {
     return includeComma
-      ? createNumberArrayWithComma(animateToNumberString)
+      ? createNumberArrayWithComma(animateToNumberString, locale)
       : Array.from(animateToNumberString, Number);
-  }, [animateToNumberString, includeComma]);
+  }, [animateToNumberString, includeComma, locale]);
 
   const prevNumbersArr = useMemo(() => {
     return includeComma
-      ? createNumberArrayWithComma(prevNumberString)
+      ? createNumberArrayWithComma(prevNumberString, locale)
       : Array.from(prevNumberString, Number);
-  }, [prevNumberString, includeComma]);
+  }, [includeComma, prevNumberString, locale]);
 
   const [height, setHeight] = React.useState(0);
 

src/utils/index.ts

@@ -2,17 +2,19 @@ export function toAbsoluteInteger(num: number) {
   return Math.abs(Math.floor(num));
 }
 
-export function createNumberArrayWithComma(numberString: string): number[] {
-  const arr = Array.from(numberString, Number);
+export function createNumberArrayWithComma(
+  numberString: string,
+  locale: Intl.LocalesArgument = 'en-US'
+): (number | ',')[] {
+  // Convert the string to a number and use Intl.NumberFormat to format it
+  const formattedString = new Intl.NumberFormat(locale).format(
+    Number(numberString)
+  );
 
-  const reducedArray = new Array(Math.ceil(numberString.length / 3)).fill(0);
-
-  reducedArray.forEach((_, index) => {
-    if (index !== 0) {
-      //@ts-ignore splice(start: number, deleteCount: number, ...items: T[]): T[];
-      arr.splice(numberString.length - index * 3, 0, ',');
-    }
-  });
+  // Split the formatted string into an array of numbers and commas
+  const arr = Array.from(formattedString, (char) =>
+    char === ',' ? char : Number(char)
+  );
 
   return arr;
 }