Expo SDK v22.0.0 is now available

Brent Vatne
Exposition
Published in
6 min readOct 19, 2017

--

Expo SDK v22.0.0 is based off the recently released React Native 0.49, “September 2017”. The previous SDK release, v21.0.0, is based off 0.48, “August 2017”.

Snacks now support multiple files and assets

  • Multiple files and folders: you can now create files and folders and import them as you would in a project on your desktop.
  • Upload assets: drag and drop files into your project, then use them from your JavaScript code as usual.

Save Snacks to your profile and get a persistent URL

  • Save to profile: No need to keep your own list of Snacks anymore — when you hit save, you will be prompted to publish it to your profile.
  • Updatable at a persistent URL: If you are not authenticated, each time you save a Snack it gets a new URL. If you are authenticated, then you can save changes you make to a Snack without changing the URL.

JavaScriptCore updated on Android

  • Updated the Android version of JSC to be closer to iOS 10.3’s JSC.
  • Features like WeakMap can be used natively on Android and iOS. On Android and iOS 10+, more features like Proxies are supported.
  • This is not included with ExpoKit for SDK 22. If you might detach, we recommend you stick with ES5 and syntax that Babel compiles.

Drop SDK 15, will drop SDK 16 next month

We routinely drop SDK versions that have low usage in order to reduce the amount of versions that we need to support. This release sees the end of life of SDK 15. As usual, your standalone apps built with SDK 15 will continue to work, however SDK 15 apps will no longer work within the latest version of the Expo client and if you need to re-build your standalone app then you will need to upgrade from SDK 15.

ARKit support

In case you missed it, soon after the release of SDK 21 we did a minor release to add support for ARKit on iOS11. If you use iOS 11 and want to play with it, check out this Snack, this cute duck demo and read this article.

API improvements and additions

Splash screen API launches

On the right we see the new splash API in action in a standalone app — notice that the image appears immediately (1) when the app is opened. The examples on the left are inside of the Expo client. With the arrival of this API, the loading API is now deprecated. We strongly advise anybody deploying standalone applications to update to use this new API for a superior user experience.

(1) At the time of writing, there is still a slight delay before the splash image appears in Android standalone apps. We expect this to be fixed shortly and will keep you updated.

Read the guide and update your apps now!

WebBrowser.openAuthSessionAsync

Adds support for iOS 11 API SFAuthenticationSession. Used by default by AuthSession. If SFAuthenticationSession isn’t available (iOS < 11, Android), WebBrowser.openAuthSessionAsync provides the same flow but without an alert dialog prompting the user to authenticate.

DeviceMotion

The DeviceMotion API provides an easy way to access data from various sensors, for common use cases. It is very similar to the devicemotion Web API and the iOS CMDeviceMotion class.

Access the device motion and orientation sensors. All data is presented in terms of three axes that run through a device. According to portrait orientation: X runs from left to right, Y from bottom to top and Z perpendicularly through the screen from back to front.

Read the documentation

Library updates

The following libraries were updated to the latest published versions as of October 13, 2017.

  • react-native-maps: 0.17.0
  • react-native-gesture-handler: 1.0.0-alpha.28
  • react-native-svg: 5.4.2
  • lottie-react-native: 2.2.7

Of note, the react-native-gesture-handler release includes a Swipeable component that you can use to build performant and smooth swipeable rows, as gif'd below.

Source for this example.

Other fixes & improvements

  • AuthSession now compensates for inconsistency on Android standalone, where Constants.linkingUrl does not end with the + character. In the future, we will make Constants.linkingUrl consistent across all platforms and environments.
  • Various Camera improvements
    - The quality option for photos and videos now works as expected #735
    - Added an Orientation tag to photo EXIF data
    - Fixed an issue with front camera on iOS #1207
  • A couple of FileSystem changes
    - Add custom headers to options on FileSystem.downloadResumable.
    - Fix regression in FileSystem.downloadResumable.downloadAsync(). (Commit).

XDE/exp Developer tools

  • Improve tunnel (ngrok) error handling: before displaying a tunnel URL in XDE/exp, check that it actually works. If it doesn’t, fall back to a LAN URL. This fixes an issue where users start a project and are present with a tunnel URL which does not work. (Commit).
  • Fix small issue in exp where we print the project URL twice when the project starts (Commit).

Breaking Changes

  • Metro Bundler (the React Native packager) now errors (instead of silently ignoring) dynamic requires. In particular this breaks an older version of moment.js if you were using that (or indirectly depending on it).
    - This is a known issue with Metro which is being tracked on the proejct’s Github issues.
    - If you use moment.js in your app, you may have success with this fix.
  • Several deprecated APIs have been removed. All of these APIs printed warning messages in previous releases:
    - Expo.Notifications.getExponentPushToken is now Expo.Notifications.getExpoPushToken.
    - Expo.AdMob.AdMobInterstitials.tryShowNewInterstitial has been removed in favor of requestAd and showAd.
    - Expo.Segment.initializeAndroid and initializeIOS have been removed in favor of Expo.Segment.initialize.
    - The tintEffect prop of Expo.BlurView has been removed in favor of the tint prop.
    - Expo.SecureStore.setValueWithKeyAsync, getValueWithKeyAsync, and deleteValueWithKeyAsync are now setItemAsync, getItemAsync, and deleteItemAsync. The order of arguments to setValueWithKeyAsync changed from (value, key) to (key, value).
    - The callback prop of Expo.Video and Expo.Audio is now onPlaybackStatusUpdate.
  • This is not a breaking change yet but we plan to remove LegacyAsyncStorage in SDK 24.
  • If you, or any libraries that you use. use View.propTypes.style you will need to change that to ViewPropTypes.style. You will only see errors for this in productionso be sure to test your app with development mode disabled.
  • If you have not yet updated your imports of PropTypes as warned in deprecation warnings in previous releases, you will need to do this now. Install the prop-types package and import PropTypes from 'prop-types'; instead of import { PropTypes } from React;!
  • Similarly, if you depend on React.createClass, you will need to install the create-react-class package and import createReactClass from 'create-react-class'; as described in the React documentation.

Upgrading Your App

Here’s how to upgrade your app to Expo SDK 22.0.0 from 21.0.0:

  • Close XDE or your exp CLI server
  • In app.json, change sdkVersion to "22.0.0"
  • In package.json, change these dependencies:
    - react-native to "https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz"
    - expo to "^22.0.0"
    - react to "16.0.0-beta.5" (the next SDK will use “16.0.0”, finally!)
    - jest-expo to "^22.0.0" (if you use it)
    - sentry-expo did not change from SDK 21("~1.6.0")
  • Delete your project’s node_modules directory and run npm installagain (or use yarn, we love yarn)
  • Reopen your project in XDE and press “Restart” to clear the packager cache, or run exp start -c if you use use exp.
  • Update the Expo app on your phones from the App Store / Play Store. XDE and exp will automatically update your apps in simulators.
  • If you use ExpoKit: In addition to the normal ExpoKit upgrade instructions, please change the Yoga pod dependency from Yoga to yoga (lowercase y). If your pods are under version control you may need to delete them, commit, and reinstall, since some systems (e.g. macOS) don’t distinguish capitalization in file paths.
  • Make sure to check the breaking changes section of this post!

--

--