Allow to control content size

README.md

@@ -22,6 +22,12 @@ or
 yarn add react-native-multiple-modals
 ```
 
+#### iOS
+
+```bash
+pod install --project-directory=ios
+```
+
 ## Usage
 
 ```tsx
@@ -72,3 +78,11 @@ When backdropProps are no longer enough.
 > _**NOTE**_: While rendering custom backdrop `onRequestClose` is not called, so you should handle backdrop press by yourself
 
 ---
+
+### `containerSize?: { width: number, height: number }`
+
+Use to change the modals's rendering area. May be useful for foldable devices.
+
+Default: Dimensions.get('screen')
+
+---

src/ModalView.tsx

@@ -12,6 +12,7 @@ import {
 
 import { ScrollContextResetter } from './ScrollContextResetter';
 import RNTModalView from './RNTModalView';
+import { useScreenDimensions } from './useScreenDimensions';
 
 export type BackdropProps = Omit<PressableProps, 'onPress' | 'style'> & {
   style?: StyleProp<ViewStyle>;
@@ -28,6 +29,10 @@ export type ModalViewProps = {
   onRequestDismiss?: (calledBy: DismissalSource) => void;
   contentContainerStyle?: StyleProp<ViewStyle>;
   backdropProps?: BackdropProps;
+  containerSize?: {
+    width: number;
+    height: number;
+  }
 };
 
 const backdropAccessibilityLabel = 'Backdrop';
@@ -39,9 +44,12 @@ export const ModalView: FC<ModalViewProps> = ({
   onRequestDismiss,
   backdropProps,
   contentContainerStyle,
+  containerSize,
 }) => {
-  const windowDimensions = useWindowDimensions();
-  const fullScreenStyle = [windowDimensions, styles.container];
+  const screenDimensions = useScreenDimensions();
+  const preferredContainerSize = containerSize ?? screenDimensions;
+
+  const fullScreenStyle = [preferredContainerSize, styles.container];
 
   return (
     <View style={fullScreenStyle}>
@@ -67,7 +75,7 @@ export const ModalView: FC<ModalViewProps> = ({
           <ScrollContextResetter>
             <View
               pointerEvents='box-none'
-              style={[windowDimensions, styles.content, contentContainerStyle]}
+              style={[preferredContainerSize, styles.content, contentContainerStyle]}
             >
               {children}
             </View>

src/useScreenDimensions.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { Dimensions, ScaledSize } from 'react-native';
+
+export const useScreenDimensions = (): ScaledSize => {
+  const [screenDimensions, setScreenDimensions] = useState(
+    Dimensions.get('screen'),
+  );
+
+  useEffect(() => {
+    const listener = Dimensions.addEventListener('change', ({ screen }) => {
+      setScreenDimensions(screen);
+    });
+
+    return listener.remove;
+  }, []);
+
+  return screenDimensions;
+};