What's Changed
Stable 4.0.0 🎉 Huge thanks & shoutout to all the contributors, issue reporters & the team of react-native-screens
.
While these release notes might be daunting, we have a blog incoming that should lay out all the changes nicely, in more digestive form.
Cheers!
Important
Highlights
- Refactor of
formSheet
API for Android (atm. it comes with few limitations, see very bottom of these notes 👇🏻 ) react-native-screens/native-stack
(native stack v5) is now marked for removal- Few props changed names & default values, e.g.
simple_push
transition uses now shadow by default - Raw native components are no longer part of public API
- Preload support for native-stack in
react-navigation
- native header now uses flexbox model (in VDOM) - long story short - long titles are now truncated properly
- Tons of fixes dedicated for Fabric support
- Support for
react-navigation
v7 - iOS custom animations got refactored and should look a lot more like the native defaults (especially
simple_push
) - few more things.... 👇🏻
👍 Improvements / API changes
- feat!: iOS custom detents & Android form sheets by @kkafar in #2045
- refactor!: remove deprecated ios stack animation by @maciekstosio in #2361
- refactor!: add "index" suffix to selected sheet props & add better error handling by @kkafar in #2380
- fix(Android)!: overflowing text in native header by @kkafar in #2325
- feat: allow preload using activityState by @maciekstosio in #2389
- feat!: expose library
compatibilityFlags
with new flag regarding header implementation by @kkafar in #2411 - feat!: remove
shouldUseActivityState
flag by @kkafar in #2414 - docs: Add landing page for React Native Screens by @patrycjakalinska in #2240
- feat!: remove native components from public API by @maciekstosio in #2412
- refactor!: drop support for native-stack v5 by @kkafar in #2373
- feat(iOS)!: change default of
fullScreenSwipeShadowEnabled
to true by @kkafar in #2481 - feat(iOS)!: change default animation curve & duration by @kkafar in #2477
- feat(iOS): Implement blurEffect for new architecture by @janicduplessis in #2207
- feat: add support for dynamic frameworks by @WoLewicki in #2315
- feat(Android): add ios like
ios_from_left
slide animation by @chrispader in #2328 - feat: add basic React Server Component support by @EvanBacon in #2170
- feat: add monorepo support for Android builds by @kkafar in #2352
- feat: add compat mode for previously removed formSheet prop values by @kkafar in #2356
- feat: expose
none
&largest
values forsheetLargestUndimmedDetent
prop by @kkafar in #2359 - feat: add stub implementations for
ScreenFooter
for web by @kkafar in #2369 - feat: add stub implementations for
ScreenContentWrapper
for web by @kkafar in #2368 - feat(iOS): sheetInitialDetent support by @alduzy in #2367
- chore: add support for 0.76-rc.6 by @maciekstosio in #2407
- feat: add a ScreenStackItem component by @satya164 in #2433
🐛 Bug fixes
- fix!: always set Zindex to undefined for InnerScreen by @adrianryt in #2351
- fix(iOS): onNativeDismissCancelled called too early during modal dismissal by @zetavg in #2129
- fix(android): disappearing search icon on opening transparent modal by @alduzy in #2274
- fix(Android,Fabric): add missing
DoNotStrip
annotation to JNI-accessed methods by @kkafar in #2290 - fix(Android,Fabric,bridgeless): crash on RN hot reload in dev mode when redbox in presentation by @kkafar in #2289
- fix(Android): incorrect childCount in removeViewAt when using flatlist on fabric by @alduzy in #2307
- fix(iOS): Change import of RectUtil.h file to react/renderer/components by @tboba in #2319
- fix(Android,Fabric): pressable on
Screen
loses focus on pointer movement by @kkafar in #2292 - fix: do not force set
translucent
nav bar (until it's explicitly specified) by @kirillzyusko in #2301 - fix(Android): getChildDrawingOrder when using refreshcontrol by @BenIrving in #2330
- fix(Android): Request layout manually for CustomToolbar below Android API 29 by @tboba in #2332
- fix(iOS): modal not presenting when deep in stack by @maksg in #2335
- fix(Android): minSdkVersion fallback to default 21 but RN 0.74 require minSdkVersion 23 by @adrianryt in #2346
- fix(iOS): right header incorrect position by @alduzy in #2316
- fix: bring back headers when using "modal" presentation on Android by @kkafar in #2372
- fix: prevent crash when there is no appearance model built by @kkafar in #2375
- fix: align units of sheet corner radius in different callsites by @kkafar in #2378
- feat: assert that detents array is sorted in dev mode by @kkafar in #2381
- fix(iOS): full screen modal crash on paper by @maksg in #2336
- fix: check for surplus values in sheet detents array not only in dev mode by @kkafar in #2387
- fix(Android): do not crash in case background can not be casted to MaterialShapeDrawable by @kkafar in #2388
- fix(iOS): header subviews layout on tab change by @alduzy in #2385
- fix(Android): going back on fabric with nested list by @alduzy in #2383
- fix:
HeaderConfig
impacts layout ofScreen
's contents by @alduzy in #2395 - fix(Android): modal insets not applying by @alduzy in #2371
- fix(Android,Fabric): invalid behaviour of
fitToContents
sheet detent by @kkafar in #2398 - fix(iOS,Fabric): prevent memory leak by calling
invalidate
on deleted screens by @kkafar in #2402 - fix(Android): going back on fabric with horizontal list crash by @alduzy in #2403
- fix(iOS): header snapshots not working by @alduzy in #2393
- fix(iOS):
activityState
regression check false-positive by @kkafar in #2404 - fix(iOS): do not force API user to set
activityState
by @kkafar in #2406 - fix: prevent Require cycles warning by @alduzy in #2410
- fix(iOS):
extraLight
blur not working by @maksg, @kkafar in #2338 - fix(Android): crash on tab change with open form sheet by @kkafar in #2416
- fix(iOS): FullWindowOverlay layout height by @alduzy in #2430
- fix: support specifying ref on Screen by @satya164 in #2400
- fix: header config missing ref by @alduzy in #2434
- fix(Android): center headerTitleAlign below Android API 29 by @alduzy in #2439
- fix(Android): title invisible with searchbar enabled by @alduzy in #2456
- fix(Paper,iOS): dismiss all attached view controllers correctly on reload by @hirbod in #2175
- fix(Android): screen goes blank when going back on fabric by @alduzy in #2465
- refactor: use side-effect import declaration to ensure TurboModule gets loaded by @kkafar in #2468
- fix(iOS): RCTAssert.h file not found for case sensitive file system (#2472) by @Romick2005 in #2473
- fix: update getShadowNodeWrapperAndTagFromRef by @maciekstosio in #2437
- refactor: replace unstable_screenStyle with backgroundColor from contenStyle by @maciekstosio in #2419
🔢 Miscellaneous
- chore: remove unused code for finding rn version by @WoLewicki in #2288
- docs: Add workflow to publish GitHub pages by @tboba in #2299
- docs: Resolve correctly missing tv.svg file by @tboba in #2300
- docs: Fix layout of screen sequence animation by @tboba in #2303
- chore(deps): bump rexml from 3.2.8 to 3.3.3 by @tboba in #2298
- chore(Android): removed redundant FabricViewStateManager comment by @alduzy in #2310
- docs: Fix placement of Hero on big screens by @patrycjakalinska in #2305
- docs(readme): update FullWindowOverlay example path by @ilia-kurganskii in #2326
- docs: Add Testimonials by @patrycjakalinska in #2333
- chore(deps): aggregate updates from dependabot by @kkafar in #2354
- chore: fix crash in example app due to typo in export by @kkafar in #2374
- chore: remove unnecessary logs from native-stack v5 by @kkafar in #2382
- chore: bump examples to RN 0.75.4 by @alduzy in #2399
- refactor(Android): cleanup sheet behavior configuration by @kkafar in #2420
- refactor: separate Screen native props and public API by @maciekstosio in #2423
- docs: Manage system color scheme changes by @patrycjakalinska in #2440
- refactor: Separate API props and NativeProps for ScreenStack by @maciekstosio in #2450
- chore: bump RN to stable 0.76 by @maciekstosio in #2446
- chore(deps): aggregate updates from dependabot by @kkafar in #2469
- chore: Remove legacy version check in
react-native.config.js
by @lukmccall in #2432 - refactor: move ScreenGestureDetector to ScreenStack by @maciekstosio in #2449
- refactor!: use context instead of screenRefs by @maciekstosio in #2476
- chore: compatibility table README update by @alduzy in #2479
- chore(README): Redact caution of migrating JS API of native stack by @tboba in #2480
Caution
presentation: 'formSheet
is now supported on Android & has extended capabilities on iOS. Due to architectural problems (lack of support of synchronous layout on UI thread by RN) we made tradeoff when implementing the sheets: limit support for flex: 1
and prevent "sheet flickering".
What this means for you is that you should avoid using flex: 1
on top level content container you pass to the sheet. (if you really need this you might build content basing on synchronous measure). When there is less content that max screen height you might end up with "truncated" sheet - just set backgroundColor
of contentStyle
of given screen and you should be good to go.
We're aware that this limitation might be a pain and we're actively working on it.
New Contributors
- @patrycjakalinska made their first contribution in #2240
- @ilia-kurganskii made their first contribution in #2326
- @BenIrving made their first contribution in #2330
- @chrispader made their first contribution in #2328
- @adrianryt made their first contribution in #2346
- @Romick2005 made their first contribution in #2473
- @lukmccall made their first contribution in #2432
Full Changelog: 3.34.0...4.0.0