diff --git a/website/docs/api/options-root.mdx b/website/docs/api/options-root.mdx index 7f1add577a..6b3ae732f7 100644 --- a/website/docs/api/options-root.mdx +++ b/website/docs/api/options-root.mdx @@ -14,7 +14,8 @@ const options = { overlay, modal, preview, - navigationBar + navigationBar, + scrollEdgeEffect, }; ``` @@ -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. diff --git a/website/docs/api/options-scrollEdgeEffect.mdx b/website/docs/api/options-scrollEdgeEffect.mdx new file mode 100644 index 0000000000..6f9b90c394 --- /dev/null +++ b/website/docs/api/options-scrollEdgeEffect.mdx @@ -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 } }, +}); +``` diff --git a/website/sidebars.js b/website/sidebars.js index 4da7faaa1e..f6be96d697 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -67,6 +67,7 @@ module.exports = { }, 'api/options-statusBar', 'api/options-layout', + 'api/options-scrollEdgeEffect', 'api/options-modal', 'api/options-navigationBar', 'api/options-overlay',