{"_id":"@2hats/react-native-circular-progress","_rev":"5-04edd1bbc877c9c382ce7c85f5fc7416","name":"@2hats/react-native-circular-progress","description":"React Native component for creating animated, circular progress with ReactART","dist-tags":{"latest":"0.1.2"},"versions":{"0.0.8":{"name":"@2hats/react-native-circular-progress","version":"0.0.8","description":"React Native component for creating animated, circular progress with ReactART","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bgryszko/react-native-circular-progress.git"},"keywords":["react","react-native","react-component","progress","chart","react-art","art"],"author":{"name":"Bart Gryszko","email":"b@gryszko.com"},"license":"MIT","bugs":{"url":"https://github.com/bgryszko/react-native-circular-progress/issues"},"homepage":"https://github.com/bgryszko/react-native-circular-progress","dependencies":{"art":"^0.10.0"},"gitHead":"9801a6e4fb244f657ddca1ac67c9cdaf74238cd9","_id":"@2hats/react-native-circular-progress@0.0.8","_npmVersion":"5.3.0","_nodeVersion":"7.5.0","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-Lznf0aE47n1z07zVOHD0exxidZCRDhiaOd+5iUTy9eEfA1Rw59YyqAmdd1h/2vTWiJWjBu4AYet89T4fPhLS1A==","shasum":"1321f873ac3ff3124a28177df10eef4d75ffef69","tarball":"https://registry.npmjs.org/@2hats/react-native-circular-progress/-/react-native-circular-progress-0.0.8.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfevljuCCEJCgyIVOCzFhPLaNwkA7iMzwaDN/yu3BlKAiEAlEH/qd9ddofxg2UXM40EdQFZf2LVFE+ryiLndsi2yPc="}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-circular-progress-0.0.8.tgz_1502346508522_0.600670478772372"}},"0.0.9":{"name":"@2hats/react-native-circular-progress","version":"0.0.9","description":"React Native component for creating animated, circular progress with ReactART","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bgryszko/react-native-circular-progress.git"},"keywords":["react","react-native","react-component","progress","chart","react-art","art"],"author":{"name":"Bart Gryszko","email":"b@gryszko.com"},"license":"MIT","bugs":{"url":"https://github.com/bgryszko/react-native-circular-progress/issues"},"homepage":"https://github.com/bgryszko/react-native-circular-progress","dependencies":{"art":"^0.10.0"},"gitHead":"94b7f98b9e44cc1cfaa2fa29a55fa3890108c027","_id":"@2hats/react-native-circular-progress@0.0.9","_npmVersion":"5.3.0","_nodeVersion":"7.5.0","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-rwYuU1ygXlS1N6eh6qILPi/saV3usqUQIrl94+CCNsdJRCQWUUUQi+0Wg6UE1YYgT6ZhO1O04vmfxsie0wNLBg==","shasum":"b4e5479065981b9962214c7dc6ecff52a91a606d","tarball":"https://registry.npmjs.org/@2hats/react-native-circular-progress/-/react-native-circular-progress-0.0.9.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGE4bYF0SObXvpTRkMFdEm3mkAuDmh0LVA4HOLOR/v/dAiEAw+S85BOM3/L1TWcUeuABw/G+AGV/4vh3pQEM5t0EZdY="}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-circular-progress-0.0.9.tgz_1502346934490_0.17164207575842738"}},"0.1.0":{"name":"@2hats/react-native-circular-progress","version":"0.1.0","description":"React Native component for creating animated, circular progress with ReactART","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bgryszko/react-native-circular-progress.git"},"keywords":["react","react-native","react-component","progress","chart","react-art","art"],"author":{"name":"Bart Gryszko","email":"b@gryszko.com"},"license":"MIT","bugs":{"url":"https://github.com/bgryszko/react-native-circular-progress/issues"},"homepage":"https://github.com/bgryszko/react-native-circular-progress","dependencies":{"art":"^0.10.0"},"gitHead":"9be9ad56bd7ccad4289294ca89884b8ba26df49d","_id":"@2hats/react-native-circular-progress@0.1.0","_npmVersion":"5.3.0","_nodeVersion":"7.5.0","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-0hDtO2wVHh7eqviUmGhDSf+LnkbGeF8+oAwX/odnuglruqIxI3CKaD7M3ALRybbfGAggwZ/TE6fYFhPqruweMQ==","shasum":"c04a3b2026e03a0d32b35aec8d8898ab716a497d","tarball":"https://registry.npmjs.org/@2hats/react-native-circular-progress/-/react-native-circular-progress-0.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElIIxSBhLUK/HmaVNDCMN5NB1/EoprVYCQSjINGRZpgAiAR3/ZFVypk02zSXL+RZLhKZra4sih4WwT87iXmSUkhQQ=="}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-circular-progress-0.1.0.tgz_1502409227736_0.608811893267557"}},"0.1.1":{"name":"@2hats/react-native-circular-progress","version":"0.1.1","description":"React Native component for creating animated, circular progress with ReactART","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bgryszko/react-native-circular-progress.git"},"keywords":["react","react-native","react-component","progress","chart","react-art","art"],"author":{"name":"Bart Gryszko","email":"b@gryszko.com"},"license":"MIT","bugs":{"url":"https://github.com/bgryszko/react-native-circular-progress/issues"},"homepage":"https://github.com/bgryszko/react-native-circular-progress","dependencies":{"art":"^0.10.0"},"gitHead":"808f081ddc97177e3668c190538b43c5369d1bc3","_id":"@2hats/react-native-circular-progress@0.1.1","_npmVersion":"5.3.0","_nodeVersion":"7.5.0","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-lWo3vFX1Avk0/krWYuY2Rs69w3ys1W952esucWIRfc3N079zMz5mV5RZjKLP/VJa4KD3N/E25/wB3QfP5kdbEg==","shasum":"172b3dc5ea3eac6a09b5c746263a3a528dda4731","tarball":"https://registry.npmjs.org/@2hats/react-native-circular-progress/-/react-native-circular-progress-0.1.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICOg7B3iiPI1oGFLaB6aM0321E0h09x+mUnYVu6eSNv4AiAAkAtWkbotIrLMQmUkhFBda8Vo4XPGVPydWCxpu/A2JQ=="}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-circular-progress-0.1.1.tgz_1502410015276_0.9243987565860152"}},"0.1.2":{"name":"@2hats/react-native-circular-progress","version":"0.1.2","description":"React Native component for creating animated, circular progress with ReactART","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bgryszko/react-native-circular-progress.git"},"keywords":["react","react-native","react-component","progress","chart","react-art","art"],"author":{"name":"Bart Gryszko","email":"b@gryszko.com"},"license":"MIT","bugs":{"url":"https://github.com/bgryszko/react-native-circular-progress/issues"},"homepage":"https://github.com/bgryszko/react-native-circular-progress","dependencies":{"art":"^0.10.0"},"gitHead":"a02db474fe182a404eb0850a3529e4e07aa9a0ad","_id":"@2hats/react-native-circular-progress@0.1.2","_npmVersion":"5.3.0","_nodeVersion":"8.1.2","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-SZ7lFGBFc/QhF1F6m2JANr0UImM97TdKrpzT5fDtve8Uj9QL/QHkS0820NLI2h86fGpfaJ0CHFSFPH7RSXU4yg==","shasum":"831eeebacdee22c770e7a4315765179096367a50","tarball":"https://registry.npmjs.org/@2hats/react-native-circular-progress/-/react-native-circular-progress-0.1.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9ga3kDMZommyLwTfGO9ZypITzybjjXyOUHmbAkFmlCAIgQr/px2UF7TP7/YEnOmwk7rVnz2QXCinq3xphKg1cemg="}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-circular-progress-0.1.2.tgz_1503296965981_0.8447187934070826"}}},"readme":"[]()\n[](https://www.npmjs.com/package/react-native-circular-progress)\n[](https://www.npmjs.com/package/react-native-circular-progress)\n[](https://twitter.com/bgryszko)\n\n# react-native-circular-progress\n\nReact Native component for creating animated, circular progress with ReactART. Useful for displaying users points for example. **Works on iOS & Android.**\n\n---\n**Looking for a circular slider?** Take a look at my other component – [react-native-circular-slider](https://github.com/bgryszko/react-native-circular-slider) :alarm_clock:\n\n----\n\n## Example app\n\n\n## Installation\n\n1. Install library `npm i --save react-native-circular-progress`\n2. Link ART library to your ReactNative project ([how to link a library?](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content)). You'll find ReactART library in `node_modules/react-native/Libraries/ART/ART.xcodeproj`\n\n## Usage\n\nImport CircularProgress or AnimatedCircularProgress.\n\n```js\nimport { AnimatedCircularProgress } from 'react-native-circular-progress';\n```\n\nUse as follows:\n\n```jsx\n\n```\n\nYou can also define a function, that'll receive current progress and for example display it inside the circle:\n\n```jsx\n\n {\n (fill) => (\n \n { this.state.fill }\n \n )\n }\n\n```\n\nFinally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the `performLinearAnimation(toValue, duration)` function like so:\n```jsx\n\n```\n```javascript\nthis.refs.circularProgress.performLinearAnimation(100, 8000); // Will fill the progress bar linearly in 8 seconds\n```\n\n## Configuration\n\nYou can configure the passing by following props:\n\n- **size** – width and height of the circle\n- **width** - thickness of the line\n- **fill** - current, percentage fill (from 0 to 100)\n- **prefill** - percentage fill before the animation (from 0 to 100)\n- **tintColor** - color of a progress line\n- **backgroundColor** - color of a background for progress line\n- **rotation** - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360\n- **tension** - the tension value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api))\n- **friction** - the friction value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api))\n- **linecap** - the shape to be used at the ends of the circle. Possible values: butt (default), round or square. (see [here](https://developer.mozilla.org/en/docs/Web/SVG/Attribute/stroke-linecap))\n- **children(fill)** - you can pass function as a child to receive current fill\n\n\n## Working example app\n\nYou can find working example in the `example` directory of this repository. You can run it by:\n\n### iOS\n\n```sh\ngit clone https://github.com/bgryszko/react-native-circular-progress.git\ncd react-native-circular-progress/example/ProgressChart\nnpm install\nopen ios/ProgressChart.xcodeproj\n```\nXCode will open. Click Run button and that's it.\n\n### Android\n\nOpen your emulator and run:\n\n```sh\ngit clone https://github.com/bgryszko/react-native-circular-progress.git\ncd react-native-circular-progress/example/ProgressChart\nnpm install\nreact-native run-android\n```\n\n## Author\n\nBartosz Gryszko (b@gryszko.com)\n\nFor new components and updates [follow me on twitter](http://twitter.com/bgryszko).\n\n\n## License\n\nMIT\n\n\n## Special thanks\nSpecial thanks to [Chalk+Chisel](http://chalkchisel.com) for creating working environment where people grow. This component was created for one of the projects we're working on.\n","maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"time":{"modified":"2022-04-04T10:42:17.746Z","created":"2017-08-10T06:28:28.693Z","0.0.8":"2017-08-10T06:28:28.693Z","0.0.9":"2017-08-10T06:35:34.675Z","0.1.0":"2017-08-10T23:53:47.835Z","0.1.1":"2017-08-11T00:06:55.369Z","0.1.2":"2017-08-21T06:29:26.073Z"},"homepage":"https://github.com/bgryszko/react-native-circular-progress","keywords":["react","react-native","react-component","progress","chart","react-art","art"],"repository":{"type":"git","url":"git+ssh://git@github.com/bgryszko/react-native-circular-progress.git"},"author":{"name":"Bart Gryszko","email":"b@gryszko.com"},"bugs":{"url":"https://github.com/bgryszko/react-native-circular-progress/issues"},"license":"MIT","readmeFilename":"README.md"}