#46 Expo Router Bottom Sheet, Static Hermes Update, Cloud Build


notJust.dev Newsletter πŸš€

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

Hey notJust Developers,

Happy New Year from the notjust.dev crew πŸŽ‰! Hope you remembered to add notjust.dev to the State of React Native Survey.

Let's dive into today's highlights.

  1. New Bottom Sheets in Expo Router v4 πŸ”₯
  2. Static Hermes Update - 2024
  3. The best build is no build πŸ’―

New Bottom Sheets in Expo Router v4 πŸ”₯

Implementing bottom sheets in a React Native or Expo app is always challenging, especially when you want to achieve a native feel on both Android and iOS. The good news is that Evan Bacon, creator of Expo Router, made it pretty easy for you. With Expo Router V4, you can now declare any routes (screens) as a Bottom sheet. All you need to have is Expo Router V4 in your Expo app and just set the presentation attribute value to formSheet as shown below. More details can be found in this guide.

import { Stack } from "expo-router";

// Components here ...
<Stack>
    <Stack.Screen name="info" options={ {
        presentation: "formSheet"
        gestureDirection: "vertical",
        animation: "slide_from_bottom",
        {/* ... other attributes */}
    } } />
</Stack>

This Bottom Sheet feature in Expo Router uses the Software Mansion React Native Screens package, which allows for smooth gesture and animation direction while opening and closing the bottom sheet. The most interesting thing is that it works similarly to native Apple and Android bottom sheets, providing a truly native feel. It even works smoothly on the web (by using the vaul modal) without any issues. Why not give it a try today πŸš€?

Static Hermes Update - 2024

​Tzvetan Mikov, the tech lead at Hermes Team, announced in one of his X (Twitter) posts that they will soon make Static Hermes an option in React Native. And by the end of this year (2025), Static Hermes will become the default. πŸ”₯ Isn’t it crazy?

Short Intro On Hermes & Static Hermes

​Hermes is currently the default JS engine in React Native that generates bytecode from JS code at the app’s build time. Then, at runtime (app launch time), Hermes loads the bytecode to run on devices. However, Static Hermes is an advanced version of Hermes that compiles typed JavaScript (e.g., TypeScript) directly into native code (e.g., Swift, Kotlin) instead of bytecode πŸ’―.

Static Hermes Update: 2024

Static Hermes’ primary goal was to only convert typed JavaScript (e.g., TypeScript) code to native code, but it is also important to be able to convert untyped JavaScript (vanilla JS) code to native code because many codebases don’t use TypeScript. So, throughout 2024, the team worked on this, besides improving the overall performance of Static Hermes from approximately 3x to 7x faster than before. Tzvetan Mikov mentioned that all the latest Static Hermes code is under the static_h branch on GitHub, which now supports both typed and untyped JavaScript compilation.

The best build is no build πŸ’―

Do you ever feel that React Native app build times (both Android and iOS) can consume up to 7% of your team's productive time each month? You're not aloneβ€”the Callstack team feels the same way. To save you from those long waits, they're working on some amazing solutions. The proof of concept (PoC) is already ready and demoed above.

Build on Cloud πŸš€

So, MichaΕ‚, along with Maciej Jastrzebski and Szymon Rybczak from CallStack, are working on GitHub Actions. The idea is that when you git push code, it will automatically create a build in the cloud. Once the build is ready, the run:android command (and soon run:ios) can fetch the build file (binary) from the cloud to your Mac/PC and push it directly to the connected phone, emulator, or simulator. This means you won't need commands like pod install or gradlew anymore. Even the app will be connected to the Metro Server, so you can continue local development, and any changes in JS code will be reflected in the connected app.

NOTE: It's not yet ready for public release, but it will be soon. πŸš€

​

That’s it πŸ™Œ

As the new year begins, it's the perfect time to start investing in React Native and Expo. To get you started, the React Native Mastery course can be your best choice, as it comes highly recommended by several community experts and leaders. πŸš€

​

πŸ” In case you missed it

Why React Native Is the Future and How to Master it in 2025

what makes React Native the framework of the future? And how can you master it to build your own scalable, production-ready mobile apps in 2025?

Expo SDK 52 & React Native 0.76: Latest Updates and Improvements

We're exploring powerful new features, including the new React Native DevTools, faster Metro builds, DOM Components, and experimental tree shaking in Expo.

πŸ”₯ Press worthy

1️⃣Try Bright Data today and simplify your data collection process.

2️⃣Add analytics to your React Native app in under 1 minute with Vexo. Use the promo code β€œNotJustDev10” for a 10% discount!

3️⃣React Native 0.77 RC-6 has been released, and the stable v0.77 is coming next week. πŸ”₯

4️⃣ New Network Tab coming to RADON IDE, similar to React DevTools in the browser.

5️⃣New podcasts published by CallStack with Evan Bacon on DOM Components & React Server Components.

6️⃣ Expo team published the 2024 year in review.

7️⃣ React team has updated documentation on how to highlight live re-renders in React Native apps by using React Native DevTools.
​
​

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 2 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. Available NOW!
  2. ​Join us as a Sponsor - Showcase your product to mobile developers and turn them into skilled, loyal users through engaging hands-on tutorials.
    Because the best marketing happens through education!
​

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, Callstack and Software Mansion engineers are working on amazing AI tools for React Native apps. The most exciting one is React Native ExecuTorch, which we'll explore today. Let's dive into today's highlights. React Native ExecuTorch - On device LLM πŸš€ Radon IDE v1.0 released πŸ”₯ React Native Sheet Transitions launched πŸ’― Now, let’s explore each news story in detail. React...

notJust.dev Newsletter πŸš€ Stay up-to-date with the latest technologies and become a better developer Hey notJust Developers, The React Native team made a great announcement last week, about 0.77. Why wait? Let's dive into today's highlights. React Native 0.77 RC-0 Released πŸš€ Unistyles 3.0 Released πŸ”₯ Meet Cali: an AI agent for React Native 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...

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. React Native 0.76 stable out πŸš€ Expo SDK 52 beta released πŸ”₯ 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...