Skip to content

v0.7.0-rc

Pre-release
Pre-release
Compare
Choose a tag to compare
@brentvatne brentvatne released this 25 Jun 20:03
v0.7.0-rc
30f739b

255 commits, 57 contributors.

After a few days of unavoidable delays, 0.7.0-rc and 0.6.0 proper have been shipped to npm! 0.6.0 proper is up on Cocoapods as well, and the 0.7 stable release will be pushed to it next week.

I want to send out a big thanks to everyone who submitted issues and pull requests this time around! Your efforts are much appreciated.

Improved Profiler

We mentioned in the v0.6.0-rc release notes that @tadeuzagallo had been working on improving the performance tooling, and now with v0.7.0-rc it's available for you to use!

The profiler integrates with Chrome Trace Viewer to give you fine-grained insight into both the JavaScript and Objective-C stacks in one place. You can also visualize VSync/frame deadlines (iOS is VSynced at 60fps) and enable "Flow events", which draws arrows to indicate function calls flowing into one another.

Install Google Trace Viewer

You will need to have trace2html in your PATH in order to use the profiler.

brew update && brew install trace2html

Using the Profiler

Command+D > Start Profiler, perform whatever actions that you would like to profile in your app, then Command+D > Stop Profiler.

profile

After a short delay the results will be opened up automatically in Chrome. Let's look at the results from the profile we recorded above.

screen shot 2015-06-22 at 19 34 51

Not very useful at this high level, but we can tell that there are a couple places where we clearly exceeded the frame deadline of 16.67ms (60fps). You probably noticed this in the gif above - clicking the button did not immediately change the background color. In this case, it was because I inserted for (var i = 0; i <= 100000000; i++) { i * i } into the onPress handler to slow it down; in practice, this could be due to an actual performance issue in your app.

screen shot 2015-06-22 at 19 39 16

Clicking on DispatchFrameUpdate reveals that it took over 500ms to calculate the frame - more than 30x what it should take. But the time spent on DispatchFrameUpdate itself (the "self time") is insignificant, so we dig deeper.

time

Everything looks good except for the function call at the very bottom - there we find that the code for responding to the touch event is responsible for egregiously missing the frame deadline. If we were to move the slow code down into the render function, we would see this instead:

screen shot 2015-06-22 at 19 47 39

We can also select "Highlight VSync" to see where VSync is occurring:

vsync

And if we select "Flow Events" we can see how functions flow into one another.

flow

Note: the simulator is unreliable for this kind of profile because the timing is not the same as on the device; you might notice the VSync values on the UI thread and JS threads are completely different in simulator profiles.

Breaking Changes

  • Removed contextual navigation from Navigator (4690983). If you use nested Navigator components, you must explicitly call navigation methods like push, pop, and replace on the parent Navigator instead of relying on the child to automatically delegate the call to its parent.
  • XHR requests will throw an error if the response is anything other than text (see #1870)
  • The packager follows Node's require resolution algorithm much more closely. When in doubt, specify the path to modules the same way you would with Node.
  • The Facebook-proprietary @providesModule directive is now scoped to each npm package instead of your entire app. This means that if you were requiring modules from another package using its @providesModule name, this will no longer work. Instead, require the modules using the package's name like you would with Node.
  • All require statements for React Native modules should go through the public interface:
// This may pull in an unexpected version of `RCTDeviceEventEmitter` and `NativeModules`
var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
var RNKeyboardEventsManager = require('NativeModules').RNKeyboardEventsManager

becomes

// This will ensure that you require the correct modules, via the react-native package
var {
  DeviceEventEmitter,
  NativeModules: {
    RNKeyboardEventsManager,
  },
} = require('react-native');

Deprecations

  • onWillFocus and onDidFocus have been deprecated in favor of adding event listeners to the navigator: this.props.navigator.addListener('willfocus', this._onWillFocus); and this.props.navigator.addListener('didfocus', this._onDidFocus);

New Features

  • Add assetRoots and projectRoots flags to the bundle CLI command to conform with packager
  • Add support for incremental updates to XMLHttpRequest (e00b9ac and UIExplorer for more details)
  • Add map type property (standard, satellite, hybrid) to MapView
  • Add getScrollResponder to ScrollView-based components, such as ListView, to allow for better composability
  • File upload via XHR FormData
  • Support textAlign: 'justify' on iOS
  • Add support for JavaScript async functions to RCT_EXPORT_METHOD (90439ce - also see @ide's blog post)
  • Documentation added for Animations, Direct Manipulation (setNativeProps), Navigator vs NavigatorIOS comparison, ActionSheetIOS, Accessibility and various other improvements.
  • Add scale support for base-64 encoded images
  • Automatically dismiss red box error screen on live reload for a better development experience
  • Packager has a new module resolution algorithm that more closely matches Node's for node_modules
  • Improved packager performance by lazily building the dependency graph asynchronously

Bug Fixes

  • Allow external libraries to define React Native modules instead of previously requiring everything to be compiled together as one library (e9095b2)
  • Text layout bug on screen rotation
  • Update curRenderedRowsCount when data source changes - fixes need to sometimes force a re-render of ListView
  • Fix AnimationExperimental for 32bit devices when fromValue is double
  • Enable textAlign for TextInput
Assets 2