v0.13.0-rc

261 commits, 73 contributors.

0.13.0-rc has been published to npm, JCenter, and CocoaPods.

The 0.13 release includes preliminary support for installing react-native with npm 3 and running the packager on Windows. Please understand they might not work as well as they do with npm 2 on Mac yet, since this is the first release that supports them.

A note about Windows as a dev environment: As RN iOS requires a Mac and most of the programmers at Facebook and the RN developers use Macs, support for OS X is a top priority. However, we would like to support developers using Linux and Windows too. We believe we'll get the best Windows support from people using Windows on a daily basis. So to begin with, Windows support for the development environment is an ongoing community responsibility. This can mean filing issues and submitting PRs, and we'll help review and merge them. We are looking forward to your contributions and appreciate your patience.

Breaking Changes

• setImmediate batching: React updates (e.g. setState) scheduled with setImmediate are now batched. Most apps will notice only a performance improvement, but it may reveal bugs in code that was relying on the precise timing semantics of React during setImmediate processing. 4c74f01
• Node 4.0: This is not a new requirement but we have made it more visible: #2547 #3296
• ScrollView's keyboardShouldPersistTaps defaults to false: 166a96b
• Warn when style props are not under style: make sure properties like width or backgroundColor are specified in the style prop. 2ea3b93
• Flow 0.17: Flow has been upgraded. 49a0ae7
• Removed RCTCache on iOS: 63a37be
• Remove header_mappings_dir from Podspec so that all header files are flattened when installing with CocoaPods. This improves compatibility with react-native-fbsdk, for example: #3248

Known Issues

