|
| 1 | +--- |
| 2 | +id: options-scrollEdgeEffect |
| 3 | +title: Scroll Edge Effect Options |
| 4 | +sidebar_label: Scroll Edge Effect |
| 5 | +--- |
| 6 | + |
| 7 | +Controls the iOS 26+ `UIScrollEdgeEffect` (Liquid Glass fade) shown at the edges of scroll views when content scrolls under bars. |
| 8 | + |
| 9 | +**Credits**: Contributed by [@manuhook](https://github.com/manuhook) ([PR #8281](https://github.com/wix/react-native-navigation/pull/8281)). |
| 10 | + |
| 11 | +```js |
| 12 | +const options = { |
| 13 | + scrollEdgeEffect: { |
| 14 | + hidden: true, |
| 15 | + }, |
| 16 | +}; |
| 17 | +``` |
| 18 | + |
| 19 | +### `hidden` |
| 20 | + |
| 21 | +Hide the scroll edge effect. |
| 22 | + |
| 23 | +| Type | Required | Platform | |
| 24 | +| ------- | -------- | -------- | |
| 25 | +| boolean | No | iOS 26+ | |
| 26 | + |
| 27 | +### `style` |
| 28 | + |
| 29 | +Set the scroll edge effect style. |
| 30 | + |
| 31 | +| Type | Required | Platform | Default | |
| 32 | +| ----------------------------------- | -------- | -------- | ----------- | |
| 33 | +| enum('automatic', 'soft', 'hard') | No | iOS 26+ | 'automatic' | |
| 34 | + |
| 35 | +### `top` / `bottom` / `left` / `right` |
| 36 | + |
| 37 | +Per-edge override. Values fall back to the global `hidden` / `style`. Per-edge values take precedence. |
| 38 | + |
| 39 | +| Type | Required | Platform | |
| 40 | +| --------------------------------------------------------------------------------- | -------- | -------- | |
| 41 | +| `{ hidden?: boolean; style?: 'automatic' \| 'soft' \| 'hard' }` | No | iOS 26+ | |
| 42 | + |
| 43 | +## Examples |
| 44 | + |
| 45 | +Hide all edges: |
| 46 | + |
| 47 | +```js |
| 48 | +MyScreen.options = { |
| 49 | + scrollEdgeEffect: { hidden: true }, |
| 50 | +}; |
| 51 | +``` |
| 52 | + |
| 53 | +Top visible, bottom hidden: |
| 54 | + |
| 55 | +```js |
| 56 | +MyScreen.options = { |
| 57 | + scrollEdgeEffect: { |
| 58 | + top: { hidden: false }, |
| 59 | + bottom: { hidden: true }, |
| 60 | + }, |
| 61 | +}; |
| 62 | +``` |
| 63 | + |
| 64 | +Dynamic update: |
| 65 | + |
| 66 | +```js |
| 67 | +Navigation.mergeOptions(componentId, { |
| 68 | + scrollEdgeEffect: { bottom: { hidden: true } }, |
| 69 | +}); |
| 70 | +``` |
0 commit comments