Animation conflict about react-native-modalfy HOT 1 CLOSED

Hi @1280103995! The tl;dr; version is that you're closing the currentModal before opening 'DefaultModal'.

Modalfy initial purpose is to help you stack your different modals. So if you remove closeModal():

<Button
  title={'show DefaultModal'}
  onPress={() => {
-    modal.closeModal()
    modal.openModal('DefaultModal')
  }}
/>

things should work as expected and your 'DefaultModal' will appear on top of BottomModal.

However if you absolutely want to open 'DefaultModal' and not have 'BottomModal' opened once you'll close 'DefaultModal', you'd have to implement a setTimeout(). This is necessary has you have a 300ms closing animation in 'BottomModal':

animateOutConfig: {
  easing: Easing.bezier(0.42, -0.03, 0.27, 0.95),
  duration: 300,
},

and Modalfy removes item from the stack after the animation ran. So in your case, you have:

1. Button 'show DefaultModal' is pressed
2. 'BottomModal' closing animation starts - t+0ms
3. openModal('DefaultModal') is called
4. 'DefaultModal' is now the currentModal for Modalfy
5. 'BottomModal' closing animation finishes - t+300ms
6. Modalfy calls closeModal() under the hood on currentModal ('DefaultModal' instead of the desired 'BottomModal')

What you'd have to do is wait for the 300ms animation to be completed before opening 'DefaultModal'. By doing this you'd have both your in and out animations and 'BottomModal' won't be opened when you'll close 'DefaultModal':

<Button
  title={'show DefaultModal'}
  onPress={() => {
    modal.closeModal()
-    modal.openModal('DefaultModal')
+   setTimeout(() => modal.openModal('DefaultModal'), 300)
  }}
/>

Hope this helped and answered your question. I'm glad to read that Modalfy is helping you in your projects, hope to be able to see them soon in the stores! Feel free to reopen this issue if needed!

from react-native-modalfy.