Skip to content
This repository has been archived by the owner on Mar 25, 2024. It is now read-only.

React Native component that animates a number by smoothly changing it between renders

License

Notifications You must be signed in to change notification settings

rpander93/react-native-animated-number

Repository files navigation

React Native Animated Number npm version

What is this?

This component renders a text that smoothly animates to new values as props change.

Example snack

Other implementations exist. This one is different because it uses a TextInput rather than a Text component and uses setNativeProps to update the value. The benefit of this is that it is much more performant than using state to update the value so the experience is much smoother.

How to use

First install the package with Yarn or npm.

yarn add react-native-animated-number

Import the component from the package. The "value" prop is the number the component should animate to.

import AnimatedNumber from "react-native-animated-number";

<AnimatedNumber value={100} />

The component accepts all props from TextInput, plus the following:

interface Props {
  /** Formatter function. Defaults to value => value.toString() */
  formatter?: (value: number) => string;
  /** The number of steps it should take to update from an old value to a new value. Defaults to 15 */
  steps?: number;
  /** The time between each update. Defaults to 17. */
  time?: number;
  /** The value the component should animate to. The component will animate to te new value when this prop changes */
  value: number;
}

About

React Native component that animates a number by smoothly changing it between renders

Resources

License

Stars

Watchers

Forks

Packages

No packages published