Update for v2.1.0.

RobertFOConnor · Oct 22, 2023 · 60575aa · 60575aa
1 parent a1398d3
commit 60575aa
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -9,21 +9,6 @@ React Native component for creating natively animated, circular progress wheel.
 
 ![image](preview.gif)
 
-## Why use this component
-
-This implementation is 100% JS, meaning you do not need to use any additional libraries such as 'react-native-svg' and you don't need to do any linking. 😱
-This component also sets `useNativeDriver: true`, meaning that all animation is done smoothly on the native side.💖
-
-This package is also SUPER-LIGHTWEIGHT.
-
-Let's compare:
-
-react-native-progress-wheel: Unpacked size: 8.74 kB (this library)
-
-react-native-circular-progress: Unpacked size: 3.38 MB (other popular library)
-
-![image](performance_compare.gif)
-
 ## Installation
 
     yarn add react-native-progress-wheel
@@ -52,6 +37,23 @@ The following example will animate from 0% to 45% at a duration of 3 seconds.
 />
 ```
 
+
+The progress wheel can display progess as titles in the center of the circle.
+
+![image](titles.gif)
+
+```js
+<AnimatedProgressWheel
+        max={40}
+        showProgressLabel={true}
+        rotation={'-90deg'}
+        labelStyle={styles.progressLabel}
+        subtitle={'Questions out of 40'}
+        subtitleStyle={styles.subtitle}
+        {...{color, backgroundColor, size, width, duration, progress, rounded}}
+      />
+```
+
 The progress wheel can be updated using state variables.
 
 ```js
@@ -72,15 +74,38 @@ size                | number                 | 200                     | Width a
 width               | number                 | 25                      | Thickness of the progress line
 color               | string                 | white                   | Color of the progress line
 backgroundColor     | string                 | gray                    | Color of the background progress line
-progress            | number (0, 100)        | 0                       | Angle from which the progress starts from
-duration            | number                 | 600                     | Duration at which to animate the progress.
+progress            | number                 | 0                       | Angle from which the progress starts from
+max                 | number                 | 100                     | Max value for the progress wheel
+rotation            | string                 | 0deg                    | Set starting angle of progress
+duration            | number                 | 600                     | Duration at which to animate the progress
 rounded             | boolean                | false                   | Rounds edges
-animateFromValue    | number (0, 100)        | -1                      | Starting value to animate to progres when component is mounted
+animateFromValue    | number                 | -1                      | Starting value to animate to progres when component is mounted
 containerColor      | string                 | null                    | Container color
 delay               | number                 | 0                       | Delay for animation
 easing              | EasingFunction         | null                    | Easing for animation
+showProgressLabel   | boolean                | false                   | Show the progress as text in the circle
+labelStyle          | TextStyle              | {}                      | Style object for progress label
+subtitle            | string                 | null                    | Text displayed directly below progress label
+subtitleStyle       | TextStyle              | {}                      | Style object for subtitle
+showPercentageSymbol| boolean                | false                   | Show the progress as a percentage
 onAnimationComplete | function               | null                    | Called when animation finishes
 
+
+## Why use this component
+
+This implementation is 100% base react-native, meaning you do not need to use any additional libraries such as 'react-native-svg' or 'react-native-reanimated'.
+This component also sets `useNativeDriver: true`, meaning that all animation is done smoothly on the native side.💖
+
+This package is also SUPER-LIGHTWEIGHT.
+
+Let's compare:
+
+react-native-progress-wheel: Unpacked size: 8.74 kB (this library)
+
+react-native-circular-progress: Unpacked size: 3.38 MB (other popular library)
+
+![image](performance_compare.gif)
+
 ## FAQ
 Q: Does it work in Expo?
 A: Yes it does.

