How do I get this progress bar from react native?

Question

So I want to implement a progress bar like this in react native. I have found a library which is https://www.npmjs.com/package/react-native-progress, but this library does not have a progress bar like this. The issue is the circle part. Is there a library which has a progress bar like this one? If there isn't, then any idea on how to implement this would be appreciated. So as a fellow commenter got confused whether it is a slider or progress bar, I will include the full screen image. There is a timer and the progress bar or progress slider reflects that in real time.

Answer 1

We can still exploit react-native-community/slider for this purpose. This would make sense since we can allow the user to fast forward. If you do not want allow user interaction, you can still disable it via the slider component props.

For a smooth sliding, the slider changes its value at a higher tick rate. You might want to experiment with it a little bit to make it fit your needs.

Here is an example on how I did it.

const [progress, setProgress] = useState(-1)

// takes time in seconds
function interpolate(time) {
  return time * 600
}

// runs 10 seconds, you can take any other value
const [time, setTime] = useState(interpolate(10))

useEffect(() => {
  if (progress < time && progress > -1) {
    const timer = setTimeout(() => setProgress(progress + 10), 10)
    return () => clearTimeout(timer)
  }
}, [progress, time])

const startTimer = React.useCallback(() => {
  setProgress(0)
}, [])

return (
  <SafeAreaView style={{ margin: 30 }}>
    <Slider
      style={{ width: 300, height: 40, backgroundColor: "red" }}
      value={progress}
      minimumValue={0}
      maximumValue={time}
      minimumTrackTintColor="#FFFFFF"
      maximumTrackTintColor="#FFFFFF"
    />
    <Pressable style={{ marginTop: 10 }} onPress={() => startTimer()}>
      <Text>Toggle timer</Text>
    </Pressable>
  </SafeAreaView>
)

The above is a dummy implementation which will run a timer for 10 seconds and the slider will move automatically like a progress bar.