React Native - updating UI when in a loop using functional component - reactjs

Question

I am developing a React Native app and I have a process whereby I want to put a progress center or progress bar in the UI as it runs.
I found this code in SO but I'm not sure how to implement in my functional component.
Could please give me an example of how to call ProgressBar from my func component and how to increase progress value.?
Thanks in advance.
const ProgressBar = (props)=>{
const [value] = useState(new Animated.Value(props.value))
useEffect(()=>{
Animated.timing(value, {
toValue: props.value,
duration: 100,
}).start()
}, [props.value])
const width = value.interpolate({
inputRange: [0, 100],
outputRange: ['0%', '100%'],
})
return (
<View style={{
width: '100%',
height: '100%',
flexDirection: 'row',
backgroundColor: 'white',
}}>
<Animated.View style={{
width: width,
height: '100%',
backgroundColor: 'green',
}}></Animated.View>
</View>
)
}

Answer 1

Check a fully working example with progress value change.
import * as React from "react";
import { useEffect, useState } from "react";
import { Text, View, StyleSheet, Animated } from "react-native";
import Slider from "#react-native-community/slider";
import Constants from "expo-constants";
const ProgressBar = (props) => {
const [value] = useState(new Animated.Value(props.value));
useEffect(() => {
Animated.timing(value, {
toValue: props.value,
duration: 100,
}).start();
}, [props.value]);
const width = value.interpolate({
inputRange: [0, 100],
outputRange: ["0%", "100%"],
});
return (
<View
style={{
width: "100%",
height: "100%",
flexDirection: "row",
backgroundColor: "white",
}}
>
<Animated.View
style={{
width: width,
height: "100%",
backgroundColor: "green",
}}
></Animated.View>
</View>
);
};
export default function App() {
const [progress, setProgress] = useState(10);
return (
<View style={styles.container}>
<View style={{ paddingVertical: 20 }}>
<Text> Change slider value to see progress bar follow </Text>{" "}
</View>
<View style={{ height: 20 }}>
{" "}
<ProgressBar value={progress} />{" "}
</View>
<View style={{ paddingVertical: 20 }}>
<Slider
minimumValue={0}
maximumValue={100}
onValueChange={setProgress}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: Constants.statusBarHeight,
backgroundColor: "#ecf0f1",
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: "bold",
textAlign: "center",
},
});
Expo snack - https://snack.expo.dev/#emmbyiringiro/30efea

Answer 2

Use setter to set the value
const [progress, setProgress] = useState(props.value)
useEffect(()=>{
Animated.timing(value, {
toValue: progress,
duration: 100,
}).start()
}, [progress])
to update progress bar, call setProgress(newValue)