Modals with different heights

[fernandoamz]

I have on my app three different modal's height. but, when I need open two modals on the same time the modals overlap except the modals that have the same height. I would like to know if there is an option that I could to add to the transitionOptions for detect the height on everymodal automatically.

I read the documentation and I saw that you have a vh value but is not clear for me how I could use. I wait for your response. Thank you so much.

Here I let the code that I need change:

  transitionOptions: (animatedValue) => ({
    transform: [
      {
        translateY: animatedValue.interpolate({
          inputRange: [0, 1, 2],
          outputRange: [0, 0, -170],
        }),
      },
    ],
  }),
}

[CharlesMangwa]

Hi @fernandoamz! Unfortunately, as of right now: Modalfy doesn't provide such feature. If you need to calculate the dimensions of any of your modal, that'd be on you.

However, if you check the documentation of transitionOptions you'll see that you can interpolate the translateY of each of your modal based on their position in the stack. This would allow you to partially or completely hide modals that aren't your currently displayed modal.

For instance, for a given modal, you could have:

import { Dimensions } from 'react-native'

const { height } = Dimensions.get('screen')

// ...

transitionOptions: (animatedValue) => ({
    transform: [
      {
        translateY: animatedValue.interpolate({
          inputRange: [0, 1, 2],
          outputRange: [height, 0, height],
        }),
      },
    ],
  }),

This would make a modal appear from the bottom when it's the currentModal and then disappear towards the bottom as soon as it's not. height is vh that you saw in the documentation (sorry about that lack of clarity, updated the doc to make things clearer: thanks for the heads up).

Please bear in mind that Modalfy doesn't support having 2 modals opened at position: 1 at the same time, they're always stacked. I'm not sure if you wanted such behaviour but if that's the case you should have a single modal with different components inside of it.

Feel free to reopen the issue if I misunderstood your problem. Hope this helped!