Issue #1
After months years, the 76th claim of new architecture stability is finally upon us. That’s a joke (but not really). If you’ve been anywhere near React Native since 0.68, you’ll know that the New Architecture, much like Anakin Skywalker, has held immense promise but been plagued by internal conflict.
If you’re not familiar with the New Architecture, here’s a quick rundown: since 2018, the React Native team has been working on overhauling the core internals to boost performance and tackle some long-standing limitations. The rollout, however, has been... let’s just say “less than smooth.” If you’re curious (or brave), you can dive deeper into the details in the About the New Architecture. Since version 0.68 the architecture has been available for experimental opt-in.
In version 0.75, we’ve been told that a whole suite of bug fixes has finally arrived, promising to stabilize the New Architecture. The real pain point, however, remains the same: upgrading feels like a round of npm bingo as you wait to see which of your dependencies supports the new arch. Fortunately, the folks at Expo have stepped in and added information about New Architecture support to the React Native Directory—so you can check before taking the plunge.
For library maintainers, there’s also a significant update: the once-experimental API for accessing jsi::Runtime in TurboModules is now considered stable. This should make life easier if you’re building advanced integrations.
Now, armed with these updates, I can finally make my Tinder-for-dogs app 500ms faster and help my Jack Russell find true love.
No, I’m not talking about Yoga with Kassandra. I’m talking about the cross-platform layout system developed by Meta that powers React Native’s layout engine, aptly named Yoga.
Version 0.75 of React Native brings some flexibility back with Yoga 3.1, which includes the highly requested support for percentage-based values in layout properties like gap, rowGap, and transform.
These changes offer more dynamic layouts, especially for complex, responsive designs. One key detail: these features are only available if you’ve migrated to the New Architecture. So if you’re keen on using them, it’s time to make that leap.
Imagine a layout that needs fluid spacing between elements and dynamic translations. With Yoga 3.1, it’s as simple as:
With additional enhancements like percentage-based translation in the transform property, your UI can adapt more intuitively to different screen sizes.
Historically, the go-to method for creating React Native projects was to use the react-native init command. But now, the React Native team (and the Expo team, who we’re starting to suspect are basically the same people at this point) have decided that Expo is officially the best way to build a React Native app. It’s the new standard, and the shift pretty much signals the end of the old-school init days.
It’s been like watching that one coworker slowly take over the office playlists until suddenly it's just their playlist every day (and honestly, it's a vibe).
With this shift, the once-beloved react-native init command is gracefully bowing out. As of December 31st, 2024, you’ll see the final curtain call for react-native init, and any attempts to use it post-deprecation will be met with a gentle nudge toward Expo or another framework.
You can read the full release notes at React Native 0.75.
React Navigation V7 has landed, and—surprise!—there’s a new way to configure your navigators.
React Navigation has been on a bit of an API rollercoaster over the past few years. First, the Static API was deprecated, but now it’s making a comeback like baggy jeans or vinyl records—gone for a while, but apparently too classic to stay out of style for long.
Yes, the API shuffle continues! Just when we thought we were settling into the dynamic API, the React Navigation team has decided to dust off the old configuration style with a shiny new Static API. It’s almost like they can’t decide which approach they like more, so they just keep throwing options at us in hopes we’ll eventually stop complaining.
The Static API lets you define screens using good old configuration objects, reminiscent of React Navigation 4. No more juggling functions and TypeScript headaches—well, at least not as many.
Here’s hoping that this time we won’t need to remortgage our houses just to get our routes properly typed. You can read more about the new Static API.
In a bid to improve perceived performance, React Navigation V7 now supports preloading screens before the user actually navigates to them. By rendering off-screen and triggering any side effects like data fetching in advance, your app can feel more responsive.
This feature should be especially useful in apps where anticipating user actions can lead to smoother transitions and less visible load times.
The Bottom Tab Navigator now offers sidebar support, allowing you to place tabs on the left or right side of the screen by setting tabBarPosition to 'left' or 'right'. This flexibility makes it easier to build responsive UIs that adapt to different screen sizes—tabs at the bottom on smaller screens, and a sidebar on larger ones.
Finally, for those who enjoy a bit of flair, the Bottom Tab Navigator now supports animations when switching between tabs. Customize these animations with the animation option to give your app a smoother, more polished feel.
You can read the full release notes at React Navigation 7.0 Release Candidate
Just a quick reminder for devs: Google Play now requires apps to target SDK 34 if you’re still holding onto SDK 33. On top of that, if you’re using Google Play Billing, you’ll need to upgrade to Billing 6.0 or newer. Ideally, this update won’t force you to upgrade React Native itself—but if it does, godspeed and may your npm installs be swift. Seriously though, let’s hope you can dodge the upgrade rabbit hole and avoid turning your week into a React Native migration saga.
The folks at Software Mansion have cooked up a shiny new React Native IDE aimed at speeding up your development process. The IDE lets you develop components in isolation, so you can iterate on UI without constantly running your full app. It’s currently free while in beta, but here’s the kicker: after beta, they’re likely slapping a license fee on it.
We're all about that sweet, sweet feedback, and to show our appreciation, we’re putting your projects in the spotlight! Keep those comments, suggestions, and spicy takes coming, and we’ll keep sharing your work with our subscribers. Now, without further ado, here are this week’s plugs:
Authored by Luke Farrell and edited by Friosn.
Heavily inspired by the Bytes JavaScript newsletter—one of our favourites for dev updates— instead, this newsletter is all about diving deeper into React Native and its ecosystem. We still recommend checking out Bytes though, because their meme game is strong: https://bytes.dev
If you’re enjoying this newsletter, why not help us grow? Share it with your friends, family, and even that one coworker who always “forgets” to update dependencies. Use this link: https://subscribepage.io/FjFZIL
