💫 Update: Ex - ModalSheetViewTest01

dominicstop · Sep 29, 2024 · 3ece2bd · 3ece2bd
1 parent e430a5e
commit 3ece2bd
Showing 1 changed file with 32 additions and 9 deletions.
diff --git a/example/src/examples/ModalSheetViewTest01.tsx b/example/src/examples/ModalSheetViewTest01.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
 import { ExampleItemCard, ObjectPropertyDisplay, CardButton, Colors } from 'react-native-ios-utilities';
-import { ModalSheetView, ModalSheetViewMainContent, type ModalSheetViewRef } from 'react-native-ios-modal';
+import { ModalSheetView, ModalSheetViewContext, ModalSheetViewMainContent, type ModalSheetViewRef } from 'react-native-ios-modal';
 
 import type { ExampleItemProps } from './SharedExampleTypes';
 import type { ModalMetrics } from '../../../src/types/ModalMetrics';
@@ -12,6 +12,7 @@ let shouldEnableModalEventsLogging = false;
 
 export function ModalSheetViewTest01(props: ExampleItemProps) {
   const modalSheetViewRef = React.useRef<ModalSheetViewRef | null>(null);
+  const modalContext = React.useContext(ModalSheetViewContext);
 
   const [
     modalMetrics,
@@ -78,6 +79,11 @@ export function ModalSheetViewTest01(props: ExampleItemProps) {
         subtitle={'Present content as sheet'}
         onPress={async () => {
           setShouldMountRecursiveContent(true);
+          console.log(
+            'ModalSheetViewTest01',
+            '\n - presenting modal...',
+            `\n - recursionLevel: ${recursionLevel}`
+          );
           await modalSheetViewRef.current?.presentModal();
           console.log(
             'ModalSheetViewTest01',
@@ -113,16 +119,11 @@ export function ModalSheetViewTest01(props: ExampleItemProps) {
             title={'Get modal metrics for prev. modal'}
             subtitle={'invoke `getModalMetrics`'}
             onPress={async () => {
+              const modalRef = modalContext?.getModalSheetViewRef();
 
-              const modalSheetViewRefPrev: ModalSheetViewRef | null = 
-                props.extraProps?.modalSheetViewRefPrev as any;
+              console.log({modalContext, modalRef});
 
-              if(modalSheetViewRefPrev == null){
-                return;
-              };
-
-              const modalMetrics = 
-                await modalSheetViewRefPrev.getModalMetrics();
+              const modalMetrics = await modalRef?.getModalMetrics();
 
               setModalMetrics(modalMetrics);
               console.log(
@@ -203,6 +204,28 @@ export function ModalSheetViewTest01(props: ExampleItemProps) {
             "\n"
           );
         }}
+        onModalSheetStateWillChange={({nativeEvent}) => {
+          if(!shouldEnableModalEventsLogging) {
+            return;
+          };
+
+          console.log(
+            "ModalSheetViewTest01.onModalSheetStateWillChange",
+            "\n - nativeEvent:", nativeEvent,
+            "\n"
+          );
+        }}
+        onModalSheetStateDidChange={({nativeEvent}) => {
+          if(!shouldEnableModalEventsLogging) {
+            return;
+          };
+
+          console.log(
+            "ModalSheetViewTest01.onModalSheetStateDidChange",
+            "\n - nativeEvent:", nativeEvent,
+            "\n"
+          );
+        }}
       >
         <ModalSheetViewMainContent
           contentContainerStyle={styles.modalContent}