From c766b1ae32adf473ba9f85f298e0a99afee25538 Mon Sep 17 00:00:00 2001
From: Dominic Go <dominic@dominicgo.dev>
Date: Thu, 26 Sep 2024 09:34: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 | 42 +++++++++++++++----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/example/src/examples/ModalSheetViewTest01.tsx b/example/src/examples/ModalSheetViewTest01.tsx
index 50badd9a..0712b2ca 100644
--- a/example/src/examples/ModalSheetViewTest01.tsx
+++ b/example/src/examples/ModalSheetViewTest01.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 
 import { ExampleItemCard, ObjectPropertyDisplay, CardButton, Colors } from 'react-native-ios-utilities';
 import { ModalSheetView, ModalSheetViewContent, type ModalSheetViewRef } from 'react-native-ios-modal';
@@ -27,7 +27,12 @@ export function ModalSheetViewTest01(props: ExampleItemProps) {
       <CardButton
         title={'Present Sheet Modal'}
         subtitle={'Present content as sheet'}
-        onPress={() => {
+        onPress={async () => {
+          await modalSheetViewRef.current?.presentModal();
+          console.log(
+            'ModalSheetViewTest01',
+            '\n - present modal completed'
+          );
         }}
       />
       <ModalSheetView
@@ -36,9 +41,26 @@ export function ModalSheetViewTest01(props: ExampleItemProps) {
         <ModalSheetViewContent
           contentContainerStyle={styles.modalContent}
         >
-          <Text>
-            {'Hello World'}
-          </Text>
+          <ExampleItemCard
+            title={'RNIDetachedViewTest02'}
+            style={styles.modalContentCard}
+          >
+            <ObjectPropertyDisplay
+              recursiveStyle={styles.debugDisplayInner}
+              object={undefined}
+            />
+            <CardButton
+              title={'Dismiss Modal'}
+              subtitle={'Dismiss current modal'}
+              onPress={async () => {
+                await modalSheetViewRef.current?.dismissModal();
+                console.log(
+                  'ModalSheetViewTest01',
+                  '\n - dismiss modal completed'
+                );
+              }}
+            />
+          </ExampleItemCard>
         </ModalSheetViewContent>
       </ModalSheetView>
     </ExampleItemCard>
@@ -46,11 +68,17 @@ export function ModalSheetViewTest01(props: ExampleItemProps) {
 };
 
 const styles = StyleSheet.create({
+  debugDisplayInner: {
+    backgroundColor: `${Colors.PURPLE[200]}99`,
+  },
   modalContent: {
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 24,
   },
-  debugDisplayInner: {
-    backgroundColor: `${Colors.PURPLE[200]}99`,
+  modalContentCard: {
+    alignSelf: 'stretch',
   },
 });
\ No newline at end of file