diff --git a/README.md b/README.md index a83fb29..0f54beb 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,21 @@ +# react-native-circular-progress + [![license](https://img.shields.io/github/license/mashape/apistatus.svg)]() [![Version](https://img.shields.io/npm/v/react-native-circular-progress.svg)](https://www.npmjs.com/package/react-native-circular-progress) [![npm](https://img.shields.io/npm/dt/react-native-circular-progress.svg)](https://www.npmjs.com/package/react-native-circular-progress) -# react-native-circular-progress React Native component for creating animated, circular progress. Useful for displaying users points for example. **Works on iOS & Android.** ## Example app + ![image](screenshot.gif) ## Installation 1. Install this component and `react-native-svg`: -`npm i --save react-native-circular-progress react-native-svg` + `npm i --save react-native-circular-progress react-native-svg` 2. Link native code for SVG: @@ -65,6 +67,7 @@ Finally, you can manually trigger a duration-based timing animation by putting a ... /> ``` + ```javascript this.circularProgress.animate(100, 8000, Easing.quad); // Will fill the progress bar linearly in 8 seconds ``` @@ -89,8 +92,9 @@ You can configure the passing by following props: - **arcSweepAngle** - the angle that you want your arc to sweep in the case where you don't want a full circle. Default is 360. - **children(fill)** - you can pass function as a child to receive current fill - **onAnimationComplete** - you can pass a callback function that will be invoked when animation completes. (see [here](https://facebook.github.io/react-native/docs/animated.html#working-with-animations)) +- **reAnimate(prefill, toVal, dur, ease)** - Run the animation again -## Running example app +## Running example app (Expo) ```sh git clone https://github.com/bgryszko/react-native-circular-progress.git @@ -99,13 +103,16 @@ yarn yarn start ``` -## Author +## Authors Bartosz Gryszko (b@gryszko.com) +Markus Lindqvist +Special thanks to all contributors! ## License MIT ## Special thanks + Special 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. diff --git a/example/App.js b/example/App.js index ea603f9..98e65a9 100644 --- a/example/App.js +++ b/example/App.js @@ -28,7 +28,7 @@ export default class App extends React.Component { }, onPanResponderTerminationRequest: (evt, gestureState) => true, onPanResponderRelease: (evt, gestureState) => { - this.refs.circularProgress.animate(100, 2000); + this.refs.circularProgress.animate(100, 3000); let points = this.state.points + this.state.pointsDelta; console.log(Math.min(points, MAX_POINTS)); this.setState({ diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..163d2f2 --- /dev/null +++ b/example/README.md @@ -0,0 +1,8 @@ +# Example App + +First install Expo. Then run the Expo app: + +```bash +npm i +yarn start +``` \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 303d548..448636a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", "requires": { - "js-tokens": "3.0.2" + "js-tokens": "^3.0.0" } }, "object-assign": { @@ -27,8 +27,8 @@ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", "requires": { - "loose-envify": "1.3.1", - "object-assign": "4.1.1" + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" } } } diff --git a/package.json b/package.json index f5fa6e3..158625b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-circular-progress", - "version": "1.0.0", + "version": "1.1.0", "description": "React Native component for creating animated, circular progress with react-native-svg", "main": "index.js", "repository": { @@ -25,11 +25,11 @@ }, "homepage": "https://github.com/bgryszko/react-native-circular-progress", "dependencies": { - "prop-types": "^15.6.0" + "prop-types": "^15.6.2" }, "peerDependencies": { - "react": ">=16.0.0", - "react-native": ">=0.39.0", - "react-native-svg": "^6.3.1" + "react": ">=16.7.0", + "react-native": "^0.57.8", + "react-native-svg": "^8.0.10" } }