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.
- New Bottom Sheets in Expo Router v4 π₯
- Static Hermes Update - 2024
- 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";
<Stack>
<Stack.Screen name="info" options={ {
presentation: "formSheet"
gestureDirection: "vertical",
animation: "slide_from_bottom",
{}
} } />
</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:
- βReact Native Mastery β The Ultimate React Native & Expo Course. Build 7 real-world projects and finally master mobile development with React Native. Available NOW!
- β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!
|
|
β