🚀 What's new in the React Native wonderland?

Published 2 years ago

notJust.dev Newsletter

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

I just got back from App.js Conference, and in this issue, I want to recap all the exciting updates that were announced on stage and everything that I’m excited about in the React Native and Expo ecosystem.

✨ Mobile dev industry
✨ Universal apps: Web and Mobile
✨ Expo Router V2
✨ Run React Native Everywhere
✨ What’s up with the new Architecture?

Where is the mobile industry going?

The future of mobile development looks promising 🔆

In 2022, 60.66% of traffic was mobile, and 37.08% desktop. (Source: Statcounter)

At the same time, due to economic reasons, companies are looking to do more with fewer people. If 3 years ago, companies could afford to invest in a web, android, and ios team, nowadays they are looking at solutions to achieve the same with only 1 team.

What does that mean? Either - prioritize the web and give up on mobile, or prioritize mobile and give up on the web, or a better solution - do both at the same time???

In the previous issue, I talked about the story of the most talked about app nowadays - Bluesky. A React Native app that works on Android, iOS, and also WEB - built by one developer in just 6 months.

We are moving away from choosing between web OR Mobile, to…

Web AND Mobile

If you are building a consumer application, it is hard to decide if you should go with a web or a mobile app. There are pros & cons for both.

The truth is, that users want both a web and a mobile app, in different circumstances.

Let’s take TikTok for this example. Even if you don’t have the mobile app on your phone, when someone sends you on WhatsApp a weird dance from TikTok as a URL, you can open it and see the video. It opens in a browser, and you don’t have to install an app to see a video. That’s convenient.

After receiving a couple of these videos, you decide to give it a try and check the app for yourself. On the web application, you see the banner “Install app” that automatically installs the application without redirecting you to AppStore. That’s convenient.

Next time someone sends you a TikTok link, you will be redirected to the TikTok app, because it is already installed, and the video will play there. That’s convenient.

Mobile apps provide a better, faster, and more immersive experience for users, but it is on the web where users will find out about your app. It is through the links people share with their friends and through Google searches that your app will get discovered.

That’s why, it is no longer Web vs Mobile. It’s Web AND Mobile.

Expo Router V2

Expo router is the first file-based navigation library for react native that works based on links. This makes navigation in mobile apps similar to how it works on the web. The benefit is that every screen in our app can be accessed through a (deep) link.

Evan Bacon announced Expo Router V2, which will be included in Expo SDK 49 somewhere in June. There are a lot of exciting new features coming to V2, but here are some of my favorites.

Auto-typed route names.

Now, your editor will autocomplete the route you are trying to navigate to.

Aliased imports.

No more spaghetti imports from your screens like:

import Post from '../../../../src/components/Post'

You will be able to define alias paths, and then import easier

import Post from '@/components/Post'

Static Routes

Render Expo Router pages to static files (html, css, js) at build time and serve them from any web server or even from an S3 bucket. This will help with SEO making your app more discoverable.

Expo will add a Head component, which will help you customize the metadata of web pages.

Async Routes

Speed up the startup time of the application, by Lazy Loading screens, only when you need them.

First-class CSS support for Expo Web

Style your Expo web app the web way - using CSS, SASS/SCSS, and even Tailwind.

I’m excited to dive deep into all these features in our future live streams. If you want to learn more, read this Thread or watch the announcement from the stage.

React Native Everywhere

When we talk about running React Native apps on All platforms, we usually assume iOS, Android, and Web. Even though that’s where most of the time is spent, we cannot ignore other major platforms.

Now you can build Windows and MacOS apps using React Native. Microsoft forked the React Native repository and made it compatible with macOS and Windows. They are internally using it to build a lot of UI for Microsoft Office and Excel.

Fun fact: the Desktop Messanger app from Meta is built fully in React Native.

Check out the keynote for more details. There is also a very fun demo of a macOS minibar app 🤯

On the other note, Kudo Chien showed us how we can run React Native on Linux and even on a Raspberry Pi device.

I also heard that PlayStation is using React Native for some parts of the user interface. I wonder where else is React Native used? 🤔

The new architecture

Last year everyone talked about the New Architecture of React Native - which is the new way React Native exchanges data between the javascript side and the native side in a synchronous way.

The main problem with adopting the new architecture is the all-or-nothing approach. You can switch to the new architecture, only when all the packages and native modules your app uses have been migrated. A lot of popular packages indeed have been migrated, but not all.

The good news is that from React Native 0.73, we will be able to move to the new architecture even if not all the dependencies and native modules have been migrated. You will just have to specify which native modules are not yet using the New Architecture, and you will be able to use the new arch in your project.

I believe this will ease the transition to the new arch, and more projects will slowly migrate to it.