Function ProgressBar

src/components/ProgressBar.tsx:75–265

({
  color,
  indeterminate,
  progress = 0,
  visible = true,
  theme: themeOverrides,
  animatedValue,
  style,
  fillStyle,
  testID = 'progress-bar',
  ...rest
}: Props)

 * ```
 */
const ProgressBar = ({
  color,
  indeterminate,
  progress = 0,
  visible = true,
  theme: themeOverrides,
  animatedValue,
  style,
  fillStyle,
  testID = 'progress-bar',
  ...rest
}: Props) => {
  const isWeb = Platform.OS === 'web';
  const theme = useInternalTheme(themeOverrides);
  const { current: timer } = React.useRef<Animated.Value>(
    new Animated.Value(0)
  );
  const { current: fade } = React.useRef<Animated.Value>(new Animated.Value(0));
  const passedAnimatedValue =
    React.useRef<Props['animatedValue']>(animatedValue);
  const [width, setWidth] = React.useState<number>(0);
  const [prevWidth, setPrevWidth] = React.useState<number>(0);

  const indeterminateAnimation =
    React.useRef<Animated.CompositeAnimation | null>(null);

  const { scale } = theme.animation;

  React.useEffect(() => {
    passedAnimatedValue.current = animatedValue;
  });

  const startAnimation = React.useCallback(() => {
    // Show progress bar
    Animated.timing(fade, {
      duration: 200 * scale,
      toValue: 1,
      useNativeDriver: true,
      isInteraction: false,
    }).start();

    /**
     * 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.
     */
    const externalAnimation =
      typeof passedAnimatedValue.current !== 'undefined' &&
      passedAnimatedValue.current >= 0;

    if (externalAnimation) {
      return;
    }

    // Animate progress bar
    if (indeterminate) {
      if (!indeterminateAnimation.current) {