presentation: 'modal' interpolates bottom radius causing visual bug when used with tab navigator

[albinekman91]

Current behavior

Since 6.0 was introduced the transition specification for presentation: 'modal' seems to have been updated to follow the new ModalPresentationIOS -preset. Unfortunately this update causes some issues when used within a Tab.Navigator-context.

The border-radius-interpolation is applied to all four edges causing a visual bug.

Expected behavior

The border-radius-interpolation should only be applied to borderTopLeftRadius and borderTopRightRadius.

Reproduction

https://snack.expo.dev/@albinmartinsson/presentation-modal---glitch

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

Package	Version
@react-navigation/stack	6.0.7
@react-navigation/bottom-tabs	6.0.5

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/stack (found: 6.0.6, latest: 6.0.7)
• @react-navigation/drawer (found: 6.1.3, latest: 6.1.4)
• @react-navigation/bottom-tabs (found: 6.0.4, latest: 6.0.5)
• @react-navigation/material-bottom-tabs (found: 6.0.4, latest: 6.0.5)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[albinekman91]

Yes this is still an issue.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[arunim2405]

can confirm this issue, causing placement issues for my components as well. Refer:

[satya164]

Modals are intended to be used at root. It's not proper UX to have them nested inside tab navigator.

While it's not needed visually, the borderRadius is intentionally added for performance reasons. We won't change it since it works fine with its intended usage.

If you really want modals inside tab navigator for some reason, you can provide a custom cardStyleInterpolator which uses different border radius.

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[kmonty12]

Did anybody find a solution here using a custom cardStyleInterpolator?

[JasonPan]

@kmonty12

1. Copy forModalPresentationIOS from here: https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx#L93
2. Disable borderBottomLeftRadius and borderBottomRightRadius.

Notes

• You can override the default exported components by doing something like the following, if you don't want to copy it manually

import { Platform } from "react-native";
import { TransitionPresets, StackCardInterpolationProps, StackCardInterpolatedStyle } from '@react-navigation/stack';

// Note: if not using the name `forModalPresentationIOS`, need to rename the function using something like `Object.defineProperty(Test, "name", {value: "forModalPresentationIOS"});`, as `react-navigation` has specific checks for the interpolator name.
const forModalPresentationIOS = (props: StackCardInterpolationProps): StackCardInterpolatedStyle => {
  const config = TransitionPresets.ModalPresentationIOS.cardStyleInterpolator(props);
  config.cardStyle.borderBottomLeftRadius = undefined;
  config.cardStyle.borderBottomRightRadius = undefined;
  return config
};

const fixTabNestedStackCardStyleInterpolator = Platform.select({
  ios: forModalPresentationIOS,
  default: TransitionPresets.BottomSheetAndroid.cardStyleInterpolator,
});


...


<Stack.Screen
  name="Test screen"
  component={TestCompoment}
  options={{ cardStyleInterpolator: fixTabNestedStackCardStyleInterpolator }}
/>

[EvgenMarchuk-art]

@kmonty12

1. Copy forModalPresentationIOS from here: https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx#L93
2. Disable borderBottomLeftRadius and borderBottomRightRadius.

Notes

• You can override the default exported components by doing something like the following, if you don't want to copy it manually

import { Platform } from "react-native";
import { TransitionPresets, StackCardInterpolationProps, StackCardInterpolatedStyle } from '@react-navigation/stack';

// Note: if not using the name `forModalPresentationIOS`, need to rename the function using something like `Object.defineProperty(Test, "name", {value: "forModalPresentationIOS"});`, as `react-navigation` has specific checks for the interpolator name.
const forModalPresentationIOS = (props: StackCardInterpolationProps): StackCardInterpolatedStyle => {
  const config = TransitionPresets.ModalPresentationIOS.cardStyleInterpolator(props);
  config.cardStyle.borderBottomLeftRadius = undefined;
  config.cardStyle.borderBottomRightRadius = undefined;
  return config
};

const fixTabNestedStackCardStyleInterpolator = Platform.select({
  ios: forModalPresentationIOS,
  default: TransitionPresets.BottomSheetAndroid.cardStyleInterpolator,
});


...


<Stack.Screen
  name="Test screen"
  component={TestCompoment}
  options={{ cardStyleInterpolator: fixTabNestedStackCardStyleInterpolator }}
/>

Good day, the solution for iOS works perfectly. How can I achieve the same for Android?