Notes from upgrading to Expo 26

Expo SDK 27 has just been released and I just finished upgrading all my premium React Native starter kits to SDK 26. I started to use Expo exactly one year ago, at version 16, and as far as I can remember this has been the biggest upgrade to date.

New iOS Client

Just a few days before the release of version 26, the Expo team made a somewhat dramatic announcement: Apple won’t allow to scan QRCode anymore on iOS.

Having built a small marketplace of React Native apps, I really liked the idea that people could try the product simply by scanning a QRCode on iOS and Android. But as always, Obstacle is the way and it turns out that using a workflow with TestFlight does yield some benefits. To submit the build to TestFlight, I used the official Expo documentation on the topic. Things were pretty straightforward. Then I built a small widget that connects to the Apple TestFlight API to send invitations automatically.

While the approach is of course more cumbersome than scanning a QRCode, there are two minor advantages. The TestFlight build is a bit more performant than running the app via Expo. And by having the list of your beta testers, you can follow up with them and ask for feedback.

SwitchNavigator in React Navigation

While upgrading, I realized that react-navigation hasn’t been upgraded in a while in my apps. This is when I discovered the Switch Navigator. Before this navigator existed, handling authentication with react-navigation was awkward. Now you can finally implement an authentication elegant authentication navigation and workflow. An example if provided in the documentation. Below is how I implemented it with Firebase authentication. My apps used to maintain two navigators: a public one for when the user is unauthenticated and a private one. Now you can use a Switch navigator and handle everything in the same roof.

Authentication worflow with the Switch Navigator and Firebase

Because this used to be done with a Stack navigator before, we had to use navigation resets instead of the navigate method and other awkward navigation handling. The Switch navigator has made things much cleaner.

Expo 26

Below is an unordered list of small changes I noticed when upgrading.

As promised, the OpenGL View component is substantially faster. I use it for implementing instagram-like filters and picture editing.

Promise kept :)

A minor regression popped up with the Modal component from React Native and the solution offered from the Expo team is to use the Modal component from Expo instead.

SafeAreaView behaviour has changed a bit in this new version. I noticed a visible flickering in SafeAreaView from React Native that doesn’t happen with SafeViewArea from React Navigation. SafeAreaView from React use to not work in modal but now does and the opposite situation has happened with the component from React Navigation 🤷🏼‍♂️. So I’m still using a mix of both in my apps when necessary.

React 16.3

React 16.3 deprecates the following three lifecycle methods:

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

And introduce a new method:

• getDerivedStateFromProps

Refactoring your code to not use these deprecated method will definitely require some learning curve, luckily, the React team has publish a exhaustive list of use cases to refactor on the official React blog.

Another change from this new version of React, is a new revamped Context API. This new API is great and enables you to do in vanilla React what used to be only doable with Redux or MobX. Based on reading Medium and Twitter, everyone seems to love the new Context API.

That’s all folks

These are my notes from upgrading to Expo 26. Hopefully you will find them helpful. Please share yours and don’t hesitate to send feedback.

Happy Hacking 🎉