@uiw/react-native/lib/Progress/index.js

UIW for React Native

import React, { useRef, useState, useEffect } from 'react';
import { Animated, View, StyleSheet } from 'react-native';
export default (props => {
  const {
    style,
    progress = 0,
    progressColor = '#108ee9',
    position,
    animation = {
      duration: 500
    }
  } = props;
  const progWidth = useRef(new Animated.Value(0)).current;
  const [wrapWidth, setWrapWidth] = useState(0);
  useEffect(() => {
    startAnimation();
  }, [wrapWidth, progress]);

  const startAnimation = () => {
    Animated.timing(progWidth, {
      toValue: getWidth(),
      duration: typeof animation !== 'boolean' ? animation.duration : 1000,
      useNativeDriver: false
    }).start();
  };

  const onLayout = e => {
    setWrapWidth(e.nativeEvent.layout.width);
  };

  const getWidth = (percent = progress) => {
    return wrapWidth * (normalPercent(percent) / 100);
  };

  const normalPercent = percent => {
    let widthPercent = 0;

    if (percent !== undefined && percent > 0) {
      widthPercent = percent > 100 ? 100 : percent;
    }

    return widthPercent;
  };

  return <View style={[styles.container, style]}>
      <View onLayout={onLayout} style={[styles.pre, position === 'fixed' ? {
      position: 'absolute',
      top: 0
    } : {}, {
      borderColor: progressColor
    }]}>
        <Animated.View style={[styles.preOisn, {
        width: progWidth,
        backgroundColor: progressColor
      }]}></Animated.View>
      </View>
    </View>;
});
const styles = StyleSheet.create({
  container: {
    position: 'relative',
    flex: 1
  },
  pre: {
    borderWidth: 1,
    height: 4,
    width: '100%',
    borderRadius: 20,
    marginBottom: 0,
    marginTop: 0,
    overflow: 'hidden'
  },
  preOisn: {
    position: 'absolute',
    height: 4,
    left: 0,
    top: 0
  }
});