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 | | 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

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