react-native-modal-2
Version:
A powerful, customizable modal library for React Native with smooth animations, touchable backdrop, and comprehensive TypeScript support.
222 lines (221 loc) • 9.76 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");
/**
* AnimatedModal component with various animation options
*/
const AnimatedModal = (_a) => {
var { visible, onBackdropPress, children, backdropOpacity = 0.5, backdropColor = "#000", contentContainerStyle, style, closeOnBackdropPress = true, animationDuration = 300, statusBarTranslucent = true, animationIn = "fade",
// eslint-disable-next-line @typescript-eslint/no-unused-vars
animationOut = animationIn, // Default to same animation for in/out
animationDirection = "up",
// eslint-disable-next-line @typescript-eslint/no-unused-vars
avoidKeyboard = false } = _a, // Will be implemented in future versions
otherProps = __rest(_a, ["visible", "onBackdropPress", "children", "backdropOpacity", "backdropColor", "contentContainerStyle", "style", "closeOnBackdropPress", "animationDuration", "statusBarTranslucent", "animationIn", "animationOut", "animationDirection", "avoidKeyboard"]);
// State to control React Native's Modal visibility
const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
// Animation progress value - use useRef to maintain the same instance
const animationProgress = (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 (to show backdrop and content)
setModalVisible(true);
// Reset animation value
animationProgress.setValue(0);
// Then animate in
react_native_1.Animated.timing(animationProgress, {
toValue: 1,
duration: animationDuration,
useNativeDriver: true,
}).start();
}
else {
// Animate out
react_native_1.Animated.timing(animationProgress, {
toValue: 0,
duration: animationDuration,
useNativeDriver: true,
}).start(({ finished }) => {
// Hide modal after animation completes
if (finished) {
setModalVisible(false);
}
});
}
}, [visible, animationDuration, animationProgress]);
// Backdrop animation style
const backdropAnimationStyle = {
opacity: animationProgress.interpolate({
inputRange: [0, 1],
outputRange: [0, backdropOpacity],
}),
backgroundColor: backdropColor,
};
// Get the content animation style based on animation type
const getContentAnimationStyle = () => {
switch (animationIn) {
case "fade":
return {
opacity: animationProgress,
};
case "slide":
if (animationDirection === "up") {
return {
transform: [
{
translateY: animationProgress.interpolate({
inputRange: [0, 1],
outputRange: [height, 0],
}),
},
],
};
}
else if (animationDirection === "down") {
return {
transform: [
{
translateY: animationProgress.interpolate({
inputRange: [0, 1],
outputRange: [-height, 0],
}),
},
],
};
}
else if (animationDirection === "left") {
return {
transform: [
{
translateX: animationProgress.interpolate({
inputRange: [0, 1],
outputRange: [width, 0],
}),
},
],
};
}
else {
return {
transform: [
{
translateX: animationProgress.interpolate({
inputRange: [0, 1],
outputRange: [-width, 0],
}),
},
],
};
}
case "bounce":
if (animationDirection === "up" || animationDirection === "down") {
return {
transform: [
{
translateY: animationProgress.interpolate({
inputRange: [0, 0.5, 0.8, 1],
outputRange: [
animationDirection === "up" ? height : -height,
animationDirection === "up" ? -20 : 20,
animationDirection === "up" ? 10 : -10,
0,
],
}),
},
],
};
}
else {
return {
transform: [
{
translateX: animationProgress.interpolate({
inputRange: [0, 0.5, 0.8, 1],
outputRange: [
animationDirection === "left" ? width : -width,
animationDirection === "left" ? -20 : 20,
animationDirection === "left" ? 10 : -10,
0,
],
}),
},
],
};
}
case "zoom":
return {
transform: [
{
scale: animationProgress.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
}),
},
],
};
default:
return {
opacity: animationProgress,
};
}
};
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: () => closeOnBackdropPress && onBackdropPress() },
react_1.default.createElement(react_native_1.Animated.View, { style: [styles.backdrop, backdropAnimationStyle] })),
react_1.default.createElement(react_native_1.Animated.View, { style: [contentContainerStyle, getContentAnimationStyle()] }, 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 = AnimatedModal;