🛠 Refactor: Extract to RNIModalView

Summary: Extract `RNIModalView` native view component to `src/native_components/RNIModalView`.

src/ModalView.ios.js

@@ -8,17 +8,7 @@ import { EventEmitter   } from './functions/EventEmitter';
 import { RequestFactory } from './functions/RequestFactory';
 import { ModalEventKeys } from './constants/Enums';
 import { ModalContext   } from './context/ModalContext';
-
-
-const componentName   = "RNIModalView";
-const NativeCommands  = UIManager[componentName]?.Commands;
-const NativeConstants = UIManager[componentName]?.Constants;
-const NativeModalView = requireNativeComponent(componentName);
-
-
-export const AvailableBlurEffectStyles   = NativeConstants?.availableBlurEffectStyles   ?? [];
-export const AvailablePresentationStyles = NativeConstants?.availablePresentationStyles ?? [];
-
+import { RNIModalView, RNIModalViewCommands } from './native_components/RNIModalView';
 
 const NATIVE_PROP_KEYS = {
   // Modal Native Props: Event Callbacks
@@ -46,11 +36,6 @@ const NATIVE_PROP_KEYS = {
   modalBGBlurEffectStyle: 'modalBGBlurEffectStyle',
 };
 
-const COMMAND_KEYS = {
-  requestModalInfo        : 'requestModalInfo'        ,
-  requestModalPresentation: 'requestModalPresentation',
-};
-
 const VirtualizedListContext = React.createContext(null);
 // fix for react-native 0.60
 const hasScrollViewContext = (ScrollView.Context?.Provider != null);
@@ -155,7 +140,7 @@ export class ModalView extends React.PureComponent {
       // request modal to open/close
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.nativeModalViewRef),
-        NativeCommands[COMMAND_KEYS.requestModalPresentation],
+        RNIModalViewCommands.requestModalPresentation,
         [requestID, nextVisible]
       );
 
@@ -186,7 +171,7 @@ export class ModalView extends React.PureComponent {
       // request modal to send modal info
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.nativeModalViewRef),
-        NativeCommands[COMMAND_KEYS.requestModalInfo],
+        RNIModalViewCommands.requestModalInfo,
         [requestID]
       );
 
@@ -311,7 +296,7 @@ export class ModalView extends React.PureComponent {
     };
 
     return(
-      <NativeModalView
+      <RNIModalView
         ref={r => this.nativeModalViewRef = r}
         style={styles.rootContainer}
         onStartShouldSetResponder={this._shouldSetResponder}
@@ -333,7 +318,7 @@ export class ModalView extends React.PureComponent {
             })}
           </View>
         )}
-      </NativeModalView>
+      </RNIModalView>
     );
   };
 

src/ModalView.js

@@ -1,8 +1,5 @@
 import React from 'react';
 
