From 3ece2bd1291284c7c5f36027895c8cd744cfd9b3 Mon Sep 17 00:00:00 2001
From: Dominic Go <dominic@dominicgo.dev>
Date: Sun, 29 Sep 2024 08:10:35 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20Update:=20Ex=20-=20`ModalSheetVi?=
 =?UTF-8?q?ewTest01`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/examples/ModalSheetViewTest01.tsx | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/example/src/examples/ModalSheetViewTest01.tsx b/example/src/examples/ModalSheetViewTest01.tsx
index 08f8cc22..ae0d5fed 100644
--- 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}