7

Library showing animation of number changes in react native

 3 years ago
source link: https://reactnativeexample.com/library-showing-animation-of-number-changes-in-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

This package is using react-native-reanimated. So following libs should be installed first

yarn add react-native-reanimated react-native-gesture-handler && cd ios && pod install
Shell
yarn add react-native-animated-numbers
Shell

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

ios-1

android-1

GitHub

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK