@uiw/react-native/lib/Modal/index.js

UIW for React Native

import React, { useState, useMemo, useRef, useEffect, useReducer } from 'react';
import { Animated, StyleSheet, Dimensions } from 'react-native';
import MaskLayer from '../MaskLayer';
import { useTheme } from '@shopify/restyle';
const MainWidth = Dimensions.get('window').width;
const MainHeight = Dimensions.get('window').height;
export const reducer = (state, action) => {
    return {
        ...state,
        ...action,
    };
};
const Modal = (props = {}) => {
    const { onClosed, visible, children, placement = 'bottom', containerStyle, ...otherProps } = props;
    const theme = useTheme();
    const AnimatedOpacity = useRef(new Animated.Value(0)).current;
    const [{ layoutHeight, layoutWidth }, dispatch] = useReducer(reducer, { layoutHeight: 0, layoutWidth: 0 });
    const [translateValue] = useState(new Animated.Value(0));
    const { isVertical, isHorizontal } = useMemo(() => {
        const isVertical = /^(top|bottom)$/.test(placement);
        const isHorizontal = /^(left|right)$/.test(placement);
        return { isVertical, isHorizontal };
    }, [placement]);
    useEffect(() => {
        function getTransformSize() {
            if (placement === 'top') {
                return -layoutHeight;
            }
            if (placement === 'bottom') {
                return layoutHeight;
            }
            if (placement === 'left') {
                return -layoutWidth;
            }
            if (placement === 'right') {
                return layoutWidth;
            }
            if (placement === 'middle') {
                return layoutWidth;
            }
            return 0;
        }
        const result = getTransformSize();
        if (!result)
            return;
        if (visible) {
            translateValue.setValue(result);
            Animated.parallel([
                Animated.timing(AnimatedOpacity, {
                    toValue: 1,
                    duration: 0,
                    useNativeDriver: false,
                }),
                Animated.spring(translateValue, {
                    toValue: 0,
                    overshootClamping: true,
                    useNativeDriver: true,
                }),
            ]).start();
        }
        if (!visible) {
            Animated.parallel([
                Animated.spring(translateValue, {
                    toValue: result,
                    overshootClamping: true,
                    useNativeDriver: true,
                }),
                Animated.timing(AnimatedOpacity, {
                    toValue: 0,
                    duration: 0,
                    useNativeDriver: false,
                }),
            ]).start();
        }
    }, [visible, layoutHeight, layoutWidth, placement, translateValue, AnimatedOpacity]);
    const translateStyle = {};
    if (isVertical) {
        translateStyle.translateY = translateValue;
    }
    if (isHorizontal) {
        translateStyle.translateX = translateValue;
    }
    if (placement === 'middle') {
        translateStyle.translateY = translateValue;
    }
    const child = useMemo(() => (<Animated.View style={[
            styles.content,
            placement && styles[placement],
            placement === 'middle' && styles.middle_warp,
            { opacity: AnimatedOpacity },
            containerStyle,
        ]}>
        <Animated.View onLayout={(event) => {
            const { height, width } = event.nativeEvent.layout;
            if (placement === 'middle') {
                dispatch({ layoutHeight: height, layoutWidth: width });
            }
            else if (!layoutHeight && isVertical) {
                dispatch({ layoutHeight: height });
            }
            else if (!layoutWidth && isHorizontal) {
                dispatch({ layoutWidth: width });
            }
        }} style={[
            styles.content,
            placement && styles[placement],
            {
                transform: [translateStyle],
                backgroundColor: theme.colors.mask || '#fff',
                position: 'relative',
                zIndex: 10000,
            },
        ]}>
          {children}
        </Animated.View>
      </Animated.View>), [
        children,
        AnimatedOpacity,
        containerStyle,
        isHorizontal,
        isVertical,
        layoutHeight,
        layoutWidth,
        placement,
        theme.colors.mask,
        translateStyle,
    ]);
    return (<MaskLayer {...otherProps} visible={visible} onDismiss={onClosed}>
      {child}
    </MaskLayer>);
};
export default Modal;
const styles = StyleSheet.create({
    content: {
        position: 'absolute',
        zIndex: 9999,
    },
    top: {
        top: 0,
        width: MainWidth,
        left: 0,
        right: 0,
    },
    bottom: {
        bottom: 0,
        left: 0,
        width: MainWidth,
        right: 0,
    },
    left: {
        bottom: 0,
        top: 0,
        height: MainHeight,
        left: 0,
    },
    right: {
        bottom: 0,
        top: 0,
        height: MainHeight,
        right: 0,
    },
    middle: {},
    middle_warp: {
        bottom: 0,
        top: 0,
        right: 0,
        left: 0,
        justifyContent: 'center',
        alignItems: 'center',
    },
});