Add new example app. Also fix some type definitions. Version 1.2.0

example-app/.gitignore

@@ -5,3 +5,6 @@ npm-debug.*
 *.p12
 *.key
 *.mobileprovision
+*.orig.*
+web-build/
+web-report/

example-app/App.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
-import { StyleSheet, Text, PanResponder, View } from 'react-native';
+import { StyleSheet, Text, PanResponder, View, PanResponderInstance } from 'react-native';
 import { AnimatedCircularProgress } from 'react-native-circular-progress';
 
 const MAX_POINTS = 500;
-
 export default class App extends React.Component {
   state = {
     isMoving: false,
     pointsDelta: 0,
     points: 325,
   };
+
+  _panResponder : PanResponderInstance = undefined;
+
+  circularProgress() {
+    return this.refs.circularProgress as AnimatedCircularProgress;
+  }
+
   componentWillMount() {
     this._panResponder = PanResponder.create({
       onStartShouldSetPanResponder: (evt, gestureState) => true,
@@ -22,13 +28,13 @@ export default class App extends React.Component {
       },
 
       onPanResponderMove: (evt, gestureState) => {
-        this.refs.circularProgress.animate(0, 0);
+        this.circularProgress().animate(0, 0);
         // For each 2 pixels add or subtract 1 point
         this.setState({ pointsDelta: Math.round(-gestureState.dy / 2) });
       },
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderRelease: (evt, gestureState) => {
-        this.refs.circularProgress.animate(100, 3000);
+        this.circularProgress().animate(100, 3000);
         let points = this.state.points + this.state.pointsDelta;
         console.log(Math.min(points, MAX_POINTS));
         this.setState({
@@ -39,10 +45,9 @@ export default class App extends React.Component {
       },
     });
   }
-
+  
   render() {
     const fill = (this.state.points / MAX_POINTS) * 100;
-
     return (
       <View style={styles.container} {...this._panResponder.panHandlers}>
         <AnimatedCircularProgress

example-app/app.json

@@ -1,11 +1,14 @@
 {
   "expo": {
-    "name": "example",
-    "description": "Example project for react-native-circular-progress.",
-    "slug": "example",
+    "name": "circular-progress-example",
+    "slug": "example-app",
     "privacy": "public",
-    "sdkVersion": "31.0.0",
-    "platforms": ["ios", "android"],
+    "sdkVersion": "33.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -24,4 +27,4 @@
       "supportsTablet": true
     }
   }
-}
+}

example-app/package.json

@@ -1,20 +1,25 @@
 {
-  "name": "empty-project-template",
   "main": "node_modules/expo/AppEntry.js",
-  "private": true,
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
+    "web": "expo start --web",
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "^31.0.2",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
-    "react-native-circular-progress": "git+https://github.com/bgryszko/react-native-circular-progress.git"
+    "expo": "^33.0.0",
+    "react": "16.8.3",
+    "react-dom": "^16.8.6",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-circular-progress": "git+https://github.com/bgryszko/react-native-circular-progress.git",
+    "react-native-web": "^0.11.4"
   },
   "devDependencies": {
-    "babel-preset-expo": "^5.0.0"
-  }
+    "@types/react": "^16.8.19",
+    "@types/react-native": "^0.57.60",
+    "babel-preset-expo": "^5.1.1",
+    "typescript": "^3.4.5"
+  },
+  "private": true
 }

example-app/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "lib": ["dom", "esnext"],
+    "jsx": "react-native",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
+  }
+}

example/README.md

@@ -1,8 +0,0 @@
-# Example App
-
-First install Expo. Then run the Expo app:
-
-```bash
-npm i
-yarn start
-```

index.d.ts

@@ -133,7 +133,7 @@ declare module 'react-native-circular-progress' {
      * @param {number} duration
      * @param {Function} ease
      */
-    animate: (toVal: number, duration: number, ease: Function) => void
+    animate: (toVal: number, duration: number, ease?: Function) => void
 
     /**
      * Re-run animation with a specified prefill-value
@@ -143,6 +143,6 @@ declare module 'react-native-circular-progress' {
      * @param {number} duration
      * @param {Function} ease
      */
-    reAnimate: (prefill: number, toVal: number, duration: number, ease: Function) => void
+    reAnimate: (prefill: number, toVal: number, duration: number, ease?: Function) => void
   }
 }

package-lock.json

@@ -1,20 +1,20 @@
 {
   "name": "react-native-circular-progress",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "js-tokens": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "loose-envify": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
-      "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "requires": {
-        "js-tokens": "^3.0.0"
+        "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
     "object-assign": {
@@ -23,13 +23,19 @@
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "prop-types": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
       "requires": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
       }
+    },
+    "react-is": {
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+      "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-circular-progress",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React Native component for creating animated, circular progress with react-native-svg",
   "main": "index.js",
   "repository": {
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/bgryszko/react-native-circular-progress",
   "dependencies": {
-    "prop-types": "^15.6.2"
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": ">=16.0.0",