diff --git a/src/components/ModalSheetView/ModalSheetView.tsx b/src/components/ModalSheetView/ModalSheetView.tsx index e0f85a1d..dc8c222b 100644 --- a/src/components/ModalSheetView/ModalSheetView.tsx +++ b/src/components/ModalSheetView/ModalSheetView.tsx @@ -7,6 +7,8 @@ import type { ModalSheetViewContentProps } from './ModalSheetViewContentTypes'; import type { ModalSheetContentMap } from './ModalSheetContentMap'; import { RNIModalSheetView, type RNIModalSheetViewRef } from '../../native_components/RNIModalSheetVIew'; +import { ModalSheetViewContext, type ModalSheetViewContextType } from '../../context/ModalSheetViewContext'; +import { useLazyRef } from '../../hooks/useLazyRef'; export const ModalSheetView = React.forwardRef< @@ -42,14 +44,14 @@ export const ModalSheetView = React.forwardRef< !isModalContentLazy || shouldExplicitlyMountModalContents; - React.useImperativeHandle(ref, () => ({ + const rawRef = useLazyRef(() => ({ presentModal: async (commandArgs) => { if(nativeRef.current == null) { throw Error("Unable to get ref to native sheet"); }; const shouldWaitToMount = - !shouldExplicitlyMountModalContents + !shouldExplicitlyMountModalContents && isModalContentLazy; setShouldExplicitlyMountModalContents(true); @@ -99,6 +101,8 @@ export const ModalSheetView = React.forwardRef< }, })); + React.useImperativeHandle(ref, () => rawRef.current!); + const shouldEnableDebugBackgroundColors = props.shouldEnableDebugBackgroundColors ?? false; @@ -112,20 +116,26 @@ export const ModalSheetView = React.forwardRef< ); }); + const contextValue: ModalSheetViewContextType = { + getModalSheetViewRef: () => rawRef.current! + }; + return ( - nativeRef.current = ref} - style={styles.nativeModalSheet} - onModalDidHide={(event) => { - setShouldExplicitlyMountModalContents(false); - - props.onModalDidHide?.(event); - event.stopPropagation(); - }} - > - {children} - + + nativeRef.current = ref} + style={styles.nativeModalSheet} + onModalDidHide={(event) => { + setShouldExplicitlyMountModalContents(false); + + props.onModalDidHide?.(event); + event.stopPropagation(); + }} + > + {children} + + ); }); diff --git a/src/context/ModalSheetViewContext.ts b/src/context/ModalSheetViewContext.ts new file mode 100644 index 00000000..9ccfe63a --- /dev/null +++ b/src/context/ModalSheetViewContext.ts @@ -0,0 +1,9 @@ +import React from 'react'; +import type { ModalSheetViewRef } from '../components/ModalSheetView'; + +export type ModalSheetViewContextType = { + getModalSheetViewRef: () => ModalSheetViewRef; +}; + +export const ModalSheetViewContext = + React.createContext(undefined); diff --git a/src/index.ts b/src/index.ts index f76d3c53..8e07b688 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,6 @@ export * from './components/ModalSheetView'; +export * from './context/ModalSheetViewContext'; export type * from './types/ModalViewControllerMetrics'; export type * from './types/PresentationControllerMetrics';