v19

[nandorojo]

Overview

• 🌲 Add Reanimated 3.0 tree shaking support for Web, reducing bundle size by 80%.
  • See my PR here: 🌲 Reduce bundle size on Web by 80% software-mansion/react-native-reanimated#3278
• 👨🏻‍🔧 Fix sequences Sequence not working since reanimated 2.3.0 #195, fix: sequences work again on reanimated 2.3+ #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 Add custom option for exitTransition #193)

Install

yarn add moti@canary

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 MotiPressable: Changed containerStyle to style on parent element  #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.