fix: fix status bar handling with modal presentation

packages/stack/src/views/Stack/Card.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 
+import { forModalPresentationIOS } from '../../TransitionConfigs/CardStyleInterpolators';
 import type {
   GestureDirection,
   Layout,
@@ -33,7 +34,6 @@ import CardSheet from './CardSheet';
 
 type Props = ViewProps & {
   interpolationIndex: number;
-  modal: boolean;
   closing: boolean;
   next?: Animated.AnimatedInterpolation;
   current: Animated.AnimatedInterpolation;
@@ -430,7 +430,6 @@ export default class Card extends React.Component<Props> {
     const {
       styleInterpolator,
       interpolationIndex,
-      modal,
       current,
       gesture,
       next,
@@ -494,7 +493,10 @@ export default class Card extends React.Component<Props> {
         {
           // StatusBar messes with translucent status bar on Android
           // So we should only enable it on iOS
-          Platform.OS === 'ios' && modal && overlayEnabled && next ? (
+          Platform.OS === 'ios' &&
+          overlayEnabled &&
+          next &&
+          getIsModalPresentation(styleInterpolator) ? (
             <ModalStatusBarManager
               dark={headerDarkContent}
               layout={layout}
@@ -568,6 +570,16 @@ export default class Card extends React.Component<Props> {
   }
 }
 
+export const getIsModalPresentation = (
+  cardStyleInterpolator: StackCardStyleInterpolator
+) => {
+  return (
+    cardStyleInterpolator === forModalPresentationIOS ||
+    // Handle custom modal presentation interpolators as well
+    cardStyleInterpolator.name === 'forModalPresentationIOS'
+  );
+};
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

packages/stack/src/views/Stack/CardContainer.tsx

@@ -216,7 +216,6 @@ function CardContainer({
 
   return (
     <Card
-      modal={modal}
       interpolationIndex={interpolationIndex}
       gestureDirection={gestureDirection}
       layout={layout}

packages/stack/src/views/Stack/CardStack.tsx

@@ -30,7 +30,6 @@ import {
 import type {
   Layout,
   Scene,
-  StackCardStyleInterpolator,
   StackDescriptor,
   StackDescriptorMap,
   StackHeaderMode,
@@ -39,6 +38,7 @@ import type {
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import { MaybeScreen, MaybeScreenContainer } from '../Screens';
+import { getIsModalPresentation } from './Card';
 import CardContainer from './CardContainer';
 
 type GestureValues = {
@@ -109,16 +109,6 @@ const getInterpolationIndex = (scenes: Scene[], index: number) => {
   return interpolationIndex;
 };
 
-const getIsModalPresentation = (
-  cardStyleInterpolator: StackCardStyleInterpolator
-) => {
-  return (
-    cardStyleInterpolator === forModalPresentationIOS ||
-    // Handle custom modal presentation interpolators as well
-    cardStyleInterpolator.name === 'forModalPresentationIOS'
-  );
-};
-
 const getIsModal = (
   scene: Scene,
   interpolationIndex: number,