docs: add troubleshooting for blank screen when dismissing RN Modal on iOS (#370)

* chore: add rn modal in example

* docs: add troubleshooting for blank screen when dismissing RN Modal on iOS

Author: lodev09

docs/docs/troubleshooting.mdx

@@ -69,6 +69,28 @@ Related: [#354](https://github.com/lodev09/react-native-true-sheet/issues/354)
 A fix has been submitted to Unistyles. See [PR #1061](https://github.com/jpudysz/react-native-unistyles/pull/1061).
 :::
 
+## Blank Screen When Dismissing React Native Modal on iOS
+
+When presenting a TrueSheet on top of a React Native `<Modal>` and then dismissing the Modal (by setting `visible={false}`), the screen may go blank. This is a bug in React Native where dismissing a Modal that has another view controller presented on top of it only dismisses the topmost view controller, leaving the Modal in an inconsistent state.
+
+**Workaround:**
+
+Dismiss the sheet first before hiding the Modal:
+
+```tsx
+const sheet = useRef<TrueSheet>(null)
+const [modalVisible, setModalVisible] = useState(false)
+
+const closeModal = async () => {
+  await sheet.current?.dismiss()
+  setModalVisible(false)
+}
+```
+
+:::info
+A fix has been submitted to React Native. See [PR #55005](https://github.com/facebook/react-native/pull/55005).
+:::
+
 ## Weird layout render
 
 The sheet does not have control over how React Native renders components and may lead to rendering issues. To resolve this, try to minimize the use of `flex=1` in your content styles. Instead, use fixed `height` or employ `flexGrow`, `flexBasis`, etc., to manage your layout requirements.

example/shared/src/screens/ModalScreen.tsx

@@ -1,9 +1,9 @@
-import { useRef } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { TrueSheetProvider, type TrueSheet } from '@lodev09/react-native-true-sheet';
+import { useRef, useState, useEffect } from 'react';
+import { Modal, StyleSheet, Text, View } from 'react-native';
+import { TrueSheet, TrueSheetProvider } from '@lodev09/react-native-true-sheet';
 
-import { BLUE, GAP, LIGHT_GRAY, SPACING } from '../utils';
-import { Button, Input, Spacer } from '../components';
+import { BLUE, DARK, DARK_BLUE, DARK_GRAY, GAP, LIGHT_GRAY, SPACING } from '../utils';
+import { Button, DemoContent, Input, Spacer } from '../components';
 import { PromptSheet, FlatListSheet } from '../components/sheets';
 
 export interface ModalScreenProps {
@@ -15,6 +15,16 @@ export const ModalScreen = ({ onNavigateToTest, onDismiss }: ModalScreenProps) =
   const promptSheet = useRef<TrueSheet>(null);
   const flatlistSheet = useRef<TrueSheet>(null);
 
+  const [modalVisible, setModalVisible] = useState(false);
+  const modalSimpleSheet = useRef<TrueSheet>(null);
+  const modalFlatlistSheet = useRef<TrueSheet>(null);
+
+  useEffect(() => {
+    if (modalVisible) {
+      modalSimpleSheet.current?.present();
+    }
+  }, [modalVisible]);
+
   return (
     <TrueSheetProvider>
       <View style={styles.content}>
@@ -28,11 +38,46 @@ export const ModalScreen = ({ onNavigateToTest, onDismiss }: ModalScreenProps) =
         <Button text="Dismiss Modal" onPress={onDismiss} />
         <Button text="TrueSheet Prompt" onPress={() => promptSheet.current?.present()} />
         <Button text="TrueSheet FlatList" onPress={() => flatlistSheet.current?.present()} />
+        <Button text="Open RN Modal" onPress={() => setModalVisible(true)} />
         <Spacer />
         <Button text="Navigate Test" onPress={onNavigateToTest} />
 
         <PromptSheet initialDetentIndex={0} ref={promptSheet} dimmed={false} />
         <FlatListSheet ref={flatlistSheet} />
+
+        <Modal
+          visible={modalVisible}
+          animationType="slide"
+          onRequestClose={() => setModalVisible(false)}
+        >
+          <TrueSheetProvider>
+            <View style={styles.modalContent}>
+              <View style={styles.heading}>
+                <Text style={styles.title}>React Native Modal</Text>
+                <Text style={styles.subtitle}>
+                  This is a React Native Modal. You can present TrueSheets from here!
+                </Text>
+              </View>
+              <Button text="Simple Sheet" onPress={() => modalSimpleSheet.current?.present()} />
+              <Button text="FlatList Sheet" onPress={() => modalFlatlistSheet.current?.present()} />
+              <Spacer />
+              <Button text="Close Modal" onPress={() => setModalVisible(false)} />
+
+              <TrueSheet
+                ref={modalSimpleSheet}
+                detents={['auto']}
+                // initialDetentIndex={0}
+                dimmed={false}
+                style={styles.simpleSheet}
+                backgroundColor={DARK}
+              >
+                <DemoContent color={DARK_BLUE} text="Simple Sheet" />
+                <Button text="Dismiss" onPress={() => modalSimpleSheet.current?.dismiss()} />
+              </TrueSheet>
+              <FlatListSheet ref={modalFlatlistSheet} />
+            </View>
+          </TrueSheetProvider>
+        </Modal>
       </View>
     </TrueSheetProvider>
   );
@@ -46,6 +91,17 @@ const styles = StyleSheet.create({
     padding: SPACING,
     gap: GAP,
   },
+  modalContent: {
+    backgroundColor: DARK_GRAY,
+    justifyContent: 'center',
+    flex: 1,
+    padding: SPACING,
+    gap: GAP,
+  },
+  simpleSheet: {
+    padding: SPACING,
+    gap: GAP,
+  },
   heading: {
     marginBottom: SPACING * 2,
   },