software-mansion / software-mansion/react-native-screens

iOS 26: Source screen has sharp corners during zoom transition pushback

Open
#3,768 3 comments 0 reactions 1 assignee View on GitHub

@t0maboro is already working on this.

Since Mar 19, 2026.

platform:ios repro-provided
Dominant language
TypeScript
Stars
3.7k
Forks
714
Avg merge
2d 23h
Merged PRs (30d)
71

Description

Description

On iOS 26, when using the zoom transition (Link.AppleZoom via expo-router), the transition itself works — the destination screen zooms in from the source card. However, the source screen that pushes back during the zoom has sharp corners instead of the rounded corners that native iOS 26 apps show.

In native iOS 26 apps (e.g., Photos, App Store), when a zoom transition pushes the source screen back, the source gets rounded corners matching the device's screen radius. With react-native-screens, the source screen remains sharp/rectangular.

Steps to reproduce

  1. Clone the repro: git clone https://github.com/agru97/rn-screens-zoom-repro.git
  2. npm install && npx expo run:ios
  3. Tap the card to trigger the zoom transition
  4. Observe: the source screen pushes back with sharp corners instead of rounded corners

Snack or a link to a repository

https://github.com/agru97/rn-screens-zoom-repro

Screens version

4.24.0

React Native version

0.83.2

Platforms

  • iOS

Environment

  • expo-router: 55.0.5
  • Expo SDK: 55
  • iOS: 26.3
  • Xcode: 26.3

Setup

Source (card):

<Link href={{ pathname: "/pin/[id]", params: { id } }} asChild>
  <Link.Trigger withAppleZoom>
    <Pressable>{/* card content */}</Pressable>
  </Link.Trigger>
</Link>

Destination (detail screen):

<Link.AppleZoomTarget>
  <View>{heroContent}</View>
</Link.AppleZoomTarget>

Stack screen config (no animation override):

<Stack.Screen
  name="pin/[id]"
  options={{
    contentStyle: { flex: 1, backgroundColor: themeColors.background },
  }}
/>

Feature flag:

featureFlags.experiment.ios26AllowInteractionsDuringTransition = true;

Observed behavior

  • Zoom transition activates correctly (destination zooms from source card) ✅
  • Source screen pushes back ~10% ✅
  • Source screen has sharp corners during pushback ❌

Expected behavior

Source screen should have rounded corners (matching device screen radius) during the zoom pushback, like native iOS 26 apps.

Likely cause

RNSScreenView has clipsToBounds = NO by default, which prevents iOS 26's corner masking (cornerConfiguration / container-concentric rounding) from being applied to the source screen during the transition.

I tried patching self.clipsToBounds = YES in initCommonProps but it had no effect — the corner rounding might need to be applied at the UIViewController.view level or via cornerConfiguration on the screen's layer.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.