i'm working on react native expo project, i'm trying to build custom ProgressBar, I have state call step if the step increase by 1 then the width value of the view has to increase, if the step decreases then the width value of the view has to decrease, so if the value increase or decrease it seems the view has some animation on it

const ProgressBar =({step , requset}) =>{

    const [ steps , setSteps ]= useState(0);
    const [accessToken, setAccessToken] = useState(null);
    const [ width , setWidth ] = useState(50);

    useEffect( ()=> {
        const getToken = async ()=>{ 
        const accessToken = await token.get();
          setAccessToken(accessToken)}

        getToken();
        accessToken  ?
             requset == 1 ?  setSteps(6) : setSteps(7)
             : setSteps(3)
     })

     useEffect (()=>{
        const newWidth =  (step*50);
        setWidth(newWidth);
     })

 
return(
    <View style={{flexDirection:'row',}} > 
     <View style={styles.progressBar}>
      <Animated.View 
      onLayout = {e =>{ 
         const newWidth = e.nativeEvent.layout.width;
         setWidth(newWidth);
    }}
      style ={ [styles.progress,{width: width}]}
      />
     </View>
     <Text style={styles.progressText}>{steps}/{step}</Text>
    </View>
)}

How can I make a mathematical statement that calculates the amount of width increases depend on Total steps?

CodePudding user response：

const newWidth = (step / steps) * 100;

This will calculate the width of the progress bar as a percentage of the total number of steps. If you have a total of 6 steps and the current step is 3, the width of the progress bar will be 50 (3 / 6 * 100).

You can then use this value to update the width state variable, and it will be used to set the width of the progress bar.

useEffect(() => {
  const newWidth = (step / steps) * 100;
  setWidth(newWidth);
});

The other way is Animated.View component to animate the width of the progress bar when it changes. This will make the progress bar appear to "fill up" as the user advances through the steps.

import { Animated } from 'react-native';

const ProgressBar = ({ step, requset }) => {
  // ... other code

  const [width, setWidth] = useState(new Animated.Value(0));

  useEffect(() => {
    const newWidth = (step / steps) * 100;
    Animated.timing(width, {
      toValue: newWidth,
      duration: 1000, // duration of the animation, in

CodePudding user response：

Here's one possible way to calculate the width of the progress bar:

1. First, calculate the total width of the progress bar by using the width prop of the View component that represents the progress bar. For example, you can use the onLayout event to get the width of the View and store it in a state variable, such as totalWidth.
2. Next, calculate the width of the progress bar at each step by dividing the total width by the number of steps. For example, if the total width is 100 and the number of steps is 10, the width at each step would be 10.
3. Finally, use the step prop to determine the current step and multiply it by the width at each step to get the current width of the progress bar. For example, if the current step is 3 and the width at each step is 10, the current width of the progress bar would be 30.

Here's how this approach might look in your code:

const ProgressBar = ({ step, request }) => {
  const [totalWidth, setTotalWidth] = useState(0);
  const [steps, setSteps] = useState(0);
  const [accessToken, setAccessToken] = useState(null);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const getToken = async () => {
      const accessToken = await token.get();
      setAccessToken(accessToken);
    };

    getToken();
    accessToken ? (request == 1 ? setSteps(6) : setSteps(7)) : setSteps(3);
  });

  useEffect(() => {
    const widthAtEachStep = totalWidth / steps;
    const newWidth = step * widthAtEachStep;
    setWidth(newWidth);
  });

  return (
    <View style={{ flexDirection: "row" }}>
      <View
        style={styles.progressBar}
        onLayout={(e) => {
          const newWidth = e.nativeEvent.layout.width;
          setTotalWidth(newWidth);
        }}
      >
        <Animated.View style={[styles.progress, { width }]} />
      </View>
      <Text style={styles.progressText}>{step}/{steps}</Text>
    </View>
  );
};

In this example, the totalWidth state variable is used to store the total width of the progress bar, and the width state variable is used to store the current width of the progress bar. The useEffect hooks are used to calculate the width at each step and the current width of the progress bar based on the totalWidth and steps state variables.