Closing modal doesn't animate out, closes instantly after duration

[okcompewter]

When calling closeModal(), the closing animation never happens. It waits the amount of time of the duration, then instantly closes. I've tested this by setting the duration to 3 seconds... there is no visible transition happening when closing.

This problem however doesn't exist on openModal(), which works fine.

  const defaultOptions: ModalOptions = {
    backdropOpacity: 0.9,
    disableFlingGesture: true,
    animateInConfig: {
      easing: Easing.inOut(Easing.exp),
      duration: 3000,
    },
    animateOutConfig: {
      easing: Easing.inOut(Easing.exp),
      duration: 3000,
    }
  }

Any ideas?

[okcompewter]

It also seems that the animateInConfig in the defaultOptions has no effect (adjusting the duration to 5000, the modal still fades in within a second)

[CharlesMangwa]

Hi @okcompewter! Could you provide a reproducible demo in Snack plz? Would make it easier to debug your issue. Thanks!

[CharlesMangwa]

Closing this issue for now, feel free to reopen as soon as you'll have the repro.

[smoove]

Closing this issue for now, feel free to reopen as soon as you'll have the repro.

It does not work in the demo snack (remove animateOutConfig, or set value > 0 @ line 49)

https://snack.expo.dev/@charles.m/react-native-modalfy

[CharlesMangwa]

Thanks for the heads up! You're right, we'll have to look into this.

[facuescobar]

Hi guys! I'm having the same issue, closing animation does not work.

My modal animates the modal from the bottom, but when closeModal() is called, it disapears without animation.

const defaultOptions = {
  backdropOpacity: 0.75,
  position: 'bottom',
  animateOutConfig: {
    easing: Easing.inOut(Easing.exp),
    duration: 300,
  },
  transitionOptions: (animatedValue: any) => ({
    transform: [
      {
        translateY: animatedValue.interpolate({
          inputRange: [0, 1, 2],
          outputRange: [height, 0, height],
        }),
      },
    ],
  }),
};

I'm using

    "react-native": "0.66.0",
    "react-native-modalfy": "^2.1.2",

Any idea how to get the animation-out working?

[facuescobar]

I found a workaround for this, It seems that the animation does not work when you use closeModal function from useModal hook.

But if you use closeModal that you receive as a prop in your modal screen the animation out works!

const ModalScreen = (modal: {closeModal, currentModal}) => {
    const handleTransparentBackPress = () => {
        // NOTE: closeModal won't animate-out the screen if the modal name is not sent as param
        closeModal(currentModal);
  };

}

[teivienn]

Hi! I have the same problem. Solution offered @facuescobar working only when my modal include custom button for closing. I patched library and it's for work for me

[okcompewter]

@teivienn - I don't see that code anywhere in the package, where did you add/update that?

[teivienn]

@okcompewter lib/StackItem.tsx line 146

https://github.com/colorfy-software/react-native-modalfy/blob/1dda9c1f65fd076f61d61b46f592fb05d230b7a3/lib/StackItem.tsx#L146

[okcompewter]

ah - my search wasn't picking it up for some reason, thanks!

[Omelyan]

Besides that, background (container) fades in, but does not fade out, instead it instantly disappears... Also, there is no animation at all when pressing physical back button. Authors seems to be blind. So much blah-blah-blah on their introductory website, and so many primitive (!) bugs... npm uninstall.

[fermmm]

Me too npm uninstall I realised 90% of the packages that I install are buggy like this one, takes the same time dealing with this than doing the modal system myself the way I like, it's better to reduce the amount of packages I think

[CharlesMangwa]

Hey everyone! First things first, thank you all for your patience regarding this (really) long-standing issue. I'm pleased to announce that all the bugs you've mentioned in this issue have been addressed (ce6040f2170a6a9c106392ef98f3e101fedcfc6c • 091c9afc030364db94e6eadbe1a31ba8f0071d7c • 3bdc9df52edce52d9e54b94f6873ebff758860d9). These fixes are available in the freshly released Modalfy v3 🥳 If you're still using Modalfy, please give it a try and let us know!

@facuescobar Thank you for pointing us in the right direction for the fix! It actually helped us uncover some other bugs 🙌

@fermmm Glad to know that you were able to find an easier way to handle modals that worked for you! At the end of the day, using libraries is sometimes a tradeoff that's not worth taking indeed.

@Omelyan Thanks for the feedback, there were quite some annoying bugs indeed. Now I'm especially happy to read that you were also able to pick onto so other bugs that were still going under the radar. I can't wait to review your pull requests addressing all the primitives bugs you've found!

[Omelyan]

@CharlesMangwa Cool, but no visible changes)) still no animation on closing modal, no animation on physical Back press, but now it throws an exception on pressing background: "[object object] is not a valid modal name. Did you mean any of these..." version number 3 and still unusable...

[CharlesMangwa]

Hey @Omelyan, thanks for the feedback: that sounds quite annoying indeed!

So about the animations, I'd suggest double-checking how you've set up your different animations inside the root modal stack config. As you may know, by default: Modalfy does not provide any animation because you might just not want any. So if there's an error on your end on that side, no animation will occur.

Regarding the exception you got, at first glance, it seems that you're calling openModal() or closeModal() and providing an object instead of a string as the initial argument. If this is however coming from the library, feel free to provide a reproducible demo if you have time and I'll be more than happy to look into it and release a patch that'd address the issues you've been facing.

Overall, however, all of the issues you've mentioned seem to be on your side as none of them are reproducible in the updated Expo demo. But please, do correct me if I missed anything!

As well: thanks a lot for taking the time to check out Modalfy v3 so quickly right after its release!

[tp26610]

Hi, @CharlesMangwa

I've reproduced the issue while calling closeModal.

The video is showing that animation doesn't work while calling closeModal and the animation works while user clicks background to dismiss the modal.

The code is here: https://snack.expo.dev/@tp26610/react-native-modalfy

https://user-images.githubusercontent.com/9457401/162485480-6b794759-87a2-43c5-bdbe-2467a0cdc6fc.mov

[CharlesMangwa]

Hey @tp26610! Thanks for reaching out. I look into the issue you reported and it seems like the origin of the error is actually displayed in the video you shared.

As you can see in your repro, the onPress is highlighted as an error by TypeScript. If you look into why it's complaining, you'd get this:

By writing onPress={closeModal}, you're calling closeModal() with a GestureResponderEvent as 1st argument, where closeModal() expects a modal name string (or just undefined). The "fix" is to simply call the function instead of using the shorthand which makes the error go away and the TouchableOpacity button work:

[tp26610]

@CharlesMangwa Yeah, this way fixes the animation for modal. There is another after doing that. The background doesn't fade out for the alpha value while calling closeModal like video below:

https://user-images.githubusercontent.com/9457401/165431660-cb1cc6c0-bed7-41e9-bfb9-e4242e2bd64b.mov

You can try this code to reproduce: https://snack.expo.dev/@tp26610/react-native-modalfy

[CharlesMangwa]

Hi @tp26610! Please simply update your project to v3.2.0, that issue has already been fixed there:

https://user-images.githubusercontent.com/8975443/165439754-a31eec74-003d-47a4-9cba-103425be7e3d.mov