stop start video recording bar similar to TikTok in react native

Question

hy, i want to implement that play and pause video recording bar at the top in a camera component similar to that in tiktok in react native , I can't find any dependency and don't know how to do it ,please help

Answer 1

You can use react-native-progress to display a progress bar

Then use state to keep track of the progress:

const [progress, setProgress] = useState(0)

Then render the progress bar:

import * as Progress from 'react-native-progress';

<Progress.Bar progress={this.state.progress} width={200} />

now you can use setInterval to update the progress

setInterval(() => setProgress((prev) => return prev + (10/100))), 100)

This function increases the progress by 1% every 100 millisecconds you can change this to make the progress smoother