πŸš€ React Native 0.76, Expo SDK 52, NativeWind V4, React Native Edge-to-Edge


notJust.dev Newsletter πŸš€

Stay up-to-date with the latest technologies and become a better developer

Hey notJust Developers,

The wait is over β€” React Native 0.76 stable was released last week! Plus, the Expo team launched the SDK 52 beta. Exciting stuff! Let’s see today's highlights.

  1. React Native 0.76 stable out πŸš€
  2. Expo SDK 52 beta released πŸ”₯
  3. New React Native Edge-to-Edge SDK πŸ’―

This issue is sponsored by RevenueCat​

In-app subscriptions are a pain. The code can be hard to write, time-consuming to maintain, and full of edge cases. RevenueCat makes it simple, plus provides analytics, integrations, and tools to grow so you can get back to building your app.

​Get started with RevenueCat for free, and save weeks of development time integrating In-app subscriptions.

Now, let’s explore each news story in detail.

React Native 0.76 stable out πŸš€

Back in September, at React Universe Conf, the team announced they'd start working on 0.76. After 6 Release Candidates, they finally released the stable version last week. Major updates are:

  1. New Architecture now Default
  2. New React Native DevTools
  3. 15x Faster Metro build 😱
  4. New boxShadow style props added
  5. Android Apps now ~3.8Mb smaller and ~15ms less startup time πŸ’―

New Architecture now Default

​Since 2018, the React Native team worked on a New Architecture to replace the slow bridge (JSON communication) between JS and Native code (Swift, Kotlin). They created a C++ layer called JSI to speed up the communication. This new flow of communication is called New Architecture. In March 2022, it became an experimental option in React Native 0.68. Now, in 0.76, the New Architecture is production-ready πŸ”₯. Check out our detailed post on New Architecture explained like I’m 10.

New React Native DevTools

After 6 years of hard work and learning from all previous DevTools (JSC Debugger, Remote JS Debugger, Hermes Debugger, Flipper, Dev Menu), the team finally released the next-gen debugging stack & made it the default in 0.76. It can debug nearly every component of the Dev Environment (Hermes, Metro, React code). So, from 0.76 you don’t need any other Debugging Toolsβ€”just Chrome or Microsoft Edge installed on your device. No other setup is required 🀩.

NOTE: Keep an eye on notjust.dev/blog - we’ll soon publish a detailed blog post on the React Native 0.76 release! πŸš€

Expo SDK 52 beta released πŸ”₯

The Expo team released SDK 52 beta (stable within 2 weeks) with lots of exciting features, including React Native 0.76. The most exciting are:

  1. Expo DOM Component
  2. Experimental Tree Shaking

Expo DOM Component

​DOM Components are super helpful for migrating a web app (like a React or Next.js app) to a mobile app (like a React Native app) or if you have a web library that isn't yet available for native Android or iOS. To save months of work, you can just create a DOM Component, and copy-paste your web code (like code with <div>, <h1>, etc.) into your Expo project, and write β€œuse dom” at the top of the component (Expo JS file). Boom, your React (web) code now works smoothly in your native app πŸ”₯. Isn’t it crazy? Kudos to Evan and his team.

Experimental Tree Shaking

SDK 52 adds experimental Tree Shaking support. This allows Expo to automatically remove unused imports and exports from your app. For example, if you use the lucide-react library and only need ChevronLeft and ChevronRighticons, Tree Shaking will keep just those icons in your app's JS bundle. Unused icons will be removed. One benchmark showed this can reduce bundle size by up to 87% πŸš€.

New React Native Edge-to-Edge SDK πŸ’―

​Mathieu, with Expo, released react-native-edge-to-edge to support Android 15's edge-to-edge enforcement by Google. Edge-to-edge means that the app content will use the entire screen, including areas under the device status bar(the bar that shows you time, battery charge, etc.) and the device navigation bar. Currently, edge-to-edge is optional for apps, but from Android 15, with the app's Target SDK level set to 35 or higher, edge-to-edge will be the only choice, and the status & navigation bars will be transparent. However, React Native 0.76 still uses Target SDK Level 34 as the default.

The important thing to consider is that Mathieu mentioned we can expect Google to force all apps to update their Target SDK level to 35 by August 2025, based on previous years' experience. This means it will be mandatory for every React Native app to handle edge-to-edge by this time. But yeah, this new SDK supports Immersive mode (the mode where both the status bar and navigation bar get hidden) without any extra hassle (as shown in the above image).

Community with Positive Feedback

