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

Question

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
– Tyler Williams, Commented Feb 15, 2022 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
– Amit chakraborty, Commented Mar 1, 2022 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
– Amit chakraborty, Commented Mar 1, 2022 at 15:33

user29114910 · Accepted Answer · 2025-02-10 18:30:43Z

0

If I understand you correctly, you are trying to set the options for every modal separately. This can be accomplished by

const stack = createModalStack({Demo1: {backdropOpacity: 0.5}, Demo2: {backdropOpacity: 0.8}});

For more information, refer to the docs: https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modalstackconfig

answered Feb 10 at 18:30

user29114910

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related