Hey notJust Developers,

Expo released the Expo SDK 50, Expo Router V3, and a lot of other improvements that will enhance our experience building Mobile Universal Applications with React Native.

In this issue, I want to go over the big changes that will impact most React Native Developers.

Today I am going Live on YouTube, to go more in-depth and to see the new changes in practice, in real applications. 🎥🔍

Sponsored by IMB Stepzen​

Intimidated by GraphQL? 😱

With IBM StepZen you’ll be impressed how easy it is to build GraphQL APIs.

All you have to do is run a CLI command ($ Stepzen import), and IBM StepZen does the rest. It connects with a wide range of data sources such as SQL databases, Rest APIs, and even other GraphQL APIs.

I’ve personally used it in multiple projects (Spotify, StackOverflow, LinkedIn) and it saved so much time.

Let IBM StepZen take care of the boring stuff so that you can focus on building impactful apps 🚀

Expo SDK 50

Let’s start with the core of Expo - the SDK. Expo SDK 50 comes with the latest version of React Native 0.73.

The highlights of this release are:

• Improved debugging 🐛
• Improvements for Offline First Apps 📴
• Expo Go changes 🔄

Debugging

I feel that the topic of the previous year was “Improving the debugging experience of React Native apps”, and we continue to get significant improvement on it.

Expo Dev Tools Plugins

Expo is launching the Dev Tools Plugins, which will enable library owners to create browser-based tools for debugging. For app developers, using these plugins will help us inspect specific parts of our app (ex: data, state, UI trees, etc.) and trigger some actions from a user-friendly browser window.

There are already some useful plugins that you can start using today: @dev-plugins/react-navigation, @dev-plugins/apollo-client, @dev-plugins/react-query, and more here. 🛠️✨

First-class Sentry support

​Sentry is a crash-reporting tool. I use it in my finance tracking app - Famifi, and it helped me discover issues that I wouldn’t know about otherwise.

Previously, there were some challenges synchronizing the source maps of your app with Sentry, especially when using EAS Update.

Now, Expo has announced first-class support for Sentry using the @sentry/react-native package (expo-sentry has been deprecated).

With the new changes, we can upload the new source maps when creating a new OTA update with EAS Update by simply running

eas update && npx sentry-expo-upload-sourcemaps dist​
​

Read more about using Sentry at the Expo. 📚🚀

Tools & Libraries

Expo not only gives us the SDK, but a lot of crucial libraries. Two of them got a big upgrade.

To support the movement towards local/offline first apps, Expo completely rewrote the expo-sqlite/next package to improve the API and add support for crucial SQLite features.

Another library that received a big update is the expo-camera.

Other notable changes in expo libraries:

• expo-font can now add fonts to the native binary, instead of loading all custom fonts when the app launches (at runtime).
• expo-secure-store has synchronous getItem and setItem methods. No more async function inside useEffects is needed when reading an item.

Expo Go

Expo Go is the Mobile App that we use to run our Expo projects in minutes. Think about Expo Go as the browser (ex: Google Chrome), that is being used when running web apps. It allows us to focus on our app’s code, and not on the native client that runs our code. 📱

For Expo Go to be able to run your app’s code, it should include a lot of packages and native libraries that most apps use. At the core of expo apps, we have Expo SDK.

Historically, Expo Go included multiple versions of Expo SDK, in order for us to be able to run apps using different SDK versions with the same Expo Go app.

First of all, the new version of Expo Go dropped support for SDK 47 and 48 (meaning it supports SDK 49 and 50). To run projects using an older SDK version, we should install an older version of Expo Go.

What’s coming next for Expo Go?

Expo said that supporting multiple SDK versions in Expo Go is time-consuming and a quite difficult task. Therefore, starting with SDK 51, Expo Go will only include 1 Expo SDK version per release.

Moving towards development builds

While Expo Go is a very handy tool to get started easily, without having to set up XCode or Android Studio tools, and without having to build and re-build native projects, it seems that the future of Expo development will move more towards Development Builds.

