search

gorhom / react-native-paper-onboarding

Paper Onboarding is a material design UI slider for `React Native`.
MIT License
856 stars 51 forks source link

Ensure page transitions are occurring on the native thread #5

Closed owinter86 closed 4 years ago

owinter86 commented 4 years ago

Hey,

This is really nice, I noticed a small issue that I also ran into when using reanimated, there is a hidden away configuration and an api that is not documented called addWhitelistedNativeProps so you may notice frame drops on lower end devices, this is because the cx, cy, r props are not accepted it the whitelisted configuration and are returned back to the JS thread for execution.

https://github.com/gorhom/react-native-paper-onboarding/blob/405904175bd010881cd0c5fb9fa676df78791168/src/page/PaperOnboardingPage.tsx#L137-L141

if you add Animated.addWhitelistedNativeProps({ cx: true, y: true, r: true }); it will ensure these animations occur on the native ui thread.

I discovered it here. https://github.com/software-mansion/react-native-reanimated/issues/537

gorhom commented 4 years ago

@owinter86 that's a great catch and it's not mentioned anywhere 🤯

thanks , i'll create a pr shortly

gorhom commented 4 years ago

fixed with v0.2.3 release 🎉 https://github.com/gorhom/react-native-paper-onboarding/releases/tag/v0.2.3