NewPlatano

What's New in Expo SDK 46 + FlashList and Skia

Beto, August 2, 2022 · 1,661 views

In this video, I walk through what's new in the freshly released Expo SDK 46, including React 18 support and meaningful developer experience improvements. I also show FlashList, Shopify's high-performance list library, now available in Expo.

I explain how to integrate Skia for React Native graphics inside Expo, something that was not possible before. If you use Expo and want the latest tools for faster, more visual apps, this video is for you.

What's inside

  • New command for Expo SDK 46 projects
  • Expo SDK 46 ships with React 18 and React Native 0.69
  • Using Skia for graphics inside Expo
  • Installing and configuring Reanimated for Skia
  • Using FlashList for high-performance lists in Expo
  • Practical example with components and styles in Expo 46
  • Updated Expo Go user interface
  • Last version supporting Expo Classic Build and the move to EAS Build

New command for creating projects with Expo SDK 46

Expo SDK 46 introduces a new project flow with . You no longer need a global Expo install, and templates are ready to go.

You can pick blank, tabs, or bare workflow templates and pin the SDK version, for example:

That creates a project on Expo SDK 46 and React 18, ready to develop without extra setup.

Expo SDK 46 ships with React 18 and React Native 0.69

Expo SDK 46 defaults to React 18 and React Native 0.69. That means you can use React 18 features like Suspense and Concurrent Mode in Expo apps.

The package.json from an SDK 46 project reflects these versions, so your app stays current with the React Native ecosystem.

Using Skia for graphics inside Expo

Expo SDK 46 lets you use Skia, a high-performance 2D graphics library, directly in Expo projects. Skia used to require complex native setup, but it is now integrated and ready to use.

Install and its dependencies, add minimal Reanimated Babel config, and you can build graphics, animations, and visual effects without leaving Expo.

Installing and configuring Reanimated for Skia

Skia needs React Native Reanimated and its Babel plugin. I cover:

  • Install with
  • Add to the Babel plugins array
  • Restart the dev server to apply changes

This setup is required for Skia and Reanimated to work together on Expo SDK 46.

Using FlashList for high-performance lists in Expo

FlashList is Shopify's library for rendering large lists with better performance than FlatList. It is now available in Expo SDK 46 without extra friction.

I show how to install FlashList with:

Then we pass a data array and basic styles to render an efficient list. FlashList improves apps with long lists and avoids common React Native performance pitfalls.

Practical example with components and styles in Expo 46

To demo the updates, I build a simple Skia component with animated circles and a FlashList for data. Basic styles show how to customize colors and layout.

This confirms the libraries work well on Expo 46 and that you can combine high-performance graphics and lists in one app.

Updated Expo Go user interface

Expo SDK 46 ships a faster, more modern Expo Go UI. When you open the app on a simulator or device, loading and navigation feel smoother.

That makes development and testing faster, so you can iterate on projects more quickly.

Last version supporting Expo Classic Build and the move to EAS Build

Expo SDK 46 is the last version that supports Expo Classic Build. From here, the recommendation is to migrate to EAS Build for better tooling and support.

I mention this transition and points to the official docs so you can plan migration without surprises.

Resources

CourseReact Native course

Let's connect!

Had a win? Get featured on Code with Beto.Share your story