Notes from upgrading to Expo 26

Expo SDK 27 has just been released and I just finished upgrading all my 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. premium React Native starter kits 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, and it turns out that using a workflow with TestFlight does yield some benefits. To submit the build to TestFlight, I used . Things were pretty straightforward. Then I built a small widget that connects to the Apple TestFlight API to send invitations automatically. Obstacle is the way the official Expo documentation on the topic 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 . Before this navigator existed, handling authentication with react-navigation was awkward. Now you can finally implement an authentication elegant authentication navigation and workflow. 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. Switch Navigator An example 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 :) with the Modal component from React Native and the solution offered from the Expo team is to use the Modal component from Expo instead. A minor regression popped up 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 . 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. 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 🎉