https://github.com/heyman333/react-native-animated-numbers

🎰 Library showing animation of number changes in react-native
https://github.com/heyman333/react-native-animated-numbers

animated animation numbers react-native

Last synced: 5 days ago
JSON representation

🎰 Library showing animation of number changes in react-native

• Host: GitHub
• URL: https://github.com/heyman333/react-native-animated-numbers
• Owner: heyman333
• License: mit
• Created: 2020-06-06T15:16:09.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-11-15T04:57:52.000Z (2 months ago)
• Last Synced: 2025-01-10T06:26:09.455Z (12 days ago)
• Topics: animated, animation, numbers, react-native
• Language: TypeScript
• Homepage:
• Size: 1.92 MB
• Stars: 412
• Watchers: 4
• Forks: 46
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-animated-numbers

[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/heyman333/react-native-animated-numbers/pulls)

[![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/heyman333/react-native-animated-numbers/blob/master/LICENSE)













Library showing animation of number changes in react-native

If you want web version in react.js [download react-animated-numbers](https://github.com/heyman333/react-animated-numbers)

## install

```shell

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

```js

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 (

    

      

      

    

  );

};

export default App;

```

## screenshot