react-native-modal-2
Version:
A powerful, customizable modal library for React Native with smooth animations, touchable backdrop, and comprehensive TypeScript support.
136 lines (135 loc) • 5.7 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const { height, width } = react_native_1.Dimensions.get("window");
/**
* Modal component with basic animation options
*/
const Modal = (_a) => {
var { visible, onBackdropPress, children, backdropOpacity = 0.5, backdropColor = "#000", contentContainerStyle, style, closeOnBackdropPress = true, animationDuration = 300, statusBarTranslucent = true, animationType = "fade" } = _a, otherProps = __rest(_a, ["visible", "onBackdropPress", "children", "backdropOpacity", "backdropColor", "contentContainerStyle", "style", "closeOnBackdropPress", "animationDuration", "statusBarTranslucent", "animationType"]);
// State to control React Native's Modal visibility
const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
// Animation value - use useRef to maintain same instance
const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
// Initialize modal when visible changes
(0, react_1.useEffect)(() => {
if (visible) {
// Make modal visible first
setModalVisible(true);
// Reset animation value
fadeAnim.setValue(0);
// Then animate in
react_native_1.Animated.timing(fadeAnim, {
toValue: 1,
duration: animationDuration,
useNativeDriver: true,
}).start();
}
else {
// Animate out
react_native_1.Animated.timing(fadeAnim, {
toValue: 0,
duration: animationDuration,
useNativeDriver: true,
}).start(({ finished }) => {
// Hide modal after animation completes
if (finished) {
setModalVisible(false);
}
});
}
}, [visible, animationDuration]);
// Backdrop animation style
const backdropStyle = {
opacity: fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, backdropOpacity],
}),
backgroundColor: backdropColor,
};
// Content animation style
const contentAnimationStyle = () => {
switch (animationType) {
case "slide":
return {
transform: [
{
translateY: fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: [height, 0],
}),
},
],
};
case "fade":
return {
opacity: fadeAnim,
};
default:
return {};
}
};
// Handle backdrop press
const handleBackdropPress = () => {
if (closeOnBackdropPress) {
onBackdropPress();
}
};
return (react_1.default.createElement(react_native_1.Modal, Object.assign({ transparent: true, visible: modalVisible, onRequestClose: onBackdropPress, statusBarTranslucent: statusBarTranslucent, animationType: "none" }, otherProps),
react_1.default.createElement(react_native_1.View, { style: [styles.container, style] },
react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: handleBackdropPress },
react_1.default.createElement(react_native_1.Animated.View, { style: [styles.backdrop, backdropStyle] })),
react_1.default.createElement(react_native_1.Animated.View, { style: [contentContainerStyle, contentAnimationStyle()] }, children))));
};
const styles = react_native_1.StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
backdrop: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
width,
height: react_native_1.Platform.OS === "ios" ? height : "100%",
},
});
exports.default = Modal;