While it's hard to narrow down perf issues, especially in development, there are a few obvious wins I'll be pursuing:
Measurement has been moved from React state to the native thread with useSharedValue to improve render performance and trigger zero re-renders. This wasn't possible in old versions of Moti, but now it is.
Reanimated adds overhead for every useAnimatedStyle, useSharedValue, Animated.View, etc. I'm trying to reduce these where possible.
Remove use of AnimatePresence in favor of a simple opacity animation. This will leave an additional animated view mounted, but it will not loop continuously, so it shouldn't affect performance.
If you want to optimize performance even more, try passing disableExitAnimation={true}. This will, of course, disable the exit animation, so it might not feel as smooth.
Web
I might leave this for a later PR, but maybe web could benefit from using CSS transitions directly. We'd lose all control though, so not sure if it's the right move or not.
Test this PR
At the time of writing, the version is
0.24.0-alpha.10
.This PR seeks to improve
moti/skeleton
in a few ways:Tree shake expo
A few people have complained that they can't use the skeleton without installing
expo-linear-gradient
.You can now choose between the following gradient libraries:
expo-linear-gradient
react-native-linear-gradient
This addresses #237.
To use
react-native-linear-gradient
add this to your app'sbabel.config.js
'splugins
array.Improve performance
Next, hoping to address #251 if possible.
While it's hard to narrow down perf issues, especially in development, there are a few obvious wins I'll be pursuing:
useSharedValue
to improve render performance and trigger zero re-renders. This wasn't possible in old versions of Moti, but now it is.useAnimatedStyle
,useSharedValue
,Animated.View
, etc. I'm trying to reduce these where possible.AnimatePresence
in favor of a simple opacity animation. This will leave an additional animated view mounted, but it will not loop continuously, so it shouldn't affect performance.If you want to optimize performance even more, try passing
disableExitAnimation={true}
. This will, of course, disable the exit animation, so it might not feel as smooth.Web
I might leave this for a later PR, but maybe web could benefit from using CSS transitions directly. We'd lose all control though, so not sure if it's the right move or not.