heyman333/react-native-animated-numbers

🎰 Library showing animation of number changes in react-native

react-native-animated-numbers

Library showing animation of number changes in react-native

If you want web version in react.js download react-animated-numbers

install

yarn add react-native-animated-numbers

props

	type	default	description
animateToNumber	number	none	Number to be animated
fontStyle	TextStyle?	none	Style of number text
animationDuration	number?	1400(ms)	The speed at which the animation works
includeComma	boolean?	false	Whether the number contains commas
easing	Easing?	Easing.elastic(1.2)	React Native Easing API in Animated

example

import React from 'react';
import { SafeAreaView, Button } from 'react-native';
import AnimatedNumbers from 'react-native-animated-numbers';

const App = () => {
  const [animateToNumber, setAnimateToNumber] = React.useState(7979);

  const increase = () => {
    setAnimateToNumber(animateToNumber + 1999);
  };

  return (
    <SafeAreaView
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
    >
      <AnimatedNumbers
        includeComma
        animateToNumber={animateToNumber}
        fontStyle={{ fontSize: 50, fontWeight: 'bold' }}
      />
      <Button title="increase" onPress={increase} />
    </SafeAreaView>
  );
};
export default App;

screenshot

react-native-animated-numbers's Issues

Support for Reanimated 2x,3x

Hello, thanks for great lib. However, I have encountered an issue with the library when trying to use it with Reanimated 2x and 3x. This lib not working anymore for this versions. It will be great to update it

Create a similar animation for time string 00:08:19 -> 00:08:20

You have done an amazing job there to manage such a nice animation into a reusable component.
Thank you so much for this :)

I was thinking if you can add this animation in a time string, it would be amazing.

Exception thrown after animation finishes

useEffect(() => {
        const timer = setTimeout(() => {
            setAnimateToNumber(parseFloat(user.balance || 0));
        }, 200);
        return () => clearTimeout(timer);
    }, [user.balance]);

                        <AnimatedNumbers
                            includeComma
                            animateToNumber={animateToNumber}
                            fontStyle={{fontSize: 24, fontWeight: 'bold', color: getColor('gray-700')}}
                        />

The issue occurs intermittently. My version is 0.2.0.

TypeScript Conversion for react-native-animated-numbers

Hey @heyman333

I wanted to express my gratitude for the fantastic work on react-native-animated-numbers. It's been incredibly useful. I've converted the entire codebase into TypeScript. I've fixed a major crash issue

I'd love to send a pull request to contribute this TypeScript version.

Thanks again!

Support for animating numbers with decimals

Great work on this library so far! Sadly, for our intended use case, we'd need it to support numbers with decimals. Is this something that would be possible or on your intended roadmap?

Provide initial value for animated number

How do we provide initial value for animated number ??

Error: Unexpected export specifier type

I am facing the following error:

error: node_modules/react-native-animated-numbers/node_modules/react-native-reanimated/src/index.ts: /Users/saadbinwaheed/Documents/Repos/jaguar/node_modules/react-native-animated-numbers/node_modules/react-native-reanimated/src/index.ts: Unexpected export specifier type
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';

"react-native-animated-numbers": "^0.4.1",

Gap between certain digits like 1

As you can see in the above screenshot, there is a visible gap between 1 and 0 which is odd. How can I fix it?

Occurs in both IOS and android devices.

Can't use numbers with dots

It crashes when I'm trying to use numbers with dots

Unexpected token

https://github.com/heyman333/react-native-animated-numbers/blob/master/index.js#L5

TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions')

On both android and ios:

"react-native": "0.64.2"
"react-native-animated-numbers": "^0.4.1"

import AnimatedNumbers from 'react-native-animated-numbers';

const [points, setPoints] = useState(37089)

<AnimatedNumbers
                  includeComma
                  animateToNumber={points}
                  fontStyle={AppStyles.boldButtonText}
              />

Using react native animated numbers in a class component

How can I use this in a class component?