• React Dev Tools do not work: facebook/react-devtools#229
• Packager does not support symlinks: Symlinks under node_modules, for example, are ignored (#637)
• 3D touch breaks the gesture system due to an iOS 9.0 bug: #3082
• WebSockets on Android can fatal when closing: #3347
• Other known issues

New Features

JavaScript

• const is enabled by default: #2955
• import is enabled by default: #3175
• Number.EPSILON/MIN_SAFE_INTEGER/MAX_SAFE_INTEGER are polyfilled: de717a8
• Animate to hex and named colors: instead of rgba syntax you now can use hex or names like "black" in Animated output ranges. #3177
• processColor is faster: babdeb3
• New Switch component that wraps iOS and Android's switch components: 36cbe74
• Preserve original globals before polyfilling them: If the JS environment supports a global property like fetch, it will still be polyfilled but the original implementation will be saved as originalFetch. This lets you do things like assign global.fetch = originalFetch if you want to use Chrome's built-in fetch when debugging in Chrome. #3293
• Export the different Navigator navigation styling for iOS and Android and a new navigationStyles prop: #3028

iOS

• Pause JS runloop: Pause the CADisplayLink when there are no JS tasks to process to conserve energy. e727fc8
• Use bundleForClass instead of mainBundle when looking up resources: 9076b71
• Disable RCTAssert completely in production builds: 6ca8f48
• Inline Images: Image components can be children of Text components. Note that all properties of the image except its source are ignored. 91e6c98
• Optimize loading local JS bundles from the filesystem: 7fe7a2a

Android

• Autoplay GIFs: Fixed #2997
• Enable background initialization of ReactApplicationContext: dcae4ba
• Remote images in ToolbarAndroid: 5ca5ec7
• borderWidth and borderColor on Images: 2cc8acf
• New ViewPagerAndroid component that provides paginated scrolling. Check out the example in the UIExplorer to see how it works and how to use it. 0a41965
• New WebSocket support on Android with an API similar to the iOS version: #2839
• Add a ProGuard config: a7b23df

Packager

• Reject module collisions: If you are using the Facebook-proprietary @providesModule pragma, the packager will now explicitly reject collisions: 9293e54 502d277

Other

• Refactored React Native attribute reconcilation: 6c5024e 8e3ce0f ac5b754
• Use platform-independent dir separator in Android build file: #2961
• CLI has --verbose flag to debug slow project initialization. You will need to update your global npm package for react-native-cli to get this feature. #3193
• Packager server is more modular and split into several middleware. This doesn't affect users of RN but should make it a little nicer for contributors. 35f9ac8 f37ad56 f980c33 22e88f2 0a835b7 42d7563
• Lots of documentation updates. A thank you to the contributors!

Bug Fixes

• End iOS Slider interaction when touches are cancelled: 8f13560
• Clear images only if they have been removed from the view hierarchy: previously images were removed even if they were moved within the view hierarchy. a4ef7ab
• Multiline JS import statements are now parsed: #1939
• JS WebSockets implement EventTarget: #2599
• Preserve Android React instance when handling exceptions: 3dcc234
• Set scrollsToTop = NO for RCTTextInput placeholders: #3129
• Cancel pending timeouts when Touchable components are unmounted: #1152
• Support npm packages that require package.json: #2949
• Better error message when loading non-existent image URIs on iOS: #3127
• Check if Android React instance is destroyed when adding profiling option to dev menu: 787895e
• Make sure ListView call onEndReached even when there are very few rows: b0bdd4e
• Protect against Android SQLLiteFullExceptions for AsyncStorage: ea8d0b6
• Fix touches when the Android keyboard is visible: c805157
• Fix crash due to thread-unsafe race condition on iOS when reloading: cb8b656...

v0.12.0

List of 418 commits by 79 contributors: 0.11-stable...0.12-stable

v0.11.0

This release includes the initial version of React Native for Android. The official site and docs have been updated with information about the Android version.

Contributors: Moving forward, please include iOS and Android changes in PRs that affect both platforms.

0.11 also includes support for Node 4.0, which was recently released after the Node.js and io.js projects converged. We recommend using nvm to install the latest version of Node. Older versions of Node are not supported.

See the 0.11.0-rc notes for a more detailed change log: https://github.com/facebook/react-native/releases/tag/v0.11.0-rc.

v0.11.0-rc

165 commits, 37 contributors.

0.11.0-rc has been published to npm and CocoaPods.

Breaking Changes

• Rename RCTReachability to RCTNetInfo: for consistency with Android. The device event that is triggered has also been renamed from reachabilityDidChange to networkDidChange.
• Internal functions on Animated marked as protected: if you use attach, detach, getAnimatedValue, addChild, removeChild, or getChildren on your Animated components, you will need to update the code to be compatible. This change is in preparation for future optimizations. 059e605
• RCTRootView's initializer changed: Call the new initializer method, which takes a new initialProperties argument. Use nil if you have no initial properties to pass to the root React component.

Known Issues

• Packager does not support symlinks: Symlinks under node_modules, for example, are ignored (#637)
• ScrollView sometimes errs with "Cannot find view with tag #XXX": #1941
• Numbers in bridged method names crash at launch: #2469

New Features

• Add support for transparent modal backgrounds: toggle this by using the new transparent prop of Modal.
• Add support for HSL/HSLA colors
• Built-in support for handling Keyboard events: you can now add listeners to DeviceEventEmitter for keyboardWillShow, keyboardDidShow, keyboardWillHide, keyboardDidHide, keyboardWillChangeFrame and keyboardDidChangeFrame. (9aefd6b)
• Built-in support for handling status bar change events: you can now add listeners to DeviceEventEmitter for statusBarFrameDidChange and statusBarFrameWillChange events (eg: if you receive a phonecall, the status bar becomes taller - this allows you to respond accordingly).
• Touchable handlers now receive event objects: onPressIn etc - these event objects were already initialized so it was just a matter of threading them through.

JavaScript

• Use GLOBAL.process instead of overwriting: respect any existing process value hanging off of the global object, and only set the env property of it. a4e6419

iOS

• Pass props when creating a view with RCTViewManager: native module authors will understand that previously it was awkward to set initial properties on a view because props were not available in init and there was no guaranteed order that they would be set in. RCTViewManager classes can now implement viewWithProps:props to better control this.
• CameraRoll Image Orientation fix: use ALAssetOrientationUp for consistent, predictable orientation.
• Implemented lazy parsing of method signatures to improve TTI (Time
  to Interact): a5e9f83
• Post to NSNotificationCenter when root views are added or removed: notifications are named RCTUIManagerDidRegisterRootViewNotification and RCTUIManagerDidRemoveRootViewNotification
• Modernized Objective C syntax: 88e0bbc

Packager

• Started adding support for System.import (in progress): this is the first step to add support for being able to split JS into multiple bundles. More details: cfcf604
• Transformer now shows progress bar: The transform step in currently the longest one in the bundling process. This adds a progress bar to track the transform progress. eb248e0
• More detail on fs log messages: ever wonder why there were two fs event steps in the packager log? f3a165d

Other

• RCTProfile API now compatible with systrace: 81fdf3e

Bug Fixes

• Fix TabBarItemIOS image scale: TabBarItemIOS supports setting the scale for base64-encoded images using an optional scale parameter, however this was broken due to the JS code only passing the uri, not the whole source object, to the native side.
• RedBox now rotates properly: 4382c0e

v0.10.0

react-native 0.10.0 has been published to npm and CocoaPods. Fixes from 0.10-rc include:

• A bug in css-layout that would cause 100% CPU usage with a specific combination of flex properties has been fixed
• Removing native event listeners during reconcilation has been fixed
• The podspec has been fixed to allow you to use both the RCTImage and RCTNetwork subspecs
• Multiline TextInput components keep their text and cursor within their bounds
• ReactART has been fixed
• The shouldRasterizeIOS prop has been fixed to use the screen scale for crisper rendering

v0.10.0-rc

120 commits, 42 contributors.

0.10.0-rc has been published to npm and CocoaPods.

Breaking Changes

• NSNumber parameters must be marked nonnull: Native bridge methods that take NSNumber values must annotate them using the Objective-C nonnull keyword
• AnimationExperimental has been removed: Use the JS Animated API or react-motion instead
• customDirectEventTypes should return an array rather than a dictionary: see 48af214 for details if you depend on this in any of your native component libraries
• RCTViewNodeProtocol is now RCTComponent: this was done as part of a refactoring of RCTUIManager, similar to above, see deba13f for details if you depend on RCTViewNodeProtocol in any of your native component libraries

Known Issues

• flexWrap: 'wrap' and flexDirection: 'row' can consume 100% CPU: you may see very high CPU usage and a blank screen with the combination of these styles (#1378)
• Packager does not support symlinks: Symlinks under node_modules, for example, are ignored (#637)
• ScrollView sometimes errs with "Cannot find view with tag #XXX": #1941

New Features

JavaScript

• Modal: A new Modal component that renders its children above the UIViewController that contains your React view. See the UIExplorer for an example.
• ImageEditingManager: A new module for manipulating images saved to disk. You can crop, translate, and scale images. See the UIExplorer for an example.
• rebound has been removed: The rebound module, which was internally used by Animated, has been removed to save bytes
• ES2016 async/await: The async and await keywords have been enabled by default in the packager
• Configurable JS context name: When using the regular JS runtime (not the Chrome debugger or web view), you can set its name with NativeModules.ContextExecutor.setContextName (iOS 8+ only). This name will show up in Safari's debug menu.
• process.env.NODE_ENV: This value is defined to be "production" or "development" based on your current environment. Now you can use npm packages that rely on NODE_ENV!

iOS

• Configurable bundleURL: Setting the bundleURL property on the bridge and reloading the bridge will use the new bundle URL
• Development status bar: In development mode, a status bar at the top tells you where the JS bundle is being loaded from:
  
• RCTBridgeDelegate: The bridge has a delegate for configuring the bundle URL
• Remove rendered RCTText contents from clipped views: Clipped ListView rows, for example, use less memory when they are off-screen
• RCTBridge startup is parallelized: Native modules are initialized while the bundle source is loaded from your packager or the disk
• Faster conversion of JS strings to NSURL objects: Replaced some regex checks in +[RCTConvert NSURL:] with a simpler substring check

Packager

• Upgrade Babel and regenerator, and fix spurious log messages about "es6.parameters"

Other

• Flow 0.14.0: Support for Flow 0.14.0 has been added
• jest 0.5.0: Jest 0.5.0 with io.js 2+ support has been upgraded to the final release

Bug Fixes

• Support bridged methods that have unnamed parameters, like - (void)method:(int)a :(int)b (b812b0e)
• Fixed ResponderEventPlugin (e0ea046)
• Guard against popping past the first route in a Navigator (809a2dc)
• Fix issue with border width precedence (f2b3057)
• Maintain the height of inactive Navigator scenes so that the scroll state is unmodified (41dd6fe)
• Fixed null argument errors for timers and layout animations (95d1fd1)
• Fixed retain cycle that caused RCTModuleMethods to leak (6a4b83c)
• Sticky headers in ListViews now receive touches. This was a long-standing bug and a fellow community member stepped up and contributed a fix. Thank you @MattFoley! (#2224)
• Delay sending touches to JS until dependent (native) gesture recognizers fail (2d66e10)
• Fixed defaultSource for Image components (#2269)
• Fixed waring about "invalid context 0x0" when rendering an image of with dimensions of zero area (#2278)
• Fix crash when using alert() polyfill due to null callback (4d81724)

0.9.0-rc

171 commits, 55 contributors.

0.9.0-rc has been published to npm and CocoaPods! There was a short delay for this RC because we wanted to include several breaking changes to Touchable components all at once.

Breaking Changes

• TouchableX components introduce their own wrapper View: Components like TouchableOpacity and TouchableBounce now use the Animated library to smoothly fade and bounce when touched. A consequence of this is that now we are introducing another View into the hierarchy, because we need to wrap the children in an Animated.View. See the full details and upgrade path here.

We wrote a codemod for fixing many (not all) of the call sites automatically. You can upgrade your code by running the following:

git clone https://github.com/cpojer/js-codemod.git
cd js-codemod/
node_modules/.bin/jscodeshift -t transforms/touchable.js <the folder where your js is>

• TextInput is now a controlled component: The controlled prop has been removed and TextInput now acts as a controlled component by default. Remove the controlled prop if you were previously using it. (961c1eb). If you were previously using value to set an initial value, now use the initialValue prop instead.

Known Issues

• Sticky headers do not receive touches: Sticky headers in ListViews don't receive touch events
• Packager does not support symlinks: Symlinks under node_modules for example are ignored
• ScrollView sometimes errs with "Cannot find view with tag #XXX": #1941

Deprecations

• Navigator's onItemRef prop was removed: Use a callback ref directly on the component you return from renderScene instead (4f904b5)

New Features

JavaScript

• TextInput improvements: TextInput is more reliable and does not drop characters when typing quickly. It also now supports the maxLength prop. (961c1eb)
  
• Horizontal ListView: ListViews now check the horizontal prop and calculate layout accordingly (09236cc)
• Add VerticalUpSwipeJump and VerticalDownSwipeJump to NavigatorSceneConfigs: Check out a demo of it here. (#1822)
• Text with onPress handlers get highlight: Highlight is the WebKit grey rounded corner background.
  
• Examples for Image download events in UIExplorer: Check them out here: 74f8055
• New style properties: perspective, rotateX, rotateY and rotateZ are now available, and a demo of them is available under the Transform example in UIExplorer.
  
• Add support for files in application home directory: Works as you would expect, application home directory can be referenced with the ~/ prefix. (90dd7a1)
• Add preventDefault to Navigator events: Gives you more control over your routing (326a66b).
• tintColor for remote Images: d5943b0
• Translucent tab bar: Bringing the TabBarIOS api in line with NavigatorIOS, it now supports the translucent prop. (9936a24)
• Local notification API: PushNotificationIOS now exposes presentLocalNotification and scheduleLocalNotification functions. (a8cb47e)
• NavigationIOS shadow can be hidden: NavigatorIOS has a new prop called shadowHidden that allows you to hide the hairline shadow (2cb634b)

iOS

• Add support for gzip of request body: Decoding of response bodies is enabled by default on iOS, this feature will automatically gzip your request body when you to specify the Content-Encoding:gzip header with XMLHttpRequest
• Use JSONKit if available: If you include JSONKit in your project it will be used by default, which can give a small performance boost in some cases
• Improvements under the hood to camera roll Images: "Ported over logic where assets are loaded at the optimal size and reloaded if the view size changes" (b34a85f)

Packager

• More descriptive error messages when a path can't be found: Rather than "Path must be a string. Received null" you will now see "Could not find source file at ..." (70feab9)
• Chrome debugger automatically reconnects to packager: If the packager is restarted during a Chrome debugging session, the Chrome debugger will automatically reconnect to the packager (fa4c570)

Other

• The jestSupport folder is published to npm: Provides support files for jest testing

Bug Fixes

• "RCTImageDownloader was ignoring server response codes. When receiving a response other than 200 it would treat this as success, meaning the image would never load, nor report failure." (d1a82c4)
• Disable focus on TextInput with editable set to false (5006eca)
• Set allowsEdgeAntialiasing for transformed views, fixes jagged edges when using the transform property. (see the smooth edges in the transform example above)
• Fixed crash when app is reloaded while profiling is active
• Properly free JavaScript executors when app is reloaded (f2d65ea)
• Pin Babel version to ensure nothing breaks between releases, eg: the spread operator caused some issues in a minor version.

v0.8.0

0.8.0 has been published to npm and CocoaPods. The major features of this release are the Animated library and the move from Node to io.js.

0.9.0-rc is scheduled for next Friday once some small breaking changes to the Touchable components are all merged.

The changes for this release are covered in the 0.8.0-rc and 0.8.0-rc.2 release notes (0.8.0 is the same as 0.8.0-rc.2).

v0.8.0-rc.2

v.0.8.0-rc.2 includes a few commits to improve the stability of the next release.

• Reverted removal of layout-only UIViews and a related fix for sticky headers in scroll views
• Fixed TextInput so it no longer mutates props; it no longer warns in development
• Fixed ListView crash related to getting its scroll responder

v0.8.0-rc

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