diff --git a/README.md b/README.md index 70d23b3..3619482 100644 --- a/README.md +++ b/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') + +--- diff --git a/src/ModalView.tsx b/src/ModalView.tsx index 91b6bca..9eb69dc 100644 --- a/src/ModalView.tsx +++ b/src/ModalView.tsx @@ -12,6 +12,7 @@ import { import { ScrollContextResetter } from './ScrollContextResetter'; import RNTModalView from './RNTModalView'; +import { useScreenDimensions } from './useScreenDimensions'; export type BackdropProps = Omit & { style?: StyleProp; @@ -28,6 +29,10 @@ export type ModalViewProps = { onRequestDismiss?: (calledBy: DismissalSource) => void; contentContainerStyle?: StyleProp; backdropProps?: BackdropProps; + containerSize?: { + width: number; + height: number; + } }; const backdropAccessibilityLabel = 'Backdrop'; @@ -39,9 +44,12 @@ export const ModalView: FC = ({ 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 ( @@ -67,7 +75,7 @@ export const ModalView: FC = ({ {children} diff --git a/src/useScreenDimensions.ts b/src/useScreenDimensions.ts new file mode 100644 index 0000000..c067736 --- /dev/null +++ b/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; +};