react-native-slider icon indicating copy to clipboard operation
react-native-slider copied to clipboard

Fix flicker issue on re-render in web implementation of Slider component

Open landabaso opened this issue 1 year ago • 3 comments

Description

This PR addresses an issue with the Slider component where a flicker effect is visible during re-renders, specifically in the web implementation. The flicker was caused by the width being reset during the layout calculation.

Changes Made

  • Modified sliderStyle to set the width only if it is not zero using the conditional spread operator.
    const sliderStyle = { zIndex: 1, ...(width !== 0 && { width }) };
    

landabaso avatar May 21 '24 12:05 landabaso

Oups, one of the tests failed (due to a snapshot comparison). Please let me know if you agree with this PR approach, and I'll update the snapshot accordingly.

landabaso avatar May 21 '24 13:05 landabaso

In fact, I am still experiencing flicker issues on iOS and Android. Not setting the width at all (as it was originally) solves the flicker. That is: const sliderStyle = { zIndex: 1 }; However, I assume the width was set for a specific reason, which is why I didn't remove it in my initial approach. Is setting the width strictly needed?

Could you provide some insights on why the width was added, @BartoszKlonowski? This was introduced in PR #555. Setting styles in onLayout can be tricky and may introduce flickering, depending on how parent components handle their children.

Thanks!

landabaso avatar May 21 '24 16:05 landabaso

I would like to get more attention to this PR. I just recently turned on the the new arch had quite a lot of flickering issues from this slider library. Removing the width as @landabaso suggests solved the issues completely while, as far as I can tell, leave everything else still working. I am currently using a patch in order to fix my flickering issues. Removing the width or an explanation to why it is needed (or another fix entirely) would be awesome.

simon-thuresson-md avatar Oct 10 '25 16:10 simon-thuresson-md