fix: progress bar animated value

example/src/Examples/ProgressBarExample.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Animated } from 'react-native';
 
 import {
   Button,
@@ -8,14 +8,37 @@ import {
   MD2Colors,
   MD3Colors,
   useTheme,
+  ProgressBarProps,
 } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
+class ClassProgressBar extends React.Component {
+  constructor(props: ProgressBarProps) {
+    super(props);
+  }
+
+  render() {
+    return <ProgressBar {...this.props} />;
+  }
+}
+
+const AnimatedProgressBar = Animated.createAnimatedComponent(ClassProgressBar);
+
 const ProgressBarExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
   const [progress, setProgress] = React.useState<number>(0.3);
-  const { isV3 } = useTheme();
+  const theme = useTheme();
+  const { isV3 } = theme;
+  const progressBarValue = React.useRef(new Animated.Value(0));
+
+  const customAnim = () => {
+    Animated.timing(progressBarValue.current, {
+      toValue: 1,
+      duration: 2000,
+      useNativeDriver: false,
+    }).start();
+  };
 
   return (
     <ScreenWrapper contentContainerStyle={styles.container}>
@@ -63,6 +86,14 @@ const ProgressBarExample = () => {
           style={styles.customHeight}
         />
       </View>
+
+      <Button onPress={customAnim}>Animated Value</Button>
+      <AnimatedProgressBar
+        style={styles.progressBar}
+        animatedValue={progressBarValue.current}
+        color={MD2Colors.green200}
+        theme={theme}
+      />
     </ScreenWrapper>
   );
 };
@@ -79,6 +110,10 @@ const styles = StyleSheet.create({
   customHeight: {
     height: 20,
   },
+  progressBar: {
+    borderRadius: 7.5,
+    height: 15,
+  },
 });
 
 export default ProgressBarExample;

src/components/ProgressBar.tsx

@@ -16,8 +16,14 @@ import { withTheme } from '../core/theming';
 import type { Theme } from '../types';
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
+  /**
+   * Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.
+   * Should not be used with progress prop.
+   */
+  animatedValue?: number;
   /**
    * Progress value (between 0 and 1).
+   * Should not be used with animatedValue prop.
    */
   progress?: number;
   /**
@@ -69,6 +75,7 @@ const ProgressBar = ({
   progress = 0,
   visible = true,
   theme,
+  animatedValue,
   ...rest
 }: Props) => {
   const { current: timer } = React.useRef<Animated.Value>(
@@ -92,6 +99,10 @@ const ProgressBar = ({
       isInteraction: false,
     }).start();
 
+    if (animatedValue && animatedValue >= 0) {
+      return;
+    }
+
     // Animate progress bar
     if (indeterminate) {
       if (!indeterminateAnimation.current) {
@@ -116,7 +127,13 @@ const ProgressBar = ({
         isInteraction: false,
       }).start();
     }
-  }, [scale, timer, progress, indeterminate, fade]);
+    /**
+     * We shouldn't add @param animatedValue to the
+     * deps array, to avoid the unnecessary loop.
+     * We can only check if the prop is passed initially,
+     * and we do early return.
+     */
+  }, [fade, scale, indeterminate, timer, progress]);
 
   const stopAnimation = React.useCallback(() => {
     // Stop indeterminate animation
@@ -137,6 +154,12 @@ const ProgressBar = ({
     else stopAnimation();
   }, [visible, startAnimation, stopAnimation]);
 
+  React.useEffect(() => {
+    if (animatedValue && animatedValue >= 0) {
+      timer.setValue(animatedValue);
+    }
+  }, [animatedValue, timer]);
+
   React.useEffect(() => {
     // Start animation the very first time when previously the width was unclear
     if (visible && prevWidth === 0) {