Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion website/docs/api/options-root.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ const options = {
overlay,
modal,
preview,
navigationBar
navigationBar,
scrollEdgeEffect,
};
```

Expand Down Expand Up @@ -173,6 +174,14 @@ Enable or disable automaticall blur of the focused input, dismissing keyboard on
| ------- | -------- | -------- | ------- |
| boolean | No | Android | false |

## `scrollEdgeEffect`

Show / hide or change the style of the iOS 26 scroll edge effect on every `UIScrollView` contained in the screen.

| Type | Required | Platform |
| -------------------------------------------------------- | -------- | -------- |
| [ScrollEdgeEffectOptions](options-scrollEdgeEffect.mdx) | No | iOS 26+ |

## `navigationBar`
Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

Expand Down
70 changes: 70 additions & 0 deletions website/docs/api/options-scrollEdgeEffect.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
---
id: options-scrollEdgeEffect
title: Scroll Edge Effect Options
sidebar_label: Scroll Edge Effect
---

Controls the iOS 26+ `UIScrollEdgeEffect` (Liquid Glass fade) shown at the edges of scroll views when content scrolls under bars.

**Credits**: Contributed by [@manuhook](https://github.com/manuhook) ([PR #8281](https://github.com/wix/react-native-navigation/pull/8281)).

```js
const options = {
scrollEdgeEffect: {
hidden: true,
},
};
```

### `hidden`

Hide the scroll edge effect.

| Type | Required | Platform |
| ------- | -------- | -------- |
| boolean | No | iOS 26+ |

### `style`

Set the scroll edge effect style.

| Type | Required | Platform | Default |
| ----------------------------------- | -------- | -------- | ----------- |
| enum('automatic', 'soft', 'hard') | No | iOS 26+ | 'automatic' |

### `top` / `bottom` / `left` / `right`

Per-edge override. Values fall back to the global `hidden` / `style`. Per-edge values take precedence.

| Type | Required | Platform |
| --------------------------------------------------------------------------------- | -------- | -------- |
| `{ hidden?: boolean; style?: 'automatic' \| 'soft' \| 'hard' }` | No | iOS 26+ |

## Examples

Hide all edges:

```js
MyScreen.options = {
scrollEdgeEffect: { hidden: true },
};
```

Top visible, bottom hidden:

```js
MyScreen.options = {
scrollEdgeEffect: {
top: { hidden: false },
bottom: { hidden: true },
},
};
```

Dynamic update:

```js
Navigation.mergeOptions(componentId, {
scrollEdgeEffect: { bottom: { hidden: true } },
});
```
1 change: 1 addition & 0 deletions website/sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ module.exports = {
},
'api/options-statusBar',
'api/options-layout',
'api/options-scrollEdgeEffect',
'api/options-modal',
'api/options-navigationBar',
'api/options-overlay',
Expand Down