To follow the analogy I made about Expo Go being Google Chrome, a Development Build is like your custom browser.

The benefit of creating Development Builds is that it can include ANY native code that your app depends on (either native code from libraries you use or native code that you write).

My recommendation is to get familiar with Development Builds and with the CNG (Continuous Native Generation) process. Don’t be scared of them, it’s not that complicated.

Expo Router V3

Expo Router V3 brings a lot of stability and performance improvements, and more powerful web support, but the most exciting thing, is the API Routes.

API Routes

With API Routes, we can write functions that will run on the server side. That means we can now build Full-stack Universal Apps using only Expo.

Why do we need them?

Server-side routes can be used to handle sensitive data: API Keys, connect to databases, and implement server-side logic. For example, I was building an AI App using OpenAI 🤖, and in that case, you don’t want to call the OpenAI API from your client side because that would expose your private API Key. For that reason, I created an API Route that sends the requests to OpenAI, and this way, my API Key is safely stored and only used on the server.

To create a server endpoint just add the suffix +api to your file name (inside the app directory of Expo Router). From the file, export one or multiple functions with the following names: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS.

The server function will be executed on the server when the endpoint matches the file path, and the HTTP method matches the function name exported from your route.

This setup is enough for local testing. For production, we have to build our app and deploy it to a server. Expo docs contain guides on how to deploy to popular hosting providers like Netlify, Vercel, and even a NodeJS server using Express.

It’s notJust a Router

Don’t get confused by the name: Expo Router. Starting with V3, it’s not just a router. It’s a framework for building Full Stack Universal apps targeting Mobile (iOS & Android), Web, and now also Servers with API Routes.

Expo’s vision is to become the Universal React Native Framework and at the core of this movement is Expo Router. My recommendation is that you start learning it if you haven’t already. It’s gonna serve you well.

EAS

EAS (Expo Application Services) is the cloud tool for Building, Submitting, and Updating over-the-air our React Native apps. There are a lot of updates there, but this newsletter is getting too long, so I will keep it short. 🚀👩‍💻

From the major changes, I am excited about the new Rollbacks and Rollouts feature of EAS Update. With Rollback, we will be able to revert back an update, if we introduce some bugs.

With Rollouts, we will be able to send the OTA Update to a small subset of users, test it and make sure it works well, and then send it to the rest of the users.

There is also a new hook useUpdates in the expo-update library, which can give you information about the available updates, so you can, for example, show a popup to the user letting him know that there is a new update (here I am talking about OTA updates). 🔄📊📲

Shape your ideal React Native course🚀

Things are changing fast in the React Native ecosystem, and a lot of innovations are powered by Expo.

For that reason, I started working on a new course, focused on the modern React Native development using Expo.

At this moment, I need your help. Share with me some insights in this 15-minute Survey 📝 and help me design the best React Native course out there.

As a token of appreciation, we will do a $300 Giveaway💸 and will select one person. 🎉

🔴 Join me live

This Friday we will build In-app Subscriptions & Paywalls with RevenueCat in React Native. It's going to be a tutorial packed with value, so set a reminder and don't miss it out 👇

​

​

​

🔁 In case you missed it

DEVember 2023 DEVember was a special initiative by notJust.dev, where Vadim posted a live tutorial every day in December, diving deep into mobile development using React Native. Watch now

Ultimate Workout Tracker Let's build a full-stack fitness app to track your workouts using React Native, Expo, MongoDB, IBM Stepzen, and GraphQL. Watch now

🔥 Press worthy

🚀 If you have ideas for mobile startups, there is still some time to apply for notJust Incubator​

💰 Integrate InApp Subscriptions and Paywalls in React Native using RevenueCat​

​📱 Who's using Expo OSS in 2024​
​
​

Did you learn something new today?

If you found this email valuable, forward it to one friend or coworker who can benefit from it as well. That would be much appreciated 🙏

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