The library got over 500 stars in just 2 weeks. Developers started using the SDK and removed old dependencies like expo-navigation-bar from their apps. Even, the React Native team recommended it for Android 15's edge-to-edge enforcement. Popular libraries like react-native-keyboard-controller and React Native Bottom Tabs are also adopting it. Try it and keep your app safe from Google policy πŸ™‹.

That’s it πŸ™Œ

Last week felt like the payoff of many years of hard work. As Nicola said, after 3 years of effort, the New Architecture is finally ready for production. Plus, the next-gen debugging stack now combines features from all the debuggers Meta created in the last 6 years πŸ’―.

πŸ”΄ Join me live

This Friday we will check the latest updates of Expo SDK 52 & React Native 0.76. It's going to be a tutorial packed with value, so set a reminder and don't miss it out πŸ‘‡

video preview​

​

Count down to 2024-11-08T15:00:00.000Z​

πŸ” In case you missed it

Build Headspace Clone with React Native, Expo and RevenueCat

We'll build a fully functional meditation app inspired by Headspace using React Native, Expo, and Expo Router. This project covers audio playback for meditations, animations for a beautiful user experience, and monetization with in-app subscriptions powered by RevenueCat.

Integrate Stripe Payments in Your React Native E-commerce App

In this part we’ll integrate Stripe payments into the application, enabling secure and fast transactions. From setting up Stripe to handling payments within our React Native app, this tutorial will guide you through everything needed to add a smooth checkout experience.

πŸ”₯ Press worthy

1️⃣ Join me at RNLConf next week! Get 10% off with the code NOTJUSTDEV

2️⃣ New blog by the React Native team: Overview of the New Architecture and its future impact.

3️⃣ React Native Reanimated v3.16 is out. Added support for React Native 0.76, React Compiler, better log, and many more.

4️⃣ NativeWind v4 is officially live for production use with lots of improvements like fast(er) refresh & Enhanced animations πŸ’―.

5️⃣ React Native visionOS 0.76 is out! Supports React Native 0.76, the new React Native Debugger, and makes the New Architecture the default.
​
​

Did you learn something new today?

If you found this email valuable, forward it to one friend or coworker who can also benefit from it. That would be much appreciated πŸ™

The newsletter was written by Anis and edited by Vadim Savin.

Vadim Savin

Helping you become a better developer together with the notJust.dev team

Whenever you’re ready, there are 3 ways I can help you:

  1. ​React Native Mastery – The Ultimate React Native & Expo Course. Build 7 real-world projects and finally master mobile development with React Native. Launching in November 26.
    ​Join the Waitlist to secure your spot.
  2. ​notJust.Incubator – Turn your mobile app idea into a successful product. Our 3-month incubation program offers mentorship, domain expertise, and a proven formula for launching a mobile app with a solid business model.
    Got an idea? Apply now!​
  3. ​notJust.Hack - Ready to build that app you’ve always dreamed of? Join us this December for a month-long Hackathon. This is your chance to create, pick up new skills, and bring your vision to life. As always, the top project will be gifted prizes, with the biggest being Macbook Pro M4. Join here!​
​

113 Cherry St 98104-2205, Seattle, WA 98104-2205
​Unsubscribe Β· Preferences​

notJust.dev Newsletter

Stay up-to-date with the latest React and React Native news and become a better Mobile Developer

Read more from notJust.dev Newsletter

notJust.dev Newsletter πŸš€ Stay up-to-date with the latest technologies and become a better developer Hey notJust Developers, Engineers at Infinite Red and Callstack have recently done amazing work in the React Native community. In today's newsletter, we highlight the top three stories from these teams. Introducing Ignite X πŸš€ New React Native Bottom Tabs out πŸ”₯ Re.Pack now 5x faster by Rspack πŸ’― Now, let’s explore each news story in detail. This issue is Sponsored by Genezio Genezio is a powerful...

notJust.dev Newsletter πŸš€ Stay up-to-date with the latest technologies and become a better developer Hey notJust Developers, This week brings some exciting React Native updates! The creator of Tamagui has built a new React cross-platform framework called One. That’s crazy! Let’s dive into the two big news items: New React Native Framework: One πŸš€ Nitro Module Framework Launched πŸ”₯ This issue is sponsored by RevenueCat In-app subscriptions are a pain. The code can be hard to write, time-consuming...

notJust.dev Newsletter πŸš€ Stay up-to-date with the latest technologies and become a better developer Hey notJust Developers, React Universe Conf (formerly React Native EU), organized by Callstack, has recently concluded. The two-day event started on Sept 5th and was filled with exciting announcements. So many announcements, that we had to cover them in 3 different issues. In the previous issues, we covered: The New Architecture as Default in 0.76 πŸš€ New React Native DevTools πŸ’― Expo Dom...