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

callstack / react-native-slider

React Native component exposing Slider from iOS and SeekBar from Android

MIT License

1.22k stars 270 forks source link

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

Open landabaso opened 6 months ago

landabaso commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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!