fix: make native stack background transparent when using transparentM…

…odal
rs-alexis · Nov 27, 2022 · cf6687b · cf6687b
1 parent a3b2e29
commit cf6687b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/example/src/Screens/StackTransparent.tsx b/example/src/Screens/StackTransparent.tsx
@@ -1,9 +1,8 @@
 import { ParamListBase, useTheme } from '@react-navigation/native';
 import {
-  createStackNavigator,
-  StackScreenProps,
-  useCardAnimation,
-} from '@react-navigation/stack';
+  createNativeStackNavigator as createStackNavigator,
+  NativeStackScreenProps as StackScreenProps,
+} from '@react-navigation/native-stack';
 import * as React from 'react';
 import {
   Animated,
@@ -93,7 +92,7 @@ const DialogScreen = ({
   navigation,
 }: StackScreenProps<TransparentStackParams>) => {
   const { colors } = useTheme();
-  const { current } = useCardAnimation();
+  // const { current } = useCardAnimation();
 
   return (
     <View style={styles.container}>
@@ -103,15 +102,15 @@ const DialogScreen = ({
           styles.dialog,
           {
             backgroundColor: colors.card,
-            transform: [
-              {
-                scale: current.progress.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0.9, 1],
-                  extrapolate: 'clamp',
-                }),
-              },
-            ],
+            // transform: [
+            //   {
+            //     scale: current.progress.interpolate({
+            //       inputRange: [0, 1],
+            //       outputRange: [0.9, 1],
+            //       extrapolate: 'clamp',
+            //     }),
+            //   },
+            // ],
           },
         ]}
       >

diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
@@ -25,6 +25,11 @@ type Props = {
   descriptors: NativeStackDescriptorMap;
 };
 
+const TRANSPARENT_PRESENTATIONS = [
+  'transparentModal',
+  'containedTransparentModal',
+];
+
 export default function NativeStackView({ state, descriptors }: Props) {
   return (
     <SafeAreaProviderCompat>
@@ -33,9 +38,11 @@ export default function NativeStackView({ state, descriptors }: Props) {
           const isFocused = state.index === i;
           const canGoBack = i !== 0;
           const previousKey = state.routes[i - 1]?.key;
+          const nextKey = state.routes[i + 1]?.key;
           const previousDescriptor = previousKey
             ? descriptors[previousKey]
             : undefined;
+          const nexDescriptor = nextKey ? descriptors[nextKey] : undefined;
           const { options, navigation, render } = descriptors[route.key];
 
           const {
@@ -51,10 +58,13 @@ export default function NativeStackView({ state, descriptors }: Props) {
             headerStyle,
             headerShadowVisible,
             headerTransparent,
-            contentStyle,
             headerBackTitle,
+            presentation,
+            contentStyle,
           } = options;
 
+          const nextPresentation = nexDescriptor?.options.presentation;
+
           return (
             <Screen
               key={route.key}
@@ -144,7 +154,18 @@ export default function NativeStackView({ state, descriptors }: Props) {
               }
               style={[
                 StyleSheet.absoluteFill,
-                { display: isFocused ? 'flex' : 'none' },
+                {
+                  display:
+                    isFocused ||
+                    (nextPresentation != null &&
+                      TRANSPARENT_PRESENTATIONS.includes(nextPresentation))
+                      ? 'flex'
+                      : 'none',
+                },
+                presentation != null &&
+                TRANSPARENT_PRESENTATIONS.includes(presentation)
+                  ? { backgroundColor: 'transparent' }
+                  : null,
               ]}
             >
               <View style={[styles.contentContainer, contentStyle]}>