The value of the progress bar is not refreshing.

[caner219]

When setting the value of progress for the first time, it takes effect. However, when I retrieve data from the server and want to display it on the progress bar, the progress does not refresh. How can I solve this issue?

[caner219]

[alantoa]

Can you please follow the example and give it a try?

export const Example = () => {
  const progress = useSharedValue(30);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
  return (
    <Slider
      style={styles.container}
      progress={progress}
      minimumValue={min}
      maximumValue={max}
    />
  );
};

[caner219]

I made the changes as you suggested, but the progress bar's progress is still not refreshing. The printed value of "progressValue called with = " is changing, but the progress bar itself is still not changing.

[alantoa]

but the progress bar's progress is still not refreshing.

Are you saying that you have already dragged the thumb, but the slider did not change at all?

[caner219]

When I manually drag the progress bar, that works fine. The problem is when I get the data from the server and then go to set the progress value, the progress value changes but the progress bar UI does not refresh, it stays at the initial value it was set to.

[amalpsojancodiac]

maybe this will help you :)

export const Example = () => {
const progress = useSharedValue(30);
 const min = useSharedValue(0);
 const max = useSharedValue(100);
  return (
    <Slider
      style={styles.container}
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      cache={progress}
    />
  );
};

[caner219]

Hi，I made the modifications as you instructed, but the UI of progress still has not refreshed.

[caner219]

[manuelxaguilar]

@caner219 Any luck with this?

[TikshaK]

I am facing the same issue.... anyone found the solution?

[alantoa]

@caner219, doesn't it work for you if you set the progress SharedValue? Typically, if you only want to change the progress value, you can simply do progress.value = number;.

[domalouf]

I had a similar issue when trying to use the Slider inside a modal. I couldn't get the progress spot to change based on parameters passed into the modal. I think it has something to do with useSharedValue variables updating asynchronously.

Here is a link to the documentation (the first code block under remarks is where the problem comes from I think), https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/

[nrcaz]

Having the same problem here, you can just repro the issue with a button setting the sharedValue in progress. It does not update the slider.

[glairnarra31]

Can confirm the bug occurs when snapToStep is set to true

[fform]

Had this same problem. In the meantime, an easy fix is to force the whole component to re-render if you are setting the progress from somewhere else. Easiest way to do that is change the key. So

const progress = useSharedValue(0);
useEffect(()=>{
   progress.value = outsideValue;
}, [outsideValue]);
...
<Slider
  key={`slider-${outsideValue}`}
  steps={stepsSV}
/>

The key can be whatever but just making a new key forces a full unmount/remount instead of the managed internal state not picking up the new outsideValue