Every Expo release is better than the previous one, and the SDK 48 is no exception.

We are not talking about marginal improvements. We are talking about huge updates and new packages like Expo Image and Expo Router.

I got my hands dirty with all the new updates from Expo SDK 48 in this live stream so you don’t have to. I will summarise the most important ones that you should be aware of.

Expo Router - the default navigation

Who would’ve thought? 🤔

The default template for a new project with tabs navigation (npx create-expo-app@latest --template tabs) is using the Expo Router by default.

Expo Router is the new file-based navigation system for mobile apps built on top of React Navigation. To create a new page (ex: a new tab), you would simply create a new file in the right directory, and the expo router will handle the rest.

You can learn more about Expo router by watching our deep dive livestream.

React Native 0.71.3 and React 18.2.0

Expo SDK 48 includes React Native 0.71.3 and React 18.2.0.

React Native 0.71 is the latest version of React Native at the moment of writing this (Released in January 2023). This means that by choosing Expo for your next project, you are up-to-date with the React-Native version.

RN 0.71 brings the long-awaited flex properties gap, rowGap, and columnGap. They allow us to specify the spacing between items and rows in a Flexbox. A small thing, but very helpful when building grid layouts.

Other updates from React Native 0.71.3

React Native 0.71 brings some changes to accessibility, styles, and events with the goal to bridge the gap with WEB development.

• We can use the src property for the image component, instead of source
• New accessibility props (aria-*)
• aspectRatio supports string values
• fontWeight supports number values
• transform supports string values

PointerEvents for Views:

• onPointerOver, onPointerOut
• onPointerEnter, onPointerLeave

Expo Image v1.0

​Expo Image is a cross-platform React component that loads and renders images. It is intended to be a successor to React Native’s <Image> component.

But, what’s wrong with the <Image> component?

The short answer is performance, as always. (flickering, bad caching).

Expo Image is designed for speed, supports many image formats, improved caching, and also adds support for common image patterns like placeholders, transitions, and blurhash.

Hermes is now the default JavaScript engine

JavaScriptCore (JSC) was replaced by Hermes as the JavaScript engine.

What does that mean for you, as a developer?

• Faster startup time
• Smaller app size
• Better memory consumption
• Better debugging experience

What’s up with the New Architecture?

Expo SDK 48 supports the New Architecture/Fabric in all Expo packages (except expo-dev-client and expo-go).

However, it is still not recommended to use the New Architecture yet because you will most likely run into issues caused by some third-party libraries that still need to be migrated.

Faster iOS builds with EAS

EAS is now using M1 chips for their servers that are building your applications, resulting in faster builds for iOS by an average of 40%.

How to upgrade your app?

• Install the new version of the Expo package npm install expo@^48.0.0
• Upgrade all dependencies to match SDK 48: npx expo install --fix
• Check for any possible issues in your project dependencies: npx expo-doctor

🔴 Join me live

This Friday we will build the Tesla application with React Native and Expo. It's gonna be a tutorial packed with value, so set a reminder and don't miss it out 👇

🔁 In case you missed it

Did you learn something new today?

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