💫 Update: Ex - ModalSheetViewTest01

dominicstop · Sep 26, 2024 · c766b1a · c766b1a
1 parent c00c557
commit c766b1a
Showing 1 changed file with 35 additions and 7 deletions.
diff --git 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,21 +41,44 @@ 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>
   );
 };
 
 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',
   },
 });