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

I am developing a React Native app and I have a process whereby I want to put a progress cntr or progress bar in the UI as it runs.

I found this code in SO but Im 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>
    )
}

CodePudding user response：

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)

CodePudding user response：

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