Skip to content

Add scrollEdgeEffect option to control iOS 26 scroll edge effects#8281

Open
manuhook wants to merge 1 commit intowix:masterfrom
manuhook:master
Open

Add scrollEdgeEffect option to control iOS 26 scroll edge effects#8281
manuhook wants to merge 1 commit intowix:masterfrom
manuhook:master

Conversation

@manuhook
Copy link
Copy Markdown

@manuhook manuhook commented Apr 28, 2026

Motivation
iOS 26 introduces a new Liquid Glass scroll edge effect on UIScrollView — a soft visual fade that appears at the edges of scroll views when content scrolls behind navigation bars or tab bars. While visually coherent in most contexts, some screens benefit from disabling or tuning this effect per-edge (e.g. a profile screen with a transparent nav bar where the top fade is unwanted, but the bottom one should stay).

React Native Navigation had no way to control this.

What this patch does
Adds a new top-level screen option scrollEdgeEffect (iOS 26+ only, no-op on older versions) that lets you show/hide and style the UIScrollEdgeEffect on every UIScrollView inside a screen, with either a global shorthand or per-edge overrides.

TypeScript API

export interface OptionsScrollEdge {
  hidden?: boolean;
  style?: 'automatic' | 'soft' | 'hard';
}

export interface OptionsScrollEdgeEffect {
  hidden?: boolean;                   // applies to all four edges
  style?: 'automatic' | 'soft' | 'hard';
  top?: OptionsScrollEdge;            // overrides the global value for top edge only
  bottom?: OptionsScrollEdge;
  left?: OptionsScrollEdge;
  right?: OptionsScrollEdge;
}

Usage

// Static declaration
MyScreen.options = {
  scrollEdgeEffect: { hidden: true },                         // hide all edges
};

// Fine-grained: top visible, bottom hidden
MyScreen.options = {
  scrollEdgeEffect: {
    top: { hidden: false },
    bottom: { hidden: true },
  },
};

// Dynamic via mergeOptions
Navigation.mergeOptions(componentId, {
  scrollEdgeEffect: { bottom: { hidden: true } },
});

For example with mergeOptions it allows to answer this problematic :

utvd3gi0zkpg1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant