alantoa / react-native-awesome-slider

🚀 An anwesome <Slider/> that supports various features haptic, lottie, animation, ballon, etc.
MIT License
263 stars 30 forks source link

Fix out-of-bounds thumb render before onLayout #18

Closed owaiswiz closed 2 years ago

owaiswiz commented 2 years ago

Fixes https://github.com/alantoa/react-native-awesome-slider/issues/17.

In case it wasn't clear, here's a before/after video where you can see the problem (I am changing the key prop here so the component remounts).

Before this change: Notice the top slider and see how it is rendered outside the box for the first few renders until onLayout is called and it flickers.

https://user-images.githubusercontent.com/16438034/173693942-8ec48bca-e22c-4cbf-a2e1-8e606bea20fc.mov

After this change: No flickers. https://user-images.githubusercontent.com/16438034/173693973-164d9652-77cc-4eed-a09e-55563d1f218b.mov