fix: fix transparent modal when another screen is pushed on top

Fixes react-navigation#10298
MohamedLamineAllal · Feb 4, 2022 · d671b5e · d671b5e
1 parent 9868318
commit d671b5e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/example/src/Screens/StackTransparent.tsx b/example/src/Screens/StackTransparent.tsx
@@ -97,7 +97,7 @@ const DialogScreen = ({
 
   return (
     <View style={styles.container}>
-      <Pressable style={styles.backdrop} onPress={() => navigation.goBack()} />
+      <Pressable style={styles.backdrop} onPress={navigation.goBack} />
       <Animated.View
         style={[
           styles.dialog,

diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
@@ -530,7 +530,12 @@ export default class CardStack extends React.Component<Props, State> {
       if (detachPreviousScreen === false) {
         activeScreensLimit++;
       } else {
-        break;
+        // Check at least last 2 screens before stopping
+        // This will make sure that screen isn't detached when another screen is animating on top of the transparent one
+        // For example, (Opaque -> Transparent -> Opaque)
+        if (i <= scenes.length - 2) {
+          break;
+        }
       }
     }