moti 0.19.0

v19

on Node.js NPM

Overview

• 🌲 Add Reanimated 3.0 tree shaking support for Web, reducing bundle size by 80%.
  • See my PR here: software-mansion/react-native-reanimated#3278
• 👨🏻‍🔧 Fix sequences #195, #200
• 🩻 Add Skeleton.Group component
• ☯️ Improve skeleton memoization deep comparison
• ✂️ Remove @motify/ packages
• 🤖 Add option to pass worklet function to exitTransition, allowing for use of AnimatePresence's custom prop in exitTransition (closing #193)

Track the PR here: #216

Docs

• 🏰 Moti vs. Reanimated

Install

yarn add moti

Breaking Changes

• @motify/ packages have been removed, greatly simplifying installation, types, maintenance, and Expo snack support.
  • This change should take you under a minute to update.
  • Next.js users: remove @motify/ entries from transpile modules next.config.js. You should only have moti there now.
  • Expo Web users: remove @motify/ from webpack.config.js. You should only have moti there now.
  • If your app accidentally imported from @motify/components somewhere, please change these imports to come from moti instead.
    • command + shift + F on VSCode, and search @motify
• MotiPressable's containerStyle was changed to not apply to the container in #152. This broke styling on iOS like flex and position: 'absolute'. In 0.19, containerStyle is changed back to its original behavior from 0.17. If you need Android shadow styles on MotiPressable, use style instead of containerStyle.
  • It's likely this didn't affect you, but to be sure, I recommend searching all of your uses of containerStyle on MotiPressable and make sure it works after the update as expected.

Components

<Skeleton.Group />

If you have many skeleton components, you can now wrap them with a single <Skeleton.Group show={loading} /> component. This will help you achieve this type of effect.