0.29 - RN 0.74 + SDK51

This version adds support for RN 0.74 + Expo SDK 51 by fixing types etc. Thanks to @alantoa for the contributions to make this possible.

0.28

Breaking changes 🚨🚨

A small breaking change (but not really.)

In previous versions of Moti, transform arrays used transition.transform for style-specific transitions.

For example:

<MotiView 
  transition={{ type: 'timing', scale: { type: 'spring' } }}
  animate={{ transform: [{ scale: on ? 1 : 0 }] }}
/>

In this case, scale should have type: 'spring'. However, since this was using the transform array instead of inline scale, this was only customizable using transition.transform instead of transition.scale.

As a result, the above example would have type: 'timing' for scale, which feels incorrect.

In 0.28, the above example will use type: 'spring' for scale.

I considered making this a patch release, since it's technically just a fix. However, since some people may have used transition.transform in their code to get around this issue, I made it a "major" version to indicate that there's a breaking change.

0.28.1 Update

In 0.28.1, the new change is backwards-compatible with transition.transform. transition will prefer scale over transform, but if you pass transform to transition, it will apply (as long as you don't pass scale too).

TLDR: In 0.28.1, the new behavior is added, ands support for the previous behavior is preserved.

Performance

There is an ongoing effort to improve performance in any way possible. This version reduced the number of hooks by 4 in motify. Any single benchmark I can run to reduce a single ms of performance will be done. This will take some time and will get documented at #336

What's Changed

• Add testID prop to MotiPressable for improved testability by @agrawal-rohit in #328

Full Changelog: v0.27.1...v0.28.0

v0.27.1 Skeleton Fix

By default, the skeleton was fading out too slowly when show={false}. This has been addressed.

PS the initial release failed so it's live on 0.27.2.

v.027

Official Reanimated 3.5 Support

Add full support for Reanimated 3.0 by upgrading types.

The transition now supports duration and other new properties from withSpring that were added in Reanimated 3.

No breaking changes.

0.26

You can now pass type: 'no-animation' to transition. You likely will never use this, but it was added for Tamagui to implement a Moti integration with good performance.

v0.25.0

This release is all about improving callbacks for animation changes.

Currently, the only way to know if a value animated is to use onDidAnimate:

<MotiView 
  animate={{ loading: on ? 1 : 0 }}
  onDidAnimate={() => {}}
/>

However, it's pretty hard to know which item animated, and when. This gets especially hard if you have a sequence.

Moti now offers granular animation callbacks for both inline styles and sequences.

Inline Animation Callbacks

You can now listen for animations by passing an object to any animation style, and giving it an onDidAnimate function.

<MotiView 
  animate={{
     opacity: {
       value: loading ? 1 : 0,
       onDidAnimate(finished, maybeValue, { attemptedValue }) {
          if (attemptedValue == 1) {
             // ...
          }
       }
     }
  }}
/>

Sequence Item Callbacks

The same goes for sequences. You can pass onDidAnimate to a sequence item's object, and instead of attemptedValue, you'd use attemptedSequenceItemValue.

onDidAnimate.

Lastly, the regular onDidAnimate prop was given a new attemptedSequenceItemValue.

0.24.2

Fix Skeleton.Group not working (#275)

0.24.1

Bug Fixes

• Fix show={false} not hiding Skeleton (#271)

0.24

🎁 New Features

⚡️ Example apps

With the release of Reanimated 3, Moti now works on StackBlitz! The examples on the Moti site are now finally interactive. Since Moti was broken on Expo Snack, I migrated all examples to StackBlitz and added a few more throughout the docs.

moti.fyi/examples/hello-world

Over time, I'll try to add more interactive examples to the docs, as well as accepting PRs for more. You can find some in the examples/with-expo/src folder. Feel free to fork the starter on StackBlitz.

🩻 Skeleton

Performance

There were some improvements to make the Skeleton less heavy and memory intensive.

react-native-linear-gradient

Moti's Skeleton now supports react-native-linear-gradient as an alternative to expo-linear-gradient. This is useful if you aren't using Expo.

The default behavior is still expo-linear-gradient.

Click here to use 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',
          },
        },
      ],
    ],
  }
}

This assumes you've installed react-native-linear-gradient.

v0.23.7

Bug Fixes

• Fix useMotiPressable, useMotiPressables, etc. not updating on Web without Babel/SWC. They are now compatible with Web without the need for a plugin.