-export const AvailableBlurEffectStyles   = [];
-export const AvailablePresentationStyles = [];
-
 
 export class ModalView extends React.PureComponent {
   render(){

src/index.ts

@@ -1,8 +1,9 @@
-
 export * from './ModalView';
 export * from './ModalViewModule';
 export * from './constants/Enums';
 export * from './context/ModalContext';
-export * from './hoc/withModalLifecycle';export * from './types/UIModalTypes';
+export * from './hoc/withModalLifecycle';
+
+export * from './native_components/RNIModalView';
 
-//
+export * from './types/UIModalTypes';

src/native_components/RNIModalView/RNIModalView.ts

@@ -0,0 +1,35 @@
+import {
+  View,
+  UIManager,
+  requireNativeComponent,
+  Platform,
+  HostComponent,
+} from 'react-native';
+
+import type {
+  RNIModalViewCommandMap,
+  RNIModalViewConstantMap,
+  RNIModalViewProps,
+} from './RNIModalViewTypes';
+
+const nativeViewName = 'RNIModalView';
+
+/**
+ * Do not use `RNIModalView` if platform is not iOS.
+ */
+export const RNIModalView: HostComponent<RNIModalViewProps> = Platform.select({
+  ios: () => requireNativeComponent(nativeViewName) as any,
+  default: () => View,
+})();
+
+export const RNIModalViewCommands = UIManager[nativeViewName]
+  ?.Commands as RNIModalViewCommandMap;
+
+export const RNIModalViewConstants = UIManager[nativeViewName]
+  ?.Constants as RNIModalViewConstantMap;
+
+export const AvailableBlurEffectStyles =
+  RNIModalViewConstants?.availableBlurEffectStyles ?? [];
+
+export const AvailablePresentationStyles =
+  RNIModalViewConstants?.availablePresentationStyles ?? [];

src/native_components/RNIModalView/RNIModalViewEvents.ts

@@ -0,0 +1,94 @@
+/* eslint-disable no-trailing-spaces */
+
+import type { NativeSyntheticEvent } from 'react-native';
+
+// Event Object Types
+// ------------------
+
+export type RNIModalViewNativeEventBase = {
+  modalUUID: string;
+  isInFocus: boolean;
+  isPresented: boolean;
+  modalLevel: number;
+  modalLevelPrev: number;
+};
+
+// TODO
+export type OnModalShowEventObject = NativeSyntheticEvent<
+  RNIModalViewNativeEventBase & {}
+>;
+
+// TODO
+export type OnModalDismissEventObject = NativeSyntheticEvent<
+  RNIModalViewNativeEventBase & {}
+>;
+
+// TODO
+export type OnRequestResultEventObject = NativeSyntheticEvent<
+  RNIModalViewNativeEventBase & {}
+>;
+
+// TODO
+export type OnModalBlurEventObject = NativeSyntheticEvent<
+  RNIModalViewNativeEventBase & {}
+>;
+
+// TODO
+export type OnModalFocusEventObject = NativeSyntheticEvent<
+  RNIModalViewNativeEventBase & {}
+>;
+
+// TODO
+export type OnModalDidDismissEventObject = NativeSyntheticEvent<
+  RNIModalViewNativeEventBase & {}
+>;
+
+// TODO
+export type OnModalWillDismissEventObject = NativeSyntheticEvent<
+  RNIModalViewNativeEventBase & {}
+>;
+
+// TODO
+export type OnModalAttemptDismissEventObject = NativeSyntheticEvent<
+  RNIModalViewNativeEventBase & {}
+>;
+
+// Event Handler Types
+// -------------------
+
+// eslint-disable-next-line prettier/prettier
+export type OnModalShowEvent = (
+  event: OnModalShowEventObject
+) => void;
+
+// eslint-disable-next-line prettier/prettier
+export type OnModalDismissEvent = (
+  event: OnModalDismissEventObject
+) => void;
+
+// eslint-disable-next-line prettier/prettier
+export type OnRequestResultEvent = (
+  event: OnRequestResultEventObject
+) => void;
+
+// eslint-disable-next-line prettier/prettier
+export type OnModalBlurEvent = (
+  event: OnModalBlurEventObject
+) => void;
+
+// eslint-disable-next-line prettier/prettier
+export type OnModalFocusEvent = (
+  event: OnModalFocusEventObject
+) => void; 
+
+export type OnModalDidDismissEvent = (
+  event: OnModalDidDismissEventObject
+) => void;
+
+export type OnModalWillDismissEvent = (
+  event: OnModalWillDismissEventObject
+) => void;
+
+export type OnModalAttemptDismissEvent = (
+  event: OnModalAttemptDismissEventObject
+) => void;

src/native_components/RNIModalView/RNIModalViewTypes.ts

@@ -0,0 +1,68 @@
+import type { ViewProps } from 'react-native';
+
+import type { UIBlurEffectStyles } from 'src/types/UIBlurEffectStyles';
+
+import type {
+  UIModalPresentationStyle,
+  UIModalTransitionStyle,
+} from 'src/types/UIModalTypes';
+
+import type {
+  ViewManagerCommandMap,
+  ViewManagerConstantMap,
+} from 'src/types/ViewModuleRelatedTypes';
+
+import type {
+  OnModalShowEvent,
+  OnModalDismissEvent,
+  OnRequestResultEvent,
+  OnModalBlurEvent,
+  OnModalFocusEvent,
+  OnModalDidDismissEvent,
+  OnModalWillDismissEvent,
+  OnModalAttemptDismissEvent,
+} from './RNIModalViewEvents';
+
+export type RNIModalViewProps = ViewProps & {
+  // Props - Flags
+  // --------------
+
+  presentViaMount: boolean;
+  isModalBGBlurred: boolean;
+  enableSwipeGesture: boolean;
+  hideNonVisibleModals: boolean;
+  isModalBGTransparent: boolean;
+  isModalInPresentation: boolean;
+  allowModalForceDismiss: boolean;
+
+  // Props - Strings
+  // --------------
+
+  modalID: string;
+  modalTransitionStyle: UIModalTransitionStyle;
+  modalBGBlurEffectStyle: UIBlurEffectStyles;
+  modalPresentationStyle: UIModalPresentationStyle;
+
+  // Props - Events
+  // --------------
+
+  onModalShow: OnModalShowEvent;
+  onModalDismiss: OnModalDismissEvent;
+  onRequestResult: OnRequestResultEvent;
+
+  onModalBlur: OnModalBlurEvent;
+  onModalFocus: OnModalFocusEvent;
+
+  onModalDidDismiss: OnModalDidDismissEvent;
+  onModalWillDismiss: OnModalWillDismissEvent;
+  onModalAttemptDismiss: OnModalAttemptDismissEvent;
+};
+
+export type RNIModalViewCommandMap = ViewManagerCommandMap<
+  'requestModalInfo' | 'requestModalPresentation'
+>;
+
+export type RNIModalViewConstantMap = ViewManagerConstantMap<{
+  availableBlurEffectStyles: UIBlurEffectStyles[];
+  availablePresentationStyles: UIModalPresentationStyle[];
+}>;

src/native_components/RNIModalView/index.ts

@@ -0,0 +1,4 @@
+
+export * from './RNIModalView';
+export * from './RNIModalViewEvents';
+export * from './RNIModalViewTypes';