{"_id":"@bankify/react-native-animate-number","_rev":"3-78c7c85e08ea6f54309264e51afd535e","name":"@bankify/react-native-animate-number","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@bankify/react-native-animate-number","version":"0.2.0","description":"Animated number component","main":"dist/index.js","scripts":{"test":"./node_modules/mocha/bin/mocha -t 5000 --require react-native-mock/mock --compilers js:babel-core/register --recursive test/*.js"},"author":{"name":"Bankify Oy"},"license":"MIT","dependencies":{"babel-plugin-syntax-async-functions":"^6.8.0"},"keywords":["react","react-native","animate","number","animation"],"devDependencies":{"babel":"^6.3.26","babel-core":"^6.9.0","babel-jest":"^6.0.1","babel-plugin-check-es2015-constants":"^6.8.0","babel-plugin-syntax-trailing-function-commas":"^6.8.0","babel-plugin-transform-class-properties":"^6.9.0","babel-plugin-transform-es2015-arrow-functions":"^6.8.0","babel-plugin-transform-es2015-block-scoping":"^6.9.0","babel-plugin-transform-es2015-classes":"^6.9.0","babel-plugin-transform-es2015-computed-properties":"^6.8.0","babel-plugin-transform-es2015-destructuring":"^6.9.0","babel-plugin-transform-es2015-for-of":"^6.8.0","babel-plugin-transform-es2015-parameters":"^6.9.0","babel-plugin-transform-es2015-shorthand-properties":"^6.8.0","babel-plugin-transform-es2015-spread":"^6.8.0","babel-plugin-transform-es2015-template-literals":"^6.8.0","babel-plugin-transform-flow-strip-types":"^6.8.0","babel-plugin-transform-object-assign":"^6.8.0","babel-plugin-transform-object-rest-spread":"^6.8.0","babel-plugin-transform-react-display-name":"^6.8.0","babel-plugin-transform-react-jsx":"^6.8.0","babel-plugin-transform-regenerator":"^6.9.0","babel-preset-airbnb":"^1.0.1","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","chai":"^3.5.0","enzyme":"^2.3.0","flow-bin":"^0.23.1","jsdom":"^9.1.0","mocha":"^2.4.5","react":"0.14.8","react-addons-test-utils":"0.14.8","react-dom":"0.14.8","react-native":"0.25.1","react-native-mock":"^0.1.0"},"repository":{"url":"https://github.com/bankifyio/react-native-animate-number.git"},"_id":"@bankify/react-native-animate-number@0.2.0","dist":{"shasum":"5a92de44294b168e22002721291002d9e954860e","integrity":"sha512-j4SgGwFhcoQz+6LrWPgiBJOeyrbgoVFUqgjaaoawiqsH8+bt6kW/bF6FJ3R/d9te94hMVuqsHDtnpc5TP3QFtw==","tarball":"https://registry.npmjs.org/@bankify/react-native-animate-number/-/react-native-animate-number-0.2.0.tgz","fileCount":14,"unpackedSize":4937191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcC7rnCRA9TVsSAnZWagAAQtgP/iJMBmd8AUfWNUTWD4ia\nuZyxXJVQTrD1h8+73w+IbnLl3SipJhr3Egp8WuwklTG30g5APbJtfi+CGymo\nJIMzo31MiYajkggW9CZIG1uAWe7dzaZEykeMT8KVa6P28kl9o7Eg4EkCrq6B\nRpn7w1XEihMRYz3jIp+6qCBLqrsnLbxqM5I6Nu8KhBT1DdZrlDnZY89VSKvb\nWNHhllmJ76Q4TjA03nEFji7TmVbvZons0Bwgw/2i6Y1Kdyv3hEB6jP5dy2EB\nzOpaKzdX4ljiWUvGMF+q78O9UH8PLpDfSAnW88mj+7VXX4yijf62RaiwjcfP\nOWgBmkjWjstwveg+vDrvHjjvcT5uUbaJCXcC+u1356tx2X777Fjoec+Gelmm\nw5Gdd8r2AlRzQ4l6ukNOy+6/lSn1978b0cS6HimuuYQzbHM0vS9FbobDdGdL\nuXYBnlpfUnu0KXTDVjvCWMcW72DeIN4LEMDdXHUxis5jAjg+OE5pK2D0O73I\nhZzYAluvrR7Xq8SHUkxMMUo26hyY6sBHU2oiNEaKNGiHAdxxlETGTdnl36cY\nZLO3vdCmLOQbIVmKyWEwFiUk9BQrMAWUcdXKRF4KiKw35RhL+57XDpFMZlBk\nTzQ4Ugep1p/ZTR3NVRDS/fWvOYqJI8tb8zWPqhbMTmJ+KgfR0YBrPGEVq5t8\njJyd\r\n=Kp3y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmmUuqW0CNC/eOdTi0sBmB9xPMEgGELc43yXJ+zHtBiQIhAJABHS+rK3NykFI6SKrcazi8v2lVoXKcGytCvkWN9Tr1"}]},"maintainers":[{"name":"jarvisluong","email":"contact@luongdanghai.com"}],"_npmUser":{"name":"jarvisluong","email":"contact@luongdanghai.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-animate-number_0.2.0_1544272614613_0.6533607203974485"},"_hasShrinkwrap":false},"0.2.1":{"name":"@bankify/react-native-animate-number","version":"0.2.1","description":"Animated number component","main":"dist/index.js","scripts":{"test":"./node_modules/mocha/bin/mocha -t 5000 --require react-native-mock/mock --compilers js:babel-core/register --recursive test/*.js"},"author":{"name":"Bankify Oy"},"license":"MIT","dependencies":{"babel-plugin-syntax-async-functions":"^6.8.0"},"keywords":["react","react-native","animate","number","animation"],"devDependencies":{"babel":"^6.3.26","babel-core":"^6.9.0","babel-jest":"^6.0.1","babel-plugin-check-es2015-constants":"^6.8.0","babel-plugin-syntax-trailing-function-commas":"^6.8.0","babel-plugin-transform-class-properties":"^6.9.0","babel-plugin-transform-es2015-arrow-functions":"^6.8.0","babel-plugin-transform-es2015-block-scoping":"^6.9.0","babel-plugin-transform-es2015-classes":"^6.9.0","babel-plugin-transform-es2015-computed-properties":"^6.8.0","babel-plugin-transform-es2015-destructuring":"^6.9.0","babel-plugin-transform-es2015-for-of":"^6.8.0","babel-plugin-transform-es2015-parameters":"^6.9.0","babel-plugin-transform-es2015-shorthand-properties":"^6.8.0","babel-plugin-transform-es2015-spread":"^6.8.0","babel-plugin-transform-es2015-template-literals":"^6.8.0","babel-plugin-transform-flow-strip-types":"^6.8.0","babel-plugin-transform-object-assign":"^6.8.0","babel-plugin-transform-object-rest-spread":"^6.8.0","babel-plugin-transform-react-display-name":"^6.8.0","babel-plugin-transform-react-jsx":"^6.8.0","babel-plugin-transform-regenerator":"^6.9.0","babel-preset-airbnb":"^1.0.1","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","chai":"^3.5.0","enzyme":"^2.3.0","flow-bin":"^0.23.1","jsdom":"^9.1.0","mocha":"^2.4.5","react":"0.14.8","react-addons-test-utils":"0.14.8","react-dom":"0.14.8","react-native":"0.25.1","react-native-mock":"^0.1.0"},"repository":{"url":"https://github.com/bankifyio/react-native-animate-number.git"},"_id":"@bankify/react-native-animate-number@0.2.1","dist":{"shasum":"80b2d700d0556b2d57ec1757a37454fcfbd968b8","integrity":"sha512-rBIiZZWAU6Nfr7bqJ6Dc0vAqk8Xf0LU3otrad9jbrJQOUJRUSUf9nWttQVLW4/alKTYq1kXkGYJ1l4dsTQbLmA==","tarball":"https://registry.npmjs.org/@bankify/react-native-animate-number/-/react-native-animate-number-0.2.1.tgz","fileCount":12,"unpackedSize":4933081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcC71HCRA9TVsSAnZWagAAJr0P/0r9700ICchB2zeLDl+O\nc3NUUveMks5keBiTAnTQNoGhAxfHq4udBlHrFqEjI72pyHyZn6kcZqsQ10xM\nwoZABjgRAqBjOTHmzOAf3McdZlSbexod710n8THpFCBn3cHN0qmZjsJxiS7M\nU1tW6BumcOow83LX8euJEQ2PG098LfpRn0/Fx2Gal55xrTno8zuOvfaZb+hp\nr7VUj5xrdfMgCb47vgPLYMgAkqas/CZd+1fcoU51rfzSwOepun7o23euWBAl\nYYoBGxYLTQMGqp48j7sQs9DzBr1d5l4spCuwU9UvdvfNoYBMmcmpTN3yvkP2\nZBnhCoNDgdEYXpltNeG1aDito9LkcCNgr87DF34Fgfwh/voLBTD8NQlumalS\nPKBZcd1y9AIMQQzC3aB3jS86syQTQSQaV1E0RRZLC7fxjEcYeGA/UBkaVwCM\nvAbhDw8Wk7IzGI726JZwBd7Rjh8xiDgae1MhB6Ts8jtEIUD0woqB7oZZd0NR\nUm2ScQqB6gm8yF7BpoPg2KW+NMa8bk1WmOKwQBT1UEQ4kBNmIHXo2aob59+M\nTkokIigBzZ5jL6eSEuv9M04umcvAdySwFwirUeYxRqMxDwbxHHwHHlUH4wlr\nj66GUPPR6n9Ed7N7X67lcL41hv+axlBBCgqXiCEzCGOqvWUM41q5HJVqvQuG\nyaJR\r\n=N3yj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOInqhQns6xcZNrPaNtFqSOP+Jj42Eym2KWIIGI33EpAiEAqpqhdUNE1uVLlaBcV8ETSZtHux07jkzoqalzgrFAVUw="}]},"maintainers":[{"name":"jarvisluong","email":"contact@luongdanghai.com"}],"_npmUser":{"name":"jarvisluong","email":"contact@luongdanghai.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-animate-number_0.2.1_1544273222959_0.1943047995158791"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-08T12:36:54.449Z","0.2.0":"2018-12-08T12:36:54.818Z","modified":"2022-04-04T17:42:12.562Z","0.2.1":"2018-12-08T12:47:03.247Z"},"maintainers":[{"email":"dinorabbitninja@gmail.com","name":"kienduong"},{"email":"jarvisluong@gmail.com","name":"jarvisluong"}],"description":"Animated number component","keywords":["react","react-native","animate","number","animation"],"repository":{"url":"https://github.com/bankifyio/react-native-animate-number.git"},"author":{"name":"Bankify Oy"},"license":"MIT","readme":"# react-native-animate-number [![npm version](https://badge.fury.io/js/%40bankify%2Freact-native-animate-number.svg)](https://badge.fury.io/js/%40bankify%2Freact-native-animate-number.svg) [![circle CI](https://circleci.com/gh/wkh237/react-native-animate-number/tree/master.svg?style=shield&circle-token=3c65a007e3c5da40a3d6be4060c64c4d361d2c9f)](https://circleci.com/gh/wkh237/react-native-animate-number/)\n\nCustomizable react native component for number animations.\n\n<img src=\"./img/animate-number-preview.gif\" width=\"256\">\n\n- [Examples](#user-content-exmples)\n - [Basic](#user-content-basic)\n - [Formatting](#user-content-formatting)\n - [Timing function](#user-content-timing-function)\n - [Counting](#user-content-timing-counting)\n- [Props](#user-content-props)\n\n## Installation\n\n```shell\n$ yarn add @bankify/react-native-animate-number\n```\n\n## Usage\n\n```jsx\nimport AnimateNumber from '@bankify/react-native-animate-number'\n```\n\n## Examples\n\n### Basic\n\nThe only required property is `value`, when this property changes, it automatically interpolates\nvalue and performs animation.\n\n```jsx\n\n<AnimateNumber value={100}/>\n\n```\n\n### Formatting\n\nYou can customize text format by specifying `formatter` prop, this property must be a `function`.\n\n```jsx\n\n<AnimateNumber value={100} formatter={(val) => {\n    return '$ ' + parseFloat(val).toFixed(2)\n  }}/>\n\n```\n\n### Timing function\n\nThere're 3 built-in timing functions which are `linear`, `easeIn`, and `easeOut`.\nIt is also possible customize your timing function, see examples bellow.\n\n#### Built-in timing function\n\n```jsx\n\n<AnimateNumber value={100} timing=\"linear\"/>\n<AnimateNumber value={100} timing=\"easeOut\"/>\n<AnimateNumber value={100} timing=\"easeIn\"/>\n\n```\n\n#### Customized timing function\n\nCustomized timing function returns a `number` which represents the length of animation frame.\n\n`interval`\n\nBasic interval length of animation frame, default value is `14` ms. You can change this value by `interval` prop.\n\n`progress`\n\nA float number between 0 to 1, which means the progress of animation.\n\n```jsx\n\n<AnimateNumber value={200}\n  countBy={1}\n  timing={(interval, progress) => {\n    // slow start, slow end\n    return interval * (1 - Math.sin(Math.PI*progress) )*10\n  }}/>\n\n```\n\nthe above example will make an animation like this\n\n![timing function example](img/timing1.gif)\n\n### Counting\n\nBy default this component calculates value increment of each animation frame,\nbut you can customize this rule by set prop `countBy`.\n\n```jsx\n\n<AnimateNumber value={100} countBy={1} />\n\n```\n\nBut keep in mind if the `countBy` value is relative small than `value`, the animation may persists for a very long time.\nLike the following example, it will tasks 150 seconds to finish the animation.\n\n```jsx\n\n<AnimateNumber value={10000} interval={15} countBy={1} />\n\n```\n\n### Customize content rendering\n\nBy default this component renders a ```<Text>``` component. You can provide your\nown component by setting the prop `renderContent`.\n\n```jsx\n<AnimateNumber value={100} countBy={1} renderContent={(displayValue) => #Your own component} />\n```\n\n## Props\n\n#### `value:number`(required)\n\nThe value of AnimateNumber component.\n\n#### `countBy:number`(optional default to `null`)\n\nSet this property to force the component's value increase/decrease by this number.\n\n#### `interval:number`(optional default to `14`)\n\nBase interval of each animation frame, in `ms`.\n\n#### `steps:number`(optional default to `45`)\n\nSet 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.\n\n#### `timing: 'linear' | 'easeOut' | 'easeIn' | () => number`\n\nCustom timing function or use a default timing function.\n\n#### `formatter: () => string`(optional)\n\nThis prop accepts a `function` which returns a `string` as displayed value.\n\n#### `renderContent: (displayValue: number) => React.Node` (optional)\n\nThis prop accepts a `function` with the displaying value as the parameter and\nexpects a React Node as returned value\n\n#### `onProgress: () => void`(optional)\n\nA function that triggers when text state has updated.\n\n#### `onFinish: () => void`(optional)\n\nA function that triggers when animation completes.\n","readmeFilename":"README.md"}