0

how can we reconfigure modals using react-native-modalfy separately?

like in App.tsx i have configured modal like this below.

I want to change position and animation style for DemoModal2.

import { createModalStack } from 'react-native-modalfy';

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

export const ModalStack = createModalStack({
 demo1:DemoModal1,
 demo2:DemoModal2
 }, {
    animateInConfig: {
    easing: Easing.inOut(Easing.exp),
    duration: 900,
},
animateOutConfig: {
    easing: Easing.inOut(Easing.exp),
    duration: 900,
},
backdropOpacity: 0.6,
position: 'top',

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

similarly there will be more modals. So i need some examples..

  • Hi Amit, I'm having trouble understanding your question. Do you have any other visual aids or code samples you can provide? What behavior happens with this configuration, and how does that differ from your requirements? – Tyler Williams Feb 15 '22 at 17:43
  • ok let me explain the scenario. I have multiple modals like demo1: Demo Model 1, which have same configuration like you can name them demo3, demo4 so on.. . and I need different configuration for different modals like demo2, demo9, demo11. suppose in top section in like header i need demo1 type of modals.. and that header is being every screen in my project. but suppose in a particular screen I have to use different type like demo2 modal too in a different component. so in this special case I am getting errors. For using different different modalStack options. – Amit chakraborty Mar 01 '22 at 15:27
  • like the common configuration modalStack is in App.tsx. but i am creating different modal Stack with different config option for some particular screen. which must have header modals with common modal stack as i mentioned and also this different modal stack config options.. in this case i am getting errors. So how can i solve this scenario? – Amit chakraborty Mar 01 '22 at 15:33

0 Answers0