Tree shake moti/skeleton from Expo, improve performance

[nandorojo]

Test this PR

yarn add moti@skeleton

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's babel.config.js's plugins array.

// babel.config.js
module.exports = function (api) {
  api.cache(true)
  return {
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            'moti/skeleton': 'moti/skeleton/react-native-linear-gradient',
          },
        },
      ],
    ],
  }
}

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:

1. 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.
2. Reanimated adds overhead for every useAnimatedStyle, useSharedValue, Animated.View, etc. I'm trying to reduce these where possible.
3. 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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
moti	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 1, 2023 at 6:18PM (UTC)