Expo SDK v16.0.0 is now available

Brent Vatne
Exposition
Published in
6 min readApr 20, 2017

--

Expo SDK 16.0.0 is based on the recently released React Native
0.43, “March”
. This is a jump of 1 version of React Native; Expo
SDK 15.0.0 was based off of 0.42, “February”.

This release includes a lot of improvements so I’ll just get to it.

Improvements to iOS Developer Tools in Expo

This opens the door for more improvements in the future, we’re really looking forward to it!

React 16 alpha, peerDependencies, and ecosystem compatibility

React Native 0.43 depends on React 16 alpha. Don’t let the alpha qualifier scare you too much — facebook.com is already using it. Go ahead and head over to Facebook, open up your developer console and type require('React').version to see for yourself.

One area where you might run into issues is with warnings from peerDependencies. According to npm’s Semantic Versioning, pre-releases aren’t valid peerDependencies unless they are specifically depended on. A package that has a peerDependency on react@>=15.4.0 will consider react@16.0.0-alpha.6 to not be within the acceptable version range.

Nothing we can do about this, take a deep breath, close your eyes, and go to your happy place. Yarn will be done soon and you can carry on refreshed and at peace.

While the above warnings are harmless, some libraries that reach into the internals of React to do their job might no longer work with React 16! For example, the popular testing utility Enzyme is not yet compatible with it. Keep this in mind when updating!

React Native 0.43 supports react-devtools

Read more about it in “Using react-devtools with React Native”.

Using react-devtools in a create-react-native-app project to edit text and styles live.

Robust bundle progress in XDE and exp

Building from an empty cache can take some time, it’s nice to see that it’s working.

We previously added support for this but because we depended on parsing log messages intended for human readers rather than the log events themselves directly, we often got ourselves into weird states. We added support for custom packager log reporters upstream and made sure all packager logs are reported as events, and now we’re able to provide a really solid packager logging experience for you — most noticeably with bundle progress. Perhaps other fun things in the future.

Expo SDK

BREAKING: Scoped AsyncStorage on iOS

In SDK 16 we are changing the location that AsyncStorage keeps its data on iOS. This means that you need a way to transfer the data from SDK 15’s AsyncStorage to the new SDK 16 one for a continuous user experience. We take your data seriously and don’t expect such migrations to be a common occurrence for future SDK releases.

To ease the migration we provide the LegacyAsyncStorage API. It’s a read-only interface to the old SDK 15 AsyncStorage data on the user’s system. It provides the getItem, getAllKeys and multiGet methods with the same API as the usual AsyncStorage, and doesn’t have any of the write methods. In addition, there is a utility method migrateItems which allows you to migrate old data into the new store with one method call. Just give it an array of the keys your app cares about and it will copy their values from the old to the new store:

import { LegacyAsyncStorage } from 'expo';// Before we read from or write to AsyncStorage, migrate them
// Make sure this is inside of an async function
await LegacyAsyncStorage.migrateItems([
'item1',
'item2',
'item3',
]);

If any of the items already have a value in the new store it will skip them so that it doesn’t overwrite new data. Sorry for this inconvenience!

Added SQLite with WebDatabase API

If you need to query thousands of rows of local data, it’s probably best to avoid loading all of the data entirely into the JS VM and piping it through lodash functions. SQL is pretty good at that. It’s good at a lot of things. I’m not here to sell you on SQL but just to tell you that you can now use SQLite on your Expo projects if you want to.

Check out the source of an example SQLite TODO app
Try the example in Expo
Read the API documentation

Added support for Audio Recording

Expo projects run on phones. Phones have microphones. With the latest improvements to the Expo Audio API, You can now use Expo to record audio from the microphone on your phone.

Check out the source of an example Audio Recording app
Try the example in Expo

Added DocumentPicker

This API provides access to the system UI for selecting documents from the user’s device and integrated storage providers. Try it out in Native Component List, and read the API reference.

ErrorRecovery

If your app crashes in production with a fatal JS error, Expo will restart the app for you. If the crash happens very quickly after loading, it will show a generic error screen. This module (currently iOS only) allows you to set props that will be passed into your app if it crashes with a fatal JS error in production, so you can bring the user back where they were, notify them, etc.

See this tutorial about handling errors and the ErrorRecovery API reference.

Improvements to Contacts

  • Permissions: contacts permissions have been integrated into our Permissions module: Permissions.askAsync(Permissions.CONTACTS);
  • Pagination: Apparently some people have thousands of contacts. So we added pagination in order to not freeze the app when these weirdos use your app and try to access their contacts.
let result = await Contacts.getContactsAsync({
fields: [Contacts.EMAILS, Contacts.PHONE_NUMBERS],
pageSize: CONTACT_PAGE_SIZE,
pageOffset: this.state.page * CONTACT_PAGE_SIZE,
});

See a full example of paginating contacts here.

Assorted improvements

  • Add support for onFullScreenDismissed callback on iOS.
  • Add polyfill for navigator.geolocation that delegates to Expo.Location.
  • Update react-native-lottie to 1.1.1 (latest at time of publishing).
  • Respect orientation configuration correctly on iPads.
  • Fix an issue with Universal Clipboard on iOS bothering you with alerts while using an Expo project.
  • Add options screen on the profile tab on iOS, to pick which gesture you prefer to use to open the Expo Menu.

Breaking changes in SDK v16.0.0

  • If you use AsyncStorage on iOS you need to follow the steps described under “BREAKING: Scoped AsyncStorage on iOS” earlier in this document.
  • Breaking changes in expo
    - Notifications.scheduleLocalNotificationAsync validates options more strictly. You may receive a warning if you were passing invalid arguments previously.
  • Breaking changes in react-native
    - NavigationExperimental has been removed, it now lives in react-navigation. If you used @expo/ex-navigation in your app you will need to update to 2.10.0 which now vendors NavigationExperimental.
    - Dimensions.get('screen').fontScale now returns the correct value on Android. If you use this, read more in this commit.

Upgrading your app to Expo SDK v16.0.0 from v15.0.0

  • Close XDE or your exp CLI server
  • In exp.json, change sdkVersion to "16.0.0"
  • In package.json:
    - change react-native version to "https://github.com/expo/react-native/archive/sdk-16.0.0.tar.gz"
    - change expo version to "^16.0.0"
    - change react version to "16.0.0-alpha.6"
    - change @expo/ex-navigation version to "~2.10.0" (if you use it)
    - change jest-expo version to "~0.4.0" (if you use it)
    - if you use react-navigation, follow this issue and install from master until it’s resolved
    - delete your project’s node_modules directory and run npm installagain (or use yarn, we love yarn)
  • Re-open XDE or exp and start your project once npm install from the previous step has completed.
  • Update the Expo app on your phones from the App Store / Play Store. XDE and exp will automatically update your apps in simulators.

--

--