diff --git a/README.md b/README.md index 3e9f0c9..616e4bc 100644 --- a/README.md +++ b/README.md @@ -143,3 +143,11 @@ A function that triggers when text state has updated. #### `onFinish: () => void`(optional) A function that triggers when animation completes. + +#### `startAt: number`(optional, default to `0`) + +Timeout in milliseconds to start animation after. + +#### `initialValue: number`(optional, default to `0`) + +A value to start animation from diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..207d071 --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,49 @@ +declare module 'react-native-animate-number' { + export interface IAnimateNumberProps { + /** + * The value of AnimateNumber component. + */ + value: number; + /** + * Set this property to force the component's value increase/decrease by this number. + */ + countBy?: number; + /** + * Base interval of each animation frame, in ms. Default: `14` + */ + interval?: number; + /** + * Set total frame number of animation, say, if interval is 14 and steps is 30, the animation will take 14x30ms to finish when it uses linear timing function. + * Default: `45` + */ + steps?: number; + /** + * Custom timing function or use a default timing function. + * Default: `linear` + */ + timing?: 'linear' | 'easeOut' | 'easeIn' | ((interval: number, progress: number) => number); + /** + * This prop accepts a function which returns a string as displayed value. + */ + formatter?: (value: number) => string; + /** + * A function that triggers when text state has updated. + * @param currentValue current frame's value + * @param endValue value from props.value + */ + onProgress?: (currentValue: number, endValue: number) => void; + /** + * A function that triggers when animation completes. + */ + onFinish?: (value: number, formattedValue: number) => void; + /** + * Timeout in milliseconds to start animation after. Default: `0` + */ + startAt?: number; + /** + * A value to start animation from. Default: `0` + */ + initialValue?: number; + } + export default class AnimateNumber extends React.Component {} +} diff --git a/dist/index.js b/dist/index.js index 489f5a7..5b016c6 100644 --- a/dist/index.js +++ b/dist/index.js @@ -6,10 +6,7 @@ // @flow import React, { Component } from 'react'; -import { - Text, - View -} from 'react-native'; +import { Text } from 'react-native'; import Timer from 'react-timer-mixin'; const HALF_RAD = Math.PI/2 @@ -99,7 +96,7 @@ export default class AnimateNumber extends Component { , this.props.startAt != null ? this.props.startAt : 0); } - componentWillUpdate(nextProps, nextState) { + UNSAFE_componentWillUpdate(nextProps) { // check if start an animation if(this.props.value !== nextProps.value) { diff --git a/package.json b/package.json index 76d1879..149f28b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-animate-number", - "version": "0.1.2", + "version": "0.1.3", "description": "", "main": "index.js", "scripts": {