diff --git a/src/components/ModalView/ModalView.tsx b/src/components/ModalView/ModalView.tsx index ab59ca24..88a6c214 100644 --- a/src/components/ModalView/ModalView.tsx +++ b/src/components/ModalView/ModalView.tsx @@ -78,6 +78,7 @@ export class ModalView extends enableSwipeGesture: defaultProps.enableSwipeGesture, isModalInPresentation: defaultProps.isModalInPresentation, isModalInFocus: false, + focusState: 'INITIAL', }; } @@ -483,6 +484,10 @@ export class ModalView extends ModalViewEmitterEvents.onModalWillFocus, event.nativeEvent ); + + this.setState({ + focusState: event.nativeEvent.modalFocusState, + }); }; private _handleOnModalDidFocus: OnModalDidFocusEvent = (event) => { @@ -509,6 +514,7 @@ export class ModalView extends this.setState({ isModalInFocus: true, + focusState: event.nativeEvent.modalFocusState, }); }; @@ -522,6 +528,10 @@ export class ModalView extends ModalViewEmitterEvents.onModalWillBlur, event.nativeEvent ); + + this.setState({ + focusState: event.nativeEvent.modalFocusState, + }); }; private _handleOnModalDidBlur: OnModalDidBlurEvent = (event) => { @@ -548,6 +558,7 @@ export class ModalView extends this.setState({ isModalInFocus: false, + focusState: event.nativeEvent.modalFocusState, }); }; @@ -620,7 +631,7 @@ export class ModalView extends ); }; - private _handleOnModalDetentDidCompute: + private _handleOnModalDetentDidCompute: OnModalDetentDidComputeEvent = (event) => { const props = this.props; @@ -736,6 +747,7 @@ export class ModalView extends value={{ isModalInFocus: state.isModalInFocus, isModalVisible: state.isModalVisible, + focusState: state.focusState, // pass down function to get modal refs getModalRef: this._handleGetModalRef, diff --git a/src/components/ModalView/ModalViewState.ts b/src/components/ModalView/ModalViewState.ts index 500bfb03..c4ff86b7 100644 --- a/src/components/ModalView/ModalViewState.ts +++ b/src/components/ModalView/ModalViewState.ts @@ -1,7 +1,11 @@ +import type { RNIModalFocusState } from 'src/types/RNIModalTypes'; + export type ModalViewState = { isModalVisible: boolean; childProps: unknown; enableSwipeGesture: boolean; isModalInPresentation: boolean; isModalInFocus: boolean; + + focusState: RNIModalFocusState; }; diff --git a/src/components/ModalView/index.ts b/src/components/ModalView/index.ts index 7885e561..a3952db5 100644 --- a/src/components/ModalView/index.ts +++ b/src/components/ModalView/index.ts @@ -1,4 +1,5 @@ export * from './ModalView'; export * from './ModalViewProps'; +export * from './ModalViewState'; export * from './ModalViewEmitter'; export * from './ModalViewEmitterDeprecated'; diff --git a/src/context/ModalContext.ts b/src/context/ModalContext.ts index 58e1453c..8a6f2d5a 100644 --- a/src/context/ModalContext.ts +++ b/src/context/ModalContext.ts @@ -16,6 +16,7 @@ export type ModalContextType = Partial< ModalViewState, | 'isModalInFocus' | 'isModalVisible' + | 'focusState' > // `ModalView` Methods #2 & { diff --git a/src/types/RNIModalTypes.ts b/src/types/RNIModalTypes.ts index 0f3db326..7be32b8a 100644 --- a/src/types/RNIModalTypes.ts +++ b/src/types/RNIModalTypes.ts @@ -10,3 +10,10 @@ export type RNIModalCustomSheetDetent = { key: string; sizeConstant: number; }; + +export type RNIModalFocusState = + | 'INITIAL' + | 'FOCUSING' + | 'FOCUSED' + | 'BLURRING' + | 'BLURRED';