fix: make transparent modal work with modal presentation

react-navigation · May 24, 2021 · c90bff0 · c90bff0
1 parent b590337
commit c90bff0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 12 deletions.
diff --git a/example/src/Screens/StackTransparent.tsx b/example/src/Screens/StackTransparent.tsx
@@ -15,9 +15,11 @@ import {
   useCardAnimation,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
+import NewsFeed from '../Shared/NewsFeed';
 
 type TransparentStackParams = {
   Article: { author: string };
+  NewsFeed: undefined;
   Dialog: undefined;
 };
 
@@ -37,6 +39,13 @@ const ArticleScreen = ({
         >
           Show Dialog
         </Button>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('NewsFeed')}
+          style={styles.button}
+        >
+          Push NewsFeed
+        </Button>
         <Button
           mode="outlined"
           onPress={() => navigation.goBack()}
@@ -53,6 +62,32 @@ const ArticleScreen = ({
   );
 };
 
+const NewsFeedScreen = ({
+  navigation,
+}: StackScreenProps<TransparentStackParams, 'NewsFeed'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Dialog')}
+          style={styles.button}
+        >
+          Show Dialog
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <NewsFeed scrollEnabled={scrollEnabled} />
+    </ScrollView>
+  );
+};
+
 const DialogScreen = ({
   navigation,
 }: StackScreenProps<TransparentStackParams>) => {
@@ -116,6 +151,11 @@ export default function TransparentStackScreen({ navigation }: Props) {
         component={ArticleScreen}
         initialParams={{ author: 'Gandalf' }}
       />
+      <TransparentStack.Screen
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ presentation: 'modal' }}
+      />
       <TransparentStack.Screen
         name="Dialog"
         component={DialogScreen}
@@ -131,6 +171,7 @@ export default function TransparentStackScreen({ navigation }: Props) {
 const styles = StyleSheet.create({
   buttons: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     padding: 8,
   },
   button: {

diff --git a/packages/stack/src/views/Stack/CardContainer.tsx b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -225,7 +225,7 @@ function CardContainer({
       insets={insets}
       gesture={gesture}
       current={scene.progress.current}
-      next={isNextScreenTransparent ? undefined : scene.progress.next}
+      next={scene.progress.next}
       closing={closing}
       onOpen={handleOpen}
       onClose={handleClose}

diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
@@ -219,7 +219,9 @@ export default class CardStack extends React.Component<Props, State> {
         // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
         // but majority of the transitions look alright
         const optionsForTransitionConfig =
-          index !== self.length - 1 && nextDescriptor
+          index !== self.length - 1 &&
+          nextDescriptor &&
+          nextDescriptor.options.presentation !== 'transparentModal'
             ? nextDescriptor.options
             : descriptor.options;
 
@@ -251,6 +253,8 @@ export default class CardStack extends React.Component<Props, State> {
           (!(
             optionsForTransitionConfig.presentation === 'modal' ||
             optionsForTransitionConfig.presentation === 'transparentModal' ||
+            nextDescriptor?.options.presentation === 'modal' ||
+            nextDescriptor?.options.presentation === 'transparentModal' ||
             cardStyleInterpolator === forModalPresentationIOS
           ) &&
           Platform.OS === 'ios' &&
@@ -280,13 +284,15 @@ export default class CardStack extends React.Component<Props, State> {
               state.layout,
               descriptor
             ),
-            next: nextGesture
-              ? getProgressFromGesture(
-                  nextGesture,
-                  state.layout,
-                  nextDescriptor
-                )
-              : undefined,
+            next:
+              nextGesture &&
+              nextDescriptor.options.presentation !== 'transparentModal'
+                ? getProgressFromGesture(
+                    nextGesture,
+                    state.layout,
+                    nextDescriptor
+                  )
+                : undefined,
             previous: previousGesture
               ? getProgressFromGesture(
                   previousGesture,
@@ -466,9 +472,13 @@ export default class CardStack extends React.Component<Props, State> {
       const { options } = scenes[i].descriptor;
       const {
         // By default, we don't want to detach the previous screen of the active one for modals
-        detachPreviousScreen = options.presentation === 'transparentModal' ||
-        options.cardStyleInterpolator === forModalPresentationIOS
-          ? i !== scenes.length - 1
+        detachPreviousScreen = options.presentation === 'transparentModal'
+          ? false
+          : options.cardStyleInterpolator === forModalPresentationIOS
+          ? i !==
+            scenes
+              .map((scene) => scene.descriptor.options.cardStyleInterpolator)
+              .lastIndexOf(forModalPresentationIOS)
           : true,
       } = options;