Exponent SDK v14.0.0 is now available

Brent Vatne
Exposition
Published in
8 min readFeb 15, 2017

--

Exponent SDK 14.0.0 is based on the recently released React Native
0.41.0, “January”
. This is a jump of 1 version of React Native; Exponent
SDK 13.0.0 was based off of 0.40.0, “December”.

This is a big release but upgrading should be easy because there are no breaking changes.

New Exponent Home UI

Along with our previous release, SDK v13.0.0, we rolled out our improved user account system in XDE and exp, and this time we’ve integrated it into the Exponent client, or “Exponent home”. You can browse all of your published projects, search other publicly published projects, and browse other user’s profiles.

Your privacy is very important to us, which is why all projects that are published with the "privacy": "unlisted" or without any privacy configuration at all will not show up in search results and will only be visible to you in your profile. If you’re unsure about the status of your project, check exp.json. You can republish your project at any time with the privacy setting that you choose and it will be respected. We encourage you to go back and republish any experiences that you published over the last year that you intended on being public so that they are indexable! Read more information in “Publishing on Exponent”.

This is just the beginning for Exponent home. You’ll gradually see new features roll out from now until (optimistically) the end of time.

XDE Notification Center

XDE shows you notifications when your project fails validations (perhaps due to a missing exp.json field or an invalid npm package version), when it does something helpful for you (like automatically running adb reverse so you can access localhost from your connected Android device), and generally to try to help you out wherever that can be automated. Previously these notifications appeared mixed in with the React Native Packager logs and so they were easy to lose track of. XDE now shows a badge for errors and warnings, and has a dedicated buffer for notification messages.

This is an error notification looks like with the XDE Notification Center.

Big changes to exp: read this if you use it

exp will now run faster and more reliably for most projects by foregrounding the packager process and logs. This has several important consequences for users (especially those using exp in CI or other automation):

  • exp start will run in the foreground, and won’t yield control of the terminal unless it is exited or backgrounded. On most terminals, pressing Ctrl+C will exit exp. To background exp you can use a terminal multiplexer like tmux or invoke it as exp start & in bash. Reference your terminal’s documentation (and probably Stack Overflow!) for invocations that match your exact needs.
  • exp stop, exp status, and exp logs have been removed. Since logs are displayed in the foreground, most previous uses of exp logs should now be unnecessary. If you need to read the logs of an exp process that’s been backgrounded, you may want run exp with redirected logs that you can stream from a file later. For example you might run exp start > exp.log 2>&1 & to background exp and send logs to exp.log, followed by running tail -f exp.log later on to stream the logs (again, Stack Overflow is helpful here — it’s how we got this example).
  • exp publish, exp build:android, and exp build:ios no longer require having run exp start beforehand, and will start their own packager instance on demand if they’re not able to find a live exp process.

Pass through transform progress logs from React Native packager

When you start an Exponent project from a cold cache it can take 30 seconds or more to build up the module cache. This is because the React Native packager will transform your entire node_modules directory, which has hundreds of JavaScript files (as an aside, this isn’t likely to be the case forever — in order to speed this up in the future React Native may be transformed by Babel before being distributed on npm, and community libraries will be encouraged to do the same).

Somehow the wait feels shorter when you get some feedback to indicate that progress is being made, so started threading through the progress bar from the React Native packager to XDE and exp.

This is what it looks like in XDE. You don’t get a fancy progress bar in exp yet ;) You might notice the progress bar appearing multiple times on occasion — we just wanted to get this out to you as soon as we could, we’ll polish it further for our next release.

Exponent SDK

WebBrowser module to facilitate OAuth flows

This is probably my favorite feature of SDK14 — it’s now extremely easy to integrate OAuth for any provider into your app. On iOS the WebBrowser module uses a SFSafariViewController and on Android it uses Chrome Custom Tabs, in accordance with the OAuth 2.0 for Native Apps “Best Practices”. On iOS8 where this is not supported, we fallback to opening a full browser rather than a modal browser. Try it out with Exponent.

An example of authenticating to Twitter, using Auth0 and the WebBrowser module. See the code here: https://github.com/AppAndFlow/exponent-auth0-example — if you prefer to just use Twitter OAuth directly, without going through Auth0, see this example: https://github.com/AppAndFlow/exponent-twitter-login-example.

Add Airbnb’s “Lottie” animation library

