Expo 46 — What’s New and Why it Matters for React Native Development
Expo is a great tool for cross-platform development of React Native apps — and with the release of Expo 46, it just keeps getting better. In this post, we’ll dig into the new features of Expo 46, and more important, why they matter.
I’ll admit I’m a little late on this post, since Expo 46 was released in August. I decided to write this now because I hadn’t upgraded previously (more on that later) and just tried it out on a new project. Expo has come a long way — let’s see how!
What’s new
We’ll look at some of the major new features in Expo 46, but there’s much more! For a full list of changes, see the blog post on the release of Expo 46.
Support for React Native Skia
Skia is a high-performance 2D graphics library that serves as the graphics engine in a number of Google products. If you’re looking to add any kind of animation and interactivity to your React Native apps, Skia is kind of a big deal. The React Native Skia project brings Skia support with simple APIs to React Native, and Expo 46 adds support for React Native Skia out of the box.
In the words of the release notes:
“This library raises the ceiling over what you can do in React Native — it’s truly a “game changer” for producing performant visual effects with React” — Expo Blog
Why it matters: Skia’s high performance animation engine really does enable new kinds of 2D animation and interactivity in your React Native apps.
Note that when we talk about animation in React Native, there are many different kinds of animations, and they do require different tools. For example, for transitions and animations of UI elements, you probably want to use a tool like Reanimated. So don’t assume that Skia is the solution for all animations in your React Native apps. That said, for 2D interactive animations, Skia really is a game-changer!
Support for React Native FlashList
If you’ve ever built any kind of list of components in React Native, you’re probably familiar with the performance and behavioral pitfalls that can come along with it. React Native offers a built-in FlatList component which attempts to address some of the performance and behavioral issues by recycling and re-rendering list items under the hood, and adding in standardized support for headers, footers and other component behaviors.
In spite of the improvements over a naive implementation, FlatList can still exhibit performance issues on large lists with items that are slow to render. Fortunately, there’s a near drop-in replacement for FlatList that dramatically improves performance & memory usage: FlashList — and it’s supported in Expo 46 right out of the box!
Why it matters: Working with lists in mobile apps can be tricky, and is a common source of performance issues which can make an app appear difficult to use and unpolished. Support for FlashList is a great, nearly drop-in way to boost list rendering performance in Expo 46.
Support for React Native 0.69 and React 18
One tricky aspect of working with Expo is that it’s often coupled to specific versions of some important dependencies. How much of an issue that is can vary greatly, depending on the specific dependencies and versions in question. With the release of Expo 46, developers can use the (almost) latest and greatest versions of React Native, version 0.69 and React version 18.
Why it matters: React Native 0.69 itself is a big deal as it brings major improvements to React Native, particularly in terms of performance, courtesy of the “new architecture”. I’ve written about the improvements in React Native 0.69 here. Making these improvements available to Expo apps is a major step forward in terms of performance.
At the start of this article, I mentioned that I hadn’t updated to Expo 46 right away. That’s because the project I’ve been working on the most recently hasn’t been using Expo at all , because of the lack of support for React Native 0.69 and React 18! With Expo 46 bringing React Native mostly up to date (there is a 0.70 release of React Native now), developers who are looking to get the latest and greatest performance benefits from React Native should be able to do so again with Expo.
Recap: Expo 46
Expo is a great tool for React Native development, and with the release of Expo 46, it enables some great new features and major performance gains. If you haven’t been paying close attention to React Native and Expo over the past year or so, you’re missing out — they’ve both made huge strides. Now is a great time to give Expo & React Native a try.
To see the full list of new features and how to upgrade, checkout the announcement on the Expo blog.