React Native Animated Numbers Save

🎰 Library showing animation of number changes in react-native

Project README

react-native-animated-numbers

PRs Welcome Platform License

npm version

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

Open Source Agenda is not affiliated with "React Native Animated Numbers" Project. README Source: heyman333/react-native-animated-numbers
Stars
305
Open Issues
34
Last Commit
1 month ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating