React Native Modalfy
v3.x
v3.x
  • Getting started
  • Installation
  • 🤓Guides
    • Creating a stack
    • Opening & closing
    • Passing params
    • Triggering a callback
    • Type checking with TypeScript
    • Subscribing to events
    • Using outside React
    • Upgrading from v2.x
  • 📚API Reference
    • Types
      • ModalStackConfig
      • ModalOptions
      • ModalProp
      • ModalComponentProp
      • ModalProps
      • ModalComponentWithOptions
    • ModalProvider
    • createModalStack
    • useModal
    • withModal
    • modalfy
  • 📰Blog
    • Unveiling Modalfy v3
    • Announcing Modalfy v2
    • Stacks on stacks in React Native
    • Introducing a Modal Citizen
  • 🗃️Others
    • Help
    • Contributing
    • Changelog
    • GitHub
Powered by GitBook
On this page
  • ModalOptions.shouldAnimateOut has been dropped
  • ModalOptions.animateOut has a new mandatory callback argument

Was this helpful?

  1. Guides

Upgrading from v2.x

PreviousUsing outside ReactNextTypes

Last updated 8 months ago

Was this helpful?

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 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 or 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: & .

Since v3, you must use the new 3rd callback argument provided to you. This is required so that at the end of the animation(s) you'll define, for instance. Example:

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 using. 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 but always provided for.

And that's it! Everything else should just work as expected, enjoy!

🤓
🥳
Upgrading from v1.x
your callbacks can be invoked
animationOut
animationConfigOut
animationIn
animationOut
animationOut
animationIn
animationOut