diff --git a/ReactNativeProgressWheel/AnimatedProgressWheel/index.tsx b/ReactNativeProgressWheel/AnimatedProgressWheel/index.tsx
@@ -1,5 +1,13 @@
-import React, {Fragment, useEffect, useMemo} from 'react';
-import {Animated, EasingFunction, StyleSheet, View} from 'react-native';
+import React, {Fragment, useEffect, useMemo, useState} from 'react';
+import {
+  Animated,
+  EasingFunction,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 interface Props {
   color: string;
@@ -11,7 +19,14 @@ interface Props {
   animateFromValue?: number;
   containerColor?: string;
   rounded?: boolean;
+  showProgressLabel?: boolean;
+  showPercentageSymbol?: boolean;
   delay?: number;
+  max?: number;
+  subtitle?: string;
+  rotation?: string;
+  labelStyle?: ViewStyle | TextStyle;
+  subtitleStyle?: ViewStyle | TextStyle;
   easing?: EasingFunction;
   onAnimationComplete?: (status: any) => void;
 }
@@ -24,14 +39,33 @@ const AnimatedProgressWheel = ({
   size,
   width,
   color = 'white',
+  rotation = '0deg',
+  subtitle = '',
   delay = 0,
+  max = 100,
   rounded = false,
+  showProgressLabel = false,
+  showPercentageSymbol = false,
   backgroundColor = 'grey',
+  labelStyle = {},
+  subtitleStyle = {},
   easing,
   containerColor,
 }: Props) => {
+  const [labelValue, setLabelValue] = useState(0);
   const animatedVal = useMemo(() => new Animated.Value(0), []);
 
+  useEffect(() => {
+    if (showProgressLabel) {
+      animatedVal.addListener(({value}) =>
+        setLabelValue(Math.floor((value / 100) * max)),
+      );
+    }
+    return () => {
+      animatedVal.removeAllListeners();
+    };
+  }, [animatedVal, showProgressLabel, max]);
+
   const styles = useMemo(
     () =>
       generateStyles({
@@ -48,8 +82,8 @@ const AnimatedProgressWheel = ({
     if (animateFromValue >= 0) {
       animatedVal.setValue(animateFromValue);
     }
-    animateTo(progress);
-  }, [animateFromValue, progress]);
+    animateTo((progress / max) * 100);
+  }, [animateFromValue, progress, max]);
 
   const interpolateAnimVal = (
     inputRange: number[],
@@ -144,7 +178,24 @@ const AnimatedProgressWheel = ({
     </Fragment>
   );
 
-  return <View style={styles.container}>{renderLoader()}</View>;
+  return (
+    <View style={styles.container}>
+      <View style={{transform: [{rotate: rotation}]}}>{renderLoader()}</View>
+      {showProgressLabel && (
+        <View style={styles.labelContainer}>
+          {labelValue !== null && (
+            <Text style={[styles.label, labelStyle]}>
+              {labelValue}
+              {showPercentageSymbol ? '%' : ''}
+            </Text>
+          )}
+          {!!subtitle && (
+            <Text style={[styles.label, subtitleStyle]}>{subtitle}</Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
 };
 
 const generateStyles = ({
@@ -216,6 +267,18 @@ const generateStyles = ({
       width: size,
       height: size,
     },
+    labelContainer: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    label: {
+      fontSize: 20,
+    },
   });
 
 export default AnimatedProgressWheel;
diff --git a/ReactNativeProgressWheel/App.tsx b/ReactNativeProgressWheel/App.tsx
@@ -3,37 +3,26 @@ import {StyleSheet, View} from 'react-native';
 import AnimatedProgressWheel from './AnimatedProgressWheel';
 
 function App(): JSX.Element {
-  const size = 300;
-  const progress = 100;
+  const size = 240;
+  const progress = 36;
   const duration = 2500;
-  const width = 24;
+  const width = 10;
   const rounded = true;
+  const color = '#49ccf9';
+  const backgroundColor = '#000079';
 
   return (
     <View style={styles.container}>
       <AnimatedProgressWheel
-        delay={800}
-        color={'#f9114f'}
-        backgroundColor={'#340111'}
-        {...{size, width, duration, progress, rounded}}
+        max={40}
+        showProgressLabel={true}
+        showPercentageSymbol={false}
+        rotation={'-90deg'}
+        labelStyle={styles.progressLabel}
+        subtitle={'Questions out of 40'}
+        subtitleStyle={styles.subtitle}
+        {...{color, backgroundColor, size, width, duration, progress, rounded}}
       />
-      <View style={styles.absolute}>
-        <AnimatedProgressWheel
-          size={300 - width * 2 + 2}
-          delay={300}
-          color={'#ccfc00'}
-          backgroundColor={'#1b3400'}
-          {...{width, duration, progress, rounded}}
-        />
-      </View>
-      <View style={styles.absolute}>
-        <AnimatedProgressWheel
-          size={300 - width * 4 + 4}
-          color={'#09e4e0'}
-          backgroundColor={'#012150'}
-          {...{width, duration, progress, rounded}}
-        />
-      </View>
     </View>
   );
 }
@@ -49,6 +38,15 @@ const styles = StyleSheet.create({
   absolute: {
     position: 'absolute',
   },
+  progressLabel: {
+    color: '#49ccf9',
+    fontWeight: 'bold',
+    fontSize: 56,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#49ccf9',
+  },
 });
 
 export default App;
diff --git a/npm/README.md b/npm/README.md
@@ -9,21 +9,6 @@ React Native component for creating natively animated, circular progress wheel.
 
 ![image](preview.gif)
 
-## Why use this component
-
-This implementation is 100% JS, meaning you do not need to use any additional libraries such as 'react-native-svg' and you don't need to do any linking. 😱
-This component also sets `useNativeDriver: true`, meaning that all animation is done smoothly on the native side.💖
-
-This package is also SUPER-LIGHTWEIGHT.
-
-Let's compare:
-
-react-native-progress-wheel: Unpacked size: 8.74 kB (this library)
-
-react-native-circular-progress: Unpacked size: 3.38 MB (other popular library)
-
-![image](performance_compare.gif)
-
 ## Installation
 
     yarn add react-native-progress-wheel
@@ -52,6 +37,23 @@ The following example will animate from 0% to 45% at a duration of 3 seconds.
 />
 ```
 
+
+The progress wheel can display progess as titles in the center of the circle.
+
+![image](titles.gif)
+
+```js
+<AnimatedProgressWheel
+        max={40}
+        showProgressLabel={true}
+        rotation={'-90deg'}
+        labelStyle={styles.progressLabel}
+        subtitle={'Questions out of 40'}
+        subtitleStyle={styles.subtitle}
+        {...{color, backgroundColor, size, width, duration, progress, rounded}}
+      />
+```
+
 The progress wheel can be updated using state variables.
 
 ```js
@@ -72,15 +74,38 @@ size                | number                 | 200                     | Width a
 width               | number                 | 25                      | Thickness of the progress line
 color               | string                 | white                   | Color of the progress line
 backgroundColor     | string                 | gray                    | Color of the background progress line
-progress            | number (0, 100)        | 0                       | Angle from which the progress starts from
-duration            | number                 | 600                     | Duration at which to animate the progress.
+progress            | number                 | 0                       | Angle from which the progress starts from
+max                 | number                 | 100                     | Max value for the progress wheel
+rotation            | string                 | 0deg                    | Set starting angle of progress
+duration            | number                 | 600                     | Duration at which to animate the progress
 rounded             | boolean                | false                   | Rounds edges
-animateFromValue    | number (0, 100)        | -1                      | Starting value to animate to progres when component is mounted
+animateFromValue    | number                 | -1                      | Starting value to animate to progres when component is mounted
 containerColor      | string                 | null                    | Container color
 delay               | number                 | 0                       | Delay for animation
 easing              | EasingFunction         | null                    | Easing for animation
+showProgressLabel   | boolean                | false                   | Show the progress as text in the circle
+labelStyle          | TextStyle              | {}                      | Style object for progress label
+subtitle            | string                 | null                    | Text displayed directly below progress label
+subtitleStyle       | TextStyle              | {}                      | Style object for subtitle
+showPercentageSymbol| boolean                | false                   | Show the progress as a percentage
 onAnimationComplete | function               | null                    | Called when animation finishes
 
+
+## Why use this component
+
+This implementation is 100% base react-native, meaning you do not need to use any additional libraries such as 'react-native-svg' or 'react-native-reanimated'.
+This component also sets `useNativeDriver: true`, meaning that all animation is done smoothly on the native side.💖
+
+This package is also SUPER-LIGHTWEIGHT.
+
+Let's compare:
+
+react-native-progress-wheel: Unpacked size: 8.74 kB (this library)
+
+react-native-circular-progress: Unpacked size: 3.38 MB (other popular library)
+
+![image](performance_compare.gif)
+
 ## FAQ
 Q: Does it work in Expo?
 A: Yes it does.

diff --git a/npm/dist/index.d.ts b/npm/dist/index.d.ts
@@ -1,18 +1,25 @@
 import React from 'react';
-import { EasingFunction } from 'react-native';
+import { EasingFunction, TextStyle, ViewStyle } from 'react-native';
 interface Props {
     color: string;
     backgroundColor: string;
     size: number;
     width: number;
     progress?: number;
     duration?: number;
-    rounded?: boolean;
     animateFromValue?: number;
     containerColor?: string;
+    rounded?: boolean;
+    showProgressLabel?: boolean;
+    showPercentageSymbol?: boolean;
     delay?: number;
+    max?: number;
+    subtitle?: string;
+    rotation?: string;
+    labelStyle?: ViewStyle | TextStyle;
+    subtitleStyle?: ViewStyle | TextStyle;
     easing?: EasingFunction;
     onAnimationComplete?: (status: any) => void;
 }
-declare const AnimatedProgressWheel: ({ animateFromValue, progress, duration, onAnimationComplete, size, width, color, delay, rounded, backgroundColor, easing, containerColor, }: Props) => React.JSX.Element;
+declare const AnimatedProgressWheel: ({ animateFromValue, progress, duration, onAnimationComplete, size, width, color, rotation, subtitle, delay, max, rounded, showProgressLabel, showPercentageSymbol, backgroundColor, labelStyle, subtitleStyle, easing, containerColor, }: Props) => React.JSX.Element;
 export default AnimatedProgressWheel;