Key changes
This is the first beta release of react-native-screens 5.0.0, and it adds support for React Native 0.88. iOS gets ContainedModalProvider and ContainedModalOverContent, a modal confined to the bounds of its provider, e.g. a SplitView column. Stack v5 on Android now animates transitions with configurable presets and supports replaceAnimation. On iOS 27, Stack v4 gains minimizationBehavior and restorationBehavior, and both stacks gain safeAreaAdjustment. Form sheets can replace the Liquid Glass material on iOS 26.1+, and Stack v4 form sheets get a selectDetent command. The tab icon API drops the templateSource and xcasset types, see the migration below. The 5.0 prereleases are cut from the main branch, so this release also carries everything shipped on the 4.x line in 4.30.1.
Breaking: Tabs icon types (iOS)
The templateSource and xcasset tab icon types are removed, and imageSource icons on iOS are now tinted by default, in #4868. To migrate:
{ type: 'templateSource', templateSource: src }becomes{ type: 'imageSource', imageSource: src, renderingMode: 'template' }.{ type: 'xcasset', name: 'icon' }for an image set becomes{ type: 'imageSource', imageSource: { uri: 'icon' } }.{ type: 'xcasset', name: 'icon' }for a custom symbol becomes{ type: 'sfSymbol', name: 'icon' }.- An
{ type: 'imageSource', imageSource: src }icon that must keep its colors needsrenderingMode: 'original'.
The TabsScreenIconTemplateIOS and TabsScreenIconXcassetIOS type exports are removed too, use TabsScreenIconIOS.
Improvements
- iOS (ContainedModal): added
ContainedModalProviderandContainedModalOverContent, a modal that fills its provider instead of the whole window, in #4961 and #4962, with theonWillAppear,onDidAppear,onWillDisappearandonDidDisappearevents in #5002. On Android and web the components render nothing for now. - Android (Stack v5): screen transitions animate with presets set through the
animationprop (slideFromRight,slideFromLeft,slideFromBottom,slideFromTop,fade,fadeFromBottom,fadeFromTop,iosFromRight,iosFromLeftandnone) in #4660 and #4670, and a preset acceptsduration,easingand, for the fade-from presets,distancein #4980. - Android (Stack v5): added
replaceAnimation(poporpush) onStack.Screento choose whether a replace looks like a pop or a push in #5058. - iOS (Stack v4): added
minimizationBehaviorandrestorationBehaviorto control when the navigation bar minimizes and restores on scroll on iOS 27 in #4729. Opaque headers default tonever. - iOS (Stack v4, Stack v5): added
safeAreaAdjustment(automatic,enabledordisabled) to control how safe-area insets follow the navigation bar when it minimizes on iOS 27 in #4732 and #4744. - Stack v4: added a
sheetRefprop onScreenandScreenStackItemwith aselectDetent(index | 'last')command, so JS can move a presented form sheet to another detent, in #4794. - iOS (Stack v4): added
sheetBackgroundEffect(automaticorcolor) for form sheets, so a sheet with an opaque background can drop the Liquid Glass material on iOS 26.1+, in #5007. - iOS (FormSheet v5): added
backgroundEffect(automatic,none, a color or a blur style) to replace the sheet's Liquid Glass material on iOS 26.1+ in #5111. - iOS (SplitView): third-party libraries can customize a column's navigation item through
RNSNavigationItemCustomizerProtocolin #5080, and column navigation bars support large titles, collapsed by default, in #5081. - Android (Tabs): tab configuration changes raised during a React transaction are applied once when it ends in #4976.
Bug fixes
- Android (Stack v5): popping a screen that contains a nested stack no longer throws a
pop-nativeerror, sinceonDismissis now emitted only for screens that are explicitly popped, in #4745. - Android (Tabs): a tapped tab gets its appearance in the same frame as the tap in #5044.
- Android (Stack v4): form sheets stay below the status bar and still expand for the keyboard after another library, such as react-native-keyboard-controller, replaces the decor view's insets listener, in #5008.
- Android (Stack v4): a
fitToContentsform sheet stays in place when its content height changes mid resize animation in #5005. - Android (Stack v4): a drag that scrolls a nested list to its top stops there instead of moving or dismissing the form sheet, matching iOS, in #5100.
- Android (Stack v4): the form sheet's dimming view is hidden from accessibility services in #4933.
- iOS (Tabs): the tab bar shows on an iPhone Duo launched unfolded in #4990, and search tab titles are set at creation so they are no longer truncated in #5057.
- iOS (Stack): a recycled nested stack inside a modal appears together with the modal, so its content gets a safe area, in #4997.
- iOS (Stack v4): updating the header no longer crashes when a header subview mounts or unmounts during the update in #4851.
- iOS (Stack v4): the navigation bar alpha is restored after a cancelled zoom dismissal in #5055.
- Web:
Screenkeeps itsstylewhenenabledis false in #4917.
New contributors
Welcome to our new contributors: @nkt, @ilp0, @Av1for, @Bram-dc and @dongriDK.
See the full release notes for 5.0.0-beta.1 on GitHub and the full changelog in 5.0.0-alpha.4...5.0.0-beta.1.