New features required use custom modal

[boboxiaodd]

add animationType to modal.show options add modal.hide() to close modal in custom modal content view

[bezenson]

1. Doesn't animationWorklet prop works for you? Or you want to have different animations for different modals?
2. Could you explain more? What you mean by "custom modal content view"?

[boboxiaodd]

Yes, i want to have different animations for different modals

this is my code ,a popup view modal if i add a custom button , it's need too much code,
i think we can export actionCallback or add modal.hide()

import React,{useEffect} from 'react';
import {Text, View, Dimensions } from 'react-native';
import {PressableOpacity} from 'react-native-pressable-opacity/src/PressableOpacity';
import {parseUrl} from '../common/helper';
import FastImage from 'react-native-fast-image';
const Window = Dimensions.get('screen');
const TimerView = (props) => {
    useEffect(() => {
        setTimeout(() => {
            props.action();
        },props.duration);
    },[]);
    return <View style={{display:'none'}} />;
}
const PopupModal = ({ WrapperComponent }) => {
    return (
        <WrapperComponent>
            {({ title,content,style,button,closeButtonStyle,duration, onPress }, actionCallback) => (
                <View style={[{width: Window.width - 40,alignItems:'center',paddingHorizontal:10,paddingVertical:10,borderRadius:10},style ? style: {}]}>
                    {title !== '' &&
                        <View style={{justifyContent: 'center', alignItems: 'center', height: 40, width: '100%'}}>
                            <Text style={{fontSize: 18, color: '#333', fontWeight: '500'}}>{title}</Text>
                            <PressableOpacity activeOpacity={0.5} style={{position: 'absolute', right: 8, top: 10}} onPress={actionCallback(onPress)}><FastImage style={{width: 22, height: 22}} source={{uri: parseUrl('icon/my/ic-pay-close.png')}}/></PressableOpacity>
                        </View>
                    }
                    {content}
                    {typeof (button) === 'object' && button.map((item,index) =>
                        <PressableOpacity key={index} onPress={actionCallback(item.onPress)} activeOpacity={0.5} style={item.style}>
                            {item.title}
                        </PressableOpacity>
                        )
                    }
                    {closeButtonStyle && <PressableOpacity activeOpacity={0.5} onPress={actionCallback(onPress)} style={closeButtonStyle}><FastImage style={{width: 22, height: 22}} source={{uri: parseUrl('icon/my/ic-pay-close.png')}}/></PressableOpacity>}
                    {duration && <TimerView duration={duration} action={actionCallback(()=> {})} />}
                </View>
            )}
        </WrapperComponent>
    );
}

export default PopupModal;

modal.show('popup',{
                title:'',
                style: {width:300,height:350},
                content:
                    <View style={{flex:1,alignItems:'center',paddingHorizontal:10,position:'relative'}}>
                        <VipPopupView nickname={res.nickname} title={res.vip_title} vipIcon={res.icon} />
                    </View>,
                closeButtonStyle:{
                    position:'absolute',
                    right: 30,
                    top: 10,
                    zIndex:100,
                },
                button:[{
                        style: {position:'absolute',bottom:50,zIndex: 200,flexDirection:'row',width:'100%',justifyContent:'center'},
                        title: <Text style={{fontSize: 18, color: 'white', fontWeight: '500'}}>Press to VIP</Text>,
                        onPress: () => {
                            navigation.navigate('VipScreen');
                        }
                    }],
                duration: 5000,
            });