title: React native animation progress bar
body: <p>I am trying to build a progress bar for my react-native project
  It should be a generic component to be used in many places.
  Please see my code:</p>
  <p>The progress bar tsx:</p>
  <pre><code>import React, { useEffect } from 'react'
  import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
  
  interface Props {
    total: number
    progress: number
    color?: string
    backgroundColor?: string
    height?: number
    style?: StyleProp&lt;ViewStyle&gt;
    animDelay?: number
    animDuration?: number
    testID?: string
  }
  
  const ProgressBar = ({
    color,
    backgroundColor,
    style,
    height,
    animDelay,
    animDuration,
    total,
    progress,
    testID = 'progress-bar',
  }: Props): JSX.Element =&gt; {
    const minWidthValue = 5.4
    const percentage = total &amp;&amp; progress ? Math.min(progress, total) / total : 0
    const minDisplayWidth =
      percentage &gt; 0 &amp;&amp; percentage &lt; minWidthValue ? minWidthValue : percentage
    const barWidth = `${Math.max(minDisplayWidth, Math.floor(percentage * 100))}%`
  
    useEffect(() =&gt; {
      const animationValue = new Animated.Value(0)
      Animated.timing(animationValue, {
        toValue: progress,
        delay: animDelay,
        duration: animDuration,
        useNativeDriver: true,
      }).start();
    }, []);
  
    return (
      &lt;View
        testID={testID}
        style={[
          styles.container,
          height ? { height } : undefined,
          backgroundColor ? { backgroundColor } : undefined,
          style,
        ]}&gt;
        &lt;Animated.View
          style={[
            styles.bar,
            {
              backgroundColor: color,
              width: barWidth,
            },
          ]}
        /&gt;
      &lt;/View&gt;
    )
  }
  
  export default ProgressBar
  
  const BORDER_RADIUS = 15
  
  const styles = StyleSheet.create({
    bar: {
      borderRadius: BORDER_RADIUS,
      height: '100%',
    },
    container: {
      borderRadius: BORDER_RADIUS,
      flexDirection: 'row',
      height: 30,
      overflow: 'hidden',
      width: '100%',
    },
  })
  </code></pre>
  <p>And the example of usesage, say on home.tsx:</p>
  <pre><code>&lt;ProgressBarWrapper total={100} progress={50} testID='test-id-test-1' /&gt;
  </code></pre>
  <p>So what happen is, the total length(100%) ,  and I wish the animation moving from 0 to 50 in the bar at beginning when this component loaded up</p>
  <p><a href="https://i.stack.imgur.com/LUHO8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LUHO8.png" alt="enter image description here" /></a></p>
  <p>With above code, I only get a static bar , not moving at all..
  Could someone point me out where I have done wrong?
  Sample code would be very helpful
  Cheers</p>
  <h1>Edited:</h1>
  <p>I have updated code</p>
  <pre><code>useNativeDriver
  </code></pre>
  <p>and  use <code>interpolation</code> here to avoid oscillations using 'clamp'</p>
  <p>However, the animation still not moving/working ,  wondering any advise on this.
  Thanks</p>
  <pre><code>const ProgressBarInternal = ({
    color,
    backgroundColor,
    style,
    height,
    animDelay,
    animDuration,
    total,
    progress,
    testID = 'progress-bar',
    borderRadius,
    containerHeight,
    onAnimationDidEnd,
  }: Props): JSX.Element =&gt; {
    const minWidthValue = 5.4
    const percentage = total &amp;&amp; progress ? Math.min(progress, total) / total : 0
    const minDisplayWidth =
      percentage &gt; 0 &amp;&amp; percentage &lt; minWidthValue ? minWidthValue : percentage
    const progressingBarWidthPercentage = `${Math.max(minDisplayWidth, Math.floor(percentage * 100))}%`
  
    const animatingProgressBar = useRef(new Animated.Value(0))
    useEffect(() =&gt; {
      Animated.timing(animatingProgressBar.current, {
        toValue: 0,
        delay: animDelay,
        duration: animDuration,
        useNativeDriver: true,
      }).start()
    }, []
    );
  
    return (
      &lt;View
        testID={testID}
        style={...}&gt;
        &lt;Animated.View        
          style={[
            styles.bar,
            { borderRadius: borderRadius },
            {
              backgroundColor: color,
              width: progressingBarWidthPercentage,
            },
            {
              transform: [
                {
                  translateX: animatingProgressBar.current.interpolate({
                    inputRange: [1, 100],
                    outputRange: [&quot;0%&quot;, &quot;100%&quot;],
                    extrapolate: &quot;clamp&quot;
                  }),
                },
              ],
            },
          ]}
        /&gt;
      &lt;/View&gt;
    )
  }
  </code></pre>