Upgrading from v2.x

Search…

Upgrading from v2.x

We tried to keep the number of breaking changes as low as possible. As of now, here is the list of the changes we know you'll have to make if you're coming from Modalfy v2.
If you're coming from the v1 API, we'd highly suggest going through the Upgrading from v1.x guide first.
ModalOptions.shouldAnimateOut has been dropped
As announced in the v2 release, the shouldAnimateOut modal option has been dropped after being deprecated since June 2020. If you haven't transitioned yet, you can use animationOut or animationConfigOut instead.
ModalOptions.animateOut has a new mandatory callback argument
v2.1 brought up a new way to drive animations by putting you in full control whenever a modal is being opened and/or closed: animationIn & animationOut.
Since v3, you must use the new 3rd callback argument provided to you. This is required so that your callbacks can be invoked at the end of the animation(s) you'll define, for instance. Example:
TypeScript
src/App.tsx
import { Animated } from 'react-native'
import type { ModalOptions } from 'react-native-modalfy'
​
const animate = (
  animatedValue: Animated.Value,
  toValue: number,
  callback?: () => void,
) => {
  Animated.spring(animatedValue, {
    toValue,
    damping: 10,
    mass: 0.35,
    stiffness: 100,
    overshootClamping: true,
    restSpeedThreshold: 0.001,
    restDisplacementThreshold: 0.001,
    useNativeDriver: true,
  }).start(({ finished }) => {
    if (finished) callback?.()
  })
}
​
const defaultOptions: ModalOptions = {
  animationIn: animate,
  animationOut: animate,
  transitionOptions: (animatedValue) => ({
    opacity: animatedValue.interpolate({
      inputRange: [0, 1, 2],
      outputRange: [0, 1, 0.9],
    }),
  }),
}
​
// ...
Invokingcallbackis required if you are usinganimationOut. That's because, since v3, Modalfy relies on that callback being invoked to mark a modal as closed in its own internal state. That's whycallback is an optionally provided argument for animationInbut always provided foranimationOut.
And that's it! Everything else should just work as expected, enjoy! 🥳
 

Guides - Previous

Using outside React

Next - API Reference

Types

Last modified 5mo ago

Copy link

Outline

ModalOptions.shouldAnimateOut has been dropped

ModalOptions.animateOut has a new mandatory callback argument

`ModalOptions.shouldAnimateOut` has been dropped

`ModalOptions.animateOut` has a new mandatory `callback` argument