I'm implementing a feature like Instagram story in react native, where I need to implement a progress bar on top to indicate the progress of current story. Currently I have a timer that start count once the story start playing:
onStart = (timeout: number, total: number) => {
const updateFrequncy = 1000 / PROGRESS_BAR_TICK;
this._timer = this.props.setInterval(() => {
this.setState(state => ({
progress:
state.progress +
(PROGRESS_BAR_SPEED * PROGRESS_BAR_RANGE * updateFrequncy) /
total,
}));
}, PROGRESS_BAR_TICK);
};
and I'm passing the progress state to progress bar. (A Animated.View component that renders the current progress as width in style). So basically, it will render every PROGRESS_BAR_TICK milliseconds due to setState. The problem I'm facing is - since JS is single threaded, if there's another event that takes the thread, or JS thread is slow on some low end devices, the progress bar will become junky.
Any suggestion to make it more smooth?