Skip to content

v0.8.0-rc

Pre-release
Pre-release
Compare
Choose a tag to compare
@ide ide released this 10 Jul 20:43
v0.8.0-rc
e5358b5

138 commits, 49 contributors.

0.8.0-rc and 0.7.1 proper have been published to npm and CocoaPods! This round of updates includes some very exciting enhancements from both Facebook and the React Native community. Thank you to all the contributors who submitted PRs, reviewed code, and investigated issues!

Animated

   

The newest animation API is called Animated, you can import it with var { Animated, } = require('react-native'), as you would other React Native components. @brentvatne speaking here in saying that I'm incredibly excited about this - @vjeux and @sahrens deserve a round of 👏 for their hard work over the last few months. What we see in this API is a coalescing of great ideas from the best-in-class animation libraries, such as POP and the D3 transition API, with a declarative React flavor.

  • Declarative animations: not only does this make our code easier to read and write, it allows for future optimizations such as pre-calculating keyframes in JavaScript and sending them over to be run on the main thread.
  • Performant rendering is accomplished by calling setNativeProps rather than setState to avoid re-rendering your entire component on each animation frame, and by leveraging the InteractionManager to defer expensive operations while an animation is running.
  • Interpolators take care of converting values between different units. For example, often with animations you are dealing with gestures and you will want to convert the x or y position of that gesture to some other value, such as opacity. Interpolators allow you to declaratively specify how those values map to each other. See the Interpolation section of the docs for more information.
  • Most animations that we see today can be expressed with springs (think of pulling a tree branch down and watching it bounce back to its resting state, oscillating around it before settling), decay (think of rolling a ball on grass, it starts at a high initial velocity and decelerates overtime), and timed easings (see easings.net). These are built in to Animated.

Going forward, it is recommend that you write your animations using Animated or LayoutAnimation.

Check out the Animated docs, the UIExplorer Animation Example, and this other example to learn more.

We strongly encourage you all to implement the most difficult animations that you can imagine, share the results and create any issues if you have suggestions for how to improve the API. Enjoy!

Moving to io.js

Earlier this year, a fork of Node.js called io.js made its debut and most of the development effort on Node shifted to io.js. For most intents and purposes, io.js is the modern version of Node and the two projects are planning to reconcile by using the io.js codebase and the Node.js name; when they converge, Node.js will be based on io.js's code under the hood.

And now, some projects like jsdom support only io.js, which affects their dependents like jest. So because React Native has dependencies that require io.js and to generally stay up-to-date and benefit from performance and security improvements in its V8 JavaScript engine, React Native will target io.js.

Installing/upgrading to io.js

There are several ways to upgrade to io.js:

Homebrew: brew is a great package manager for OS X. After installing brew, run:

brew unlink node        # Removes "node" from your path
brew install iojs       # Downloads the latest version of io.js
brew link iojs --force  # Tell brew that you want to run io.js when you run "node"

To stay up-to-date, run brew update && brew upgrade iojs.

nvm: nvm is an awesome tool for downloading and switching between different versions of Node and io.js. After installing nvm, run:

nvm install iojs-v2        # Downloads the latest version of io.js 2.x
nvm alias default iojs-v2  # Tells nvm to use iojs-v2 when you open a terminal

To stay up-to-date, run nvm install iojs-v2. You may want to copy over your globally installed npm packages with nvm reinstall-packages iojs-v2.x.y, where 2.x.y is the specific version of io.js you were previously using.

OS X Installer: There is an installer for OS X at https://iojs.org/en/index.html. To keep up-to-date, re-download the installer each time the io.js community publishes a new one.

Breaking Changes

  • Contributors to React Native should upgrade to io.js. React Native is now using jest 0.5.x, which runs only on io.js, so you will need to upgrade in order to run the JS tests.
  • Upgrade Flow to 0.13.1 if you are using static type checking

Known Issues

  • NavigatorIOS transitions from JS occasionally do not work #1933

Deprecations

No APIs were deprecated.

New Features

JavaScript

  • Animation API: As mentioned above, there is a new API for animating components. See the animation documentation to learn more.
  • Text decoration: The Text component supports various CSS-like decoration props: textDecorationColor, textDecorationLine, and textDecorationStyle. See UIExplorer and the documentation for the supported values.
  • Opaque nav bar: NavigatorIOS has a new prop called translucent. Set it to false to turn the nav bar opaque.
  • Scroll view composition: ListView has a new prop called renderScrollComponent. Set it to a function that takes props and returns a scroll view element. This allows you to return custom scroll views.
  • Image load events: The Image component supports three new events for downloaded images: onLoadStart, onLoadProgress, and onLoadError
  • System font: There is a special font family called "System" that tells Text components to use the system font. Apps on iOS 9 will use San Francisco instead of Helvetica Neue. In addition, the system font on iOS is configured with several typographical options like the widths of digits and vertical positioning of colons that the Apple font team has chosen.

iOS

  • Fewer UIViews: Improved rendering performance by eliding UIViews for shadow views that solely affect layout. 02db374
  • RCTResponseErrorBlock: Authors of native modules now can use RCTResponseErrorBlock(NSError *) instead of RCTResponseSenderBlock(id) to pass errors back to JavaScript.
  • NSSet coercion: Native module methods now can have parameter of type NSSet. RCTConvert will automatically convert JavaScript arrays to NSSet objects.

Packager

  • Custom transformers: You can pass --transform /a/path/to/a/transformer.js to the packager to customize how it transforms your app's JavaScript source code.
  • Faster Babel: The packager uses a faster version of babel-core for a 40% improvement in transformation 7d184ad
  • io.js and V8: io.js includes a modern version of V8, which improves the packager's performance by around 5-10%

Bug Fixes

  • Improved scene and focus management in Navigator 7963add e3e6098
  • Windows support for the packager. #893
  • Fix crash when running with Address Sanitizer with Xcode 7 #1712
  • A method previously named tick has been renamed to pass iTunes Connect validation #1722
  • InteractionManager no longer warns if the user performs a gesture for longer than two seconds 776dc97
  • Data from older scroll events is no longer dropped coalescing them #1782
  • Native ListView child frames are kept in sync with the JavaScript component 66d3f3c
  • The XHR polyfill properly lowercases response headers internally #1876
  • Fix crash when getting current thread name and include in prod traces #1833 #1868
Assets 2
Loading