[Android] ScreenFragment wraps content in FrameLayout (clipChildren=true), unlike ScreenStackFragment which uses CoordinatorLayout (clipChildren=false)

[dgrcode]

Description

Note

This issue was drafted by Claude Code under my supervision.

On Android, screens rendered via ScreenFragment (used by tab and drawer navigators) clip child overflow, including box-shadow and elevation shadows, while screens rendered via ScreenStackFragment (native stack) do not. Identical React Native markup produces different visual results depending on the navigator type.

This is the root cause behind #2669 and #2478. The suggested workaround of wrapping content in <View collapsable={false} style={{ flex: 1 }}> works but shouldn't be necessary.

Root Cause

ScreenFragment and ScreenStackFragment wrap screen content in different native Android containers with different clipChildren defaults:

Fragment	Wrapper	Extends	clipChildren default
ScreenFragment	ScreensFrameLayout	FrameLayout	true
ScreenStackFragment	ScreensCoordinatorLayout	CoordinatorLayout	false

FrameLayout defaults to clipChildren = true, clipping any child content that overflows its bounds. CoordinatorLayout defaults to clipChildren = false (by design, to support FABs, snackbars, etc.), so stack screens don't have this issue.

Relevant code

• ScreenFragment.kt — ScreensFrameLayout inner
  class (extends FrameLayout, no
  clipChildren override)
• [ScreensCoordinatorLayout.kt](https://github.com/software-mansion/react-native-screens/blob/main/android/src/main/java/com/swmansion/rnscreens/stack/views/ScreensCoordinato
  rLayout.kt) (extends CoordinatorLayout, inherits clipChildren = false)

Reproduction

1. Create a tab navigator with a screen containing an absolutely positioned circular button with box-shadow (e.g. near the top of the screen)
2. Create a stack navigator with identical screen content
3. Compare on Android — the tab screen clips the shadow to a rectangle, the stack screen renders it correctly as a circle following borderRadius

Suggested Fix

Set clipChildren = false on ScreensFrameLayout to match the CoordinatorLayout behavior:

private class ScreensFrameLayout(context: Context) : FrameLayout(context) {
    init {
        clipChildren = false
    }

    override fun clearFocus() {
        if (visibility != INVISIBLE) {
            super.clearFocus()
        }
    }
}

Environment

• react-native-screens: 4.16.0 (also confirmed still present on main)
• React Native: 0.81.5 (new architecture / Fabric)
• Android
• Expo SDK 54

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Steps to reproduce, Snack or a link to a repository, Screens version, React Native version and Platforms sections.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[dgrcode]

hi, the important sections requested by the bot are in the description, although they might not follow any standard structure (I used the blank issue option to report this issue).

Regarding the snack, the ones provided in the issues mentioned should work:

• from [Android]: box shadow are not correctly rendered inside screens #2669: https://github.com/freeboub/bug-react-native-screens-box-shadow
• from [bug][android][newarch] children in screens created by react-navigation-drawer has an overflow: hidden behavior #2478: https://github.com/lovegaoshi/azusa-player-mobile/tree/bug/drawer-overflow

[kligarski]

Hi, @dgrcode. Thank you for reporting the issue.

From what I researched, Claude is not exactly correct here. ViewGroup sets clipChildren to true and this doesn't change for neither FrameLayout nor CoordinatorLayout. I checked this in source files + in view inspector. The reason why this works correctly in native stack but not in JS stack is that in native stack we use ScreenContentWrapper between Screen and user's content which inherits from ReactViewGroup which sets clipChildren = false.

I think that the solutions are probably:

1. always wrap content in additional View
2. set clipChildren = false on Screen

but we need to consider whether those solutions might introduce any breaking changes.

Either way, we are adding this issue to our queue.

[dgrcode]

Thanks for having a look at this. And sorry my initial report wasn't accurate. Hopefully it saved you more time than it cost 🙏