Exponent SDK v10.0.0 is now available

SDK 10 actually came out a few days ago and these release notes are a bit tardy, but there’s some good new stuff to tell you about so here’s the writeup!

React Native 0.33.0

Exponent SDK 10.0.0 is based on the recently released React Native 0.33.0. You may also want to check out the release notes from React Native 0.32.0 as well if you are upgrading from Exponent SDK 9.0.0, since that is based on React Native 0.31.0. There aren’t many major API changes since SDK 9, but there are a number of bugs fixes and a few features added.

Animated.event offloading with onScroll

Janic Duplessis recently built support for running Animated.event-based animations on the main thread (also known in the React Native community as offloading the animation to the main thread). What this means for you is that you can wire up your animated values to be updated from the ScrollView onScroll event and have the animations update in the same frame that the scroll occurs, rather than having to do a roundtrip from native to JavaScript and back just to update the value each time a scroll event fires.

This has two important benefits: 1) there is no delay between the scroll event firing and your animations updating 2) you can now use scroll-driven animations without worrying about the JavaScript thread occasionally blocking (eg: with ListView where you page in new rows while scrolling).

Examples of using Animated.event offloading to re-create some popular UI patterns. Source for first and second examples can be found here: https://github.com/brentvatne/animations-showcase. Source for third example can be found here: https://github.com/brentvatne/growler-prowler. You can try the apps out at https://getexponent.com/@community/animations-showcase and https://getexponent.com/@community/growler-prowler

Tools

XDE features added

You can now clear your logs in XDE by clicking the X in the bottom right of each logging pane. You can also show and hide panes.

Buttons are in the bottom right corner of XDE

Multiple project templates

We now offer multiple project templates to choose from when you are starting a new project.

Tab Navigation is the previous default

We now offer a totally blank project that just includes an empty view. We still recommend using the Tab Navigation project (previously the default) if you are just getting started and don’t know exactly what you are doing. It’s easy to remove things from it when you are starting from a point where everything works.

exp convert

We now offer a command line tool to convert a vanilla React Native project to an Exponent project since this is something people ask us about a lot. You can run it by doing

npm install -g exp

and then running either exp convert or exp onentize (get it? cute, huh?) from the command line inside the root directory (where your package.json is) of the project you want to convert.

Exponent SDK

fontFamily works as expected now, without Font.style

In previous Exponent SDKs, you had to use an Exponent specific way of referencing fonts that you’d downloaded over the air. That method of referencing fonts still works, but we’ve added a more intuitive way to do things that is more compatible with vanilla React Native. Here is a code snippet from the Tab Navigation template app that shows how to use fonts:

To load the font:

async _loadAssetsAsync() {
  // It's best to preload the fonts before rendering
  // your app, using Exponent.Components.AppLoading
  await Exponent.Font.loadAsync({
    'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf')
  });
  // Do something to tell your app it's OK to render now
}

and then to use it:

render() {
  return (
    <Text style={{fontFamily: 'space-mono'}}>Hello world</Text>
  );
}

Exponent.takeSnapshotAsync

It’s often useful to be able to take a snapshot of a view and it’s children — for example, if you create a component for drawing signatures, you can snapshot the signature view and upload the image to your server, or if you’re doing a shared element transition, you can snapshot the view you’re transitioning. We imported https://github.com/gre/react-native-view-shot into Exponent and exposed it in the exponent package under Exponent.takeSnapshotAsync. Check out our fork of ReactNativeKatas for a usage example: https://github.com/exponentjs/ReactNativeKatas/blob/master/src/runner/snapshot.js#L6-L26

Exponent.Components.Maps

We imported http://github.com/airbnb/react-native-maps and exposed it in the exponent package under Exponent.Components.MapView. This is the de-facto standard maps library for React Native, it has plenty of features and a very pleasant API, but it isn’t included in the core in order to keep React Native core focused. Great work Leland Richardson and spikebrehm!

Amplitude

We use Amplitude Analytics to gather data about how people use Exponent and XDE and it works great for us, so we made it easy for you to use it in your apps as well. Check out the the API reference.

Segment

Segment is another popular tool used for gathering analytics, you can use it to feed your data into Amplitude or other services. Check out the API reference.

New appOwnership constant

Constants.appOwnership will return either “exponent”, “standalone”, or “guest”. See the API reference.

Move babel plugins to the exponent package

You can now remove babel-plugin-transform-decorators-legacy and babel-preset-react-native-stage-0(example diff) from your package.json, they will be installed through the exponent package instead.

New recommended way to “register” your app

Rather than AppRegistry.registerComponent(‘main’, () => App), you can now do Exponent.registerRootComponent(App). We recommend switching to this as we may in the future use this for purposes beyond simply removing boilerplate of specifying ‘main’. We will remind you again when we do this.

Breaking changes in SDK v10.0.0

• No breaking changes in the exponent package
• No breaking changes in react-native 0.32 & 0.33 that will impact Exponent users.
• @exponent/ex-navigation SlidingTabNavigation now requires renderLabel to be passed into SlidingTabNavigation instead of SlidingTabNavigationItem. See an example. See the diff. (version 1.6.0 and higher).

Upgrading your app to Exponent SDK v10.0.0

• Close XDE or your exp CLI server
• In package.json:
  - change react-native version to “github:exponentjs/react-native#sdk-10.1.2”
  - change react version to “15.3.2”
  - change exponent version to “^10.0.0”
  - change @exponent/ex-navigation version to “1.6.0” (if you use it)
  - delete your project’s node_modules directory and run npm install again.
• In exp.json:
  - change sdkVersion to “10.0.0”
• Update XDE (you should be automatically prompted in the app) and/or exp CLI.
• Open up XDE or exp and start up your project, once npm install from the previous step has completed.
• Update the Exponent app on your phones from the App Store / Play Store and, when prompted by XDE, update the app on your Simulator/Emulator.
• Pass over the list of Breaking Changes above to see if your app is impacted, and fix them if so.