The folks at Airbnb have been doing great work with React Native, and their latest release is no exception. Lottie is a “new open-source tool makes adding animation to native apps a snap.” It “renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets.”

Animations inside of a native app, exported from Adobe After Effects and displayed using Lottie.

Lottie is a very new project and its API is likely to change. These changes could potentially break your projects retroactively when a new Exponent client is released, so if you are going to use Lottie in your Exponent project we recommend keeping it up to date. To make it very clear that this might happen, we exported Lottie under Exponent.DangerZone.Lottie. (Why DangerZone?). You can try it out in Native Component List and view the source for that example (which we borrowed from react-native-lottie’s example project).

Add KeepAwake module

Sometimes it’s useful to keep your user’s screen awake for them —a slightly contrived but contextually relevant example is if you wanted to play a very long Lottie animation and not have the screen turn off in the middle.
See the API documentation.

Add Audio playback module

The first iteration of a much requested Audio playback module has shipped! It supports streaming playback or playback from downloaded files. Don’t forget to add the filetype (eg: mp3) to the assetExts list in exp.json before trying to require the asset. Documentation is coming soon, for now you can read the source for a music playlist example app and try it out at https://getexponent.com/@exponent/playlist.

New Notifications features

  • The Exponent server API now supports better error handling, networking-level performance improvements, and new features for push notifications such as iOS badge numbers and larger push notification payloads. To use the new API, use our Node SDK or Python SDK (authored by William Li, who is using Exponent for his startup!). We will update our Ruby SDK soon too. Please see the Node SDK release notes and the underlying HTTP/2 API for more details.
  • iOS apps often display a notification count in a red badge on their home screen icons. We’ve added some methods to access the badge number: Notifications.getBadgeNumberAsync() and Notifications.setBadgeNumberAsync(). Make sure the user has granted your app permission to display badges first. These methods are no-ops on Android. (Read more)

ExponentKit improvements on iOS

  • Add isManifestVerificationBypassed to iOS ExponentKit projects. To opt-in to verifying JS bundles in your ExponentKit project, remove this key. (Read more).
  • Switch to custom pod install script to clear packager conflicts — this fixes an issue that some ExponentKit users had where the packager would have a module resolution conflict between node_modules and the Pods directory until running the build in Xcode.

Continue progress on EXGL

  • Can specify multisampling resolution on iOS with msaaSamples prop.
  • Make GLView look smoother on iOS with antialiasing.
  • Support gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
  • Implement gl.isFramebuffer(…) , gl.isRenderbuffer(…), gl.isTexture(…), gl.isProgram(…), gl.isShader(…), gl.getSupportedExtensions().

New guide in documentation for using Graphcool with Exponent

Graphcool is a hosted GraphQL backend that is flexible and incredibly easy to get started with. Check out the guide.

Edit — added on Feb 22: Google Maps on iOS

We had a handful of requests for Google Maps support on iOS, it is now available thanks to react-native-maps!

No updates to react-native-svg or react-native-maps

  • We attempted to update react-native-svg to the latest version but it appeared to be unstable so we backed out to give it time to stabilize.

Breaking changes in SDK v14.0.0

  • No breaking changes the exponent package.
  • No known breaking changes in react-native.
  • Changes to exp may impact your CI process.

Known regressions in SDK v14.0.0

  • Edit — Fixed Feb 22: Accelerometer and Gyroscope on iOS don’t update values, we will release an iOS client update within one week to fix this problem.

Upgrading your app to Exponent SDK v14.0.0 from v13.0.0

  • Close XDE or your exp CLI server
  • In exp.json, change sdkVersion to "14.0.0"
  • In package.json:
    - change react-native version to "https://github.com/exponent/react-native/archive/sdk-14.0.0.tar.gz"
    - change react version to "~15.4.0"
    - change exponent version to "^14.0.0"
    - delete your project’s node_modules directory and run npm installagain.
  • Re-open XDE or exp and start your project once npm install from the previous step has completed.
  • Update the Exponent app on your phones from the App Store / Play Store. XDE and exp will automatically update your apps in simulators.

What to look out for in the next release

SDK v15.0.0 will drop support for iOS 8

Less than 1% of Exponent users currently use an iOS device with iOS8 installed. Twitter is one of the biggest apps that has already dropped iOS8 support and it won’t be long before others follow.

In addition to dropping support for iOS8 we will be removing Exponent SDK v7.0.0 and v8.0.0 from the client, which should not impact anybody because the usage of these old versions is close to zero.

--

--