github software-mansion/react-native-screens 4.0.0

12 hours ago

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 for sheetLargestUndimmedDetent 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 of Screen'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

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

Full Changelog: 3.34.0...4.0.0

Don't miss a new react-native-screens release

NewReleases is sending notifications on new releases.