#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 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. 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!
  3. โ€‹Incubator is back for its 3rd run! Our 10-week program is all about launching your app fast and generating revenue from day one. Join the waitlist to stay updated.
โ€‹

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 Reader,, Welcome to month 3 of my app portfolio journey. I'm sharing everything - the wins, the experiments, and the lessons learned as we build toward 10 profitable apps. TL;DR This month shows some early signs of growth: $123 revenue (+712% ๐Ÿš€) 506 downloads (+52%) 6/10 apps launched (goal: 10 apps by year-end) 1. Launched Baby Kick Counter ๐Ÿ‘ถ We added our 6th app to the portfolio! Lukas...

notJust.dev Newsletter ๐Ÿš€ Stay up-to-date with the latest technologies and become a better developer What's up, nerds ๐Ÿ‘‹ In January 2025, Lukas and I set an ambitious goal... Launch 10 apps this year. A very optimistic goal, considering everything else we are doing at notJustDev. But guess what? We've already launched 6 out of 10 apps. And it's only September. How? Because we cracked the code and created something we call THE PLAYBOOK. A battle-tested system that turns app ideas into real,...

notJust.dev Newsletter ๐Ÿš€ Stay up-to-date with the latest technologies and become a better developer Hey notJust Developers, Ready to talk about something that could boost your app revenue? Let's dive into web checkout for mobile apps. Today, we're covering everything you need to know about web checkout - from the basics of what it is and why you'd want it, to the exciting new opportunities Apple's recent ruling opened up. We'll walk through the pros and cons, show you how to combine web...