Skip to content

Commit 125b9e4

Browse files
committed
Update upgrade guide
1 parent ac91698 commit 125b9e4

1 file changed

Lines changed: 26 additions & 0 deletions

File tree

versioned_docs/version-8.x/upgrading-from-7.x.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,7 @@ These were a source of significant maintenance burden. So we're working on alter
469469
Now they have been replaced with a new `inactiveBehavior` screen option available in all navigators. It supports the following values:
470470

471471
- `pause`: Effects are cleaned up - e.g. timers are cleared, subscriptions are removed, etc. This avoids unnecessary renders when the screen is inactive.
472+
- `unmount`: The screen is unmounted when inactive and remounted when it becomes active again. Only available in [Stack](stack-navigator.md) and [Native Stack](native-stack-navigator.md).
472473
- `none`: Screen renders normally.
473474

474475
It defaults to `pause`.
@@ -626,6 +627,12 @@ See [Drawer Navigator](drawer-navigator.md) for more details.
626627

627628
### Miscellaneous
628629

630+
#### Unfocused screens on Web now use `inert` attribute
631+
632+
Previously, unfocused screens on the Web were hidden from assistive technologies using `aria-hidden`, but they could still receive focus and keyboard interaction unless hidden with `display: none`. While most navigators used `display: none` on the Web to hide unfocused screens, it wasn't possible for some navigators such as [Material Top Tabs](material-top-tab-navigator.md) because it won't play well with animations and swipe gesture, or when using `presentation: 'transparentModal'` in [Stack Navigator](stack-navigator.md#presentation) as the screen needs to be visible to show the content underneath.
633+
634+
Now all navigators use the [`inert`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert) attribute on the Web to make unfocused screens non-interactive and hidden from assistive technologies without affecting their visibility.
635+
629636
#### Various deprecated APIs have been removed
630637

631638
The following API that were marked as deprecated in React Navigation 7 have been removed:
@@ -1120,6 +1127,25 @@ These themes use platform colors to provide dynamic colors that adapt to the use
11201127

11211128
See [Themes](themes.md#built-in-themes) for more details.
11221129

1130+
### `UNSTABLE_CornerInset` component for iPadOS windowed mode
1131+
1132+
A new `UNSTABLE_CornerInset` component has been added to handle the traffic light buttons (close, minimize, maximize) overlap in iPadOS windowed mode. It renders a spacer with the width or height of the traffic light area based on the content direction and the specified edge:
1133+
1134+
```js
1135+
import { UNSTABLE_CornerInset } from '@react-navigation/native';
1136+
1137+
function MyHeader() {
1138+
return (
1139+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
1140+
<UNSTABLE_CornerInset direction="horizontal" edge="left" />
1141+
{/* rest of your content */}
1142+
</View>
1143+
);
1144+
}
1145+
```
1146+
1147+
It renders a plain `View` on non-iPadOS platforms.
1148+
11231149
### `useLogger` devtools now shows more information
11241150

11251151
Previously, the `useLogger` devtools only showed navigation actions. It now shows the following additional information:

0 commit comments

Comments
 (0)