
## [v0.22.0](https://github.com/facebook/react-native/releases/tag/v0.22.0) on GitHub ([npm](https://www.npmjs.com/package/react-native))

React Native 0.22 ships with Hot Reloading! 🎉

---

#### New features

- Support custom ScrollView implementations in ListView - [b516976](https://github.com/facebook/react-native/commit/b51697645792b35214615552dbb66e6b262ec477)
- Adopt NavigationExperimental in UIExplorer - [876ecb2](https://github.com/facebook/react-native/commit/876ecb291fe80471ff49df687b59f38b48d705d8)
- Introduce disabling for Touchable\* elements - [9951e1a](https://github.com/facebook/react-native/commit/9951e1ab04f4e4e78c14fcd6e002269e2a2f159e)
- Introducing NavigationCardStack - [6bcb2a0](https://github.com/facebook/react-native/commit/6bcb2a05eb4eb2d614991d3c68351d101f6f1c76)
- Implement modulo operator method for Animated - [ae0ad1f](https://github.com/facebook/react-native/commit/ae0ad1fc7e8d7a591b5b1c0789c39bdcdfd3f388)
- Add message channel to packager for sending commands to bridge (2/N) - [c377f2a](https://github.com/facebook/react-native/commit/c377f2a1633af590b03dca272b7b4b4228ce9d4e)
- Add new worker for code transform, optimization, and dependency extraction in packager - [d94a567](https://github.com/facebook/react-native/commit/d94a56747d83d7eb3e1c0215dc01df654b31d8e6)
- Add gesture handling for the Navigation card stack - [caac520](https://github.com/facebook/react-native/commit/caac52095260beabd7038ec82a93847cc38b3f04)
- Add data structure to manage the stack for the legacy navigator - [1caebf1](https://github.com/facebook/react-native/commit/1caebf175a38e6dd05aedf22d210591c8707594c)

#### Bug fixes

- Fix an issue (Sticky header index was outside the range) when renderSeparator is defined but returns null - [c449d9e](https://github.com/facebook/react-native/commit/c449d9e72d46f840a70668cfda18ec6e5d7e024d)
- Fix resources build variable name - [7eb7b94](https://github.com/facebook/react-native/commit/7eb7b947d72a782a2e35c896c6d648a17eab2b67)
- Fix crash when passing null to clearImmediate - [44fcf22](https://github.com/facebook/react-native/commit/44fcf22074ca32e5f6869b88f7b6c00ea990cb08)
- Fix Exponential WebSocket Growth from DevTools - [d0a26a7](https://github.com/facebook/react-native/commit/d0a26a75fb5d2740b93e3960cd6bbd13f11a8c88)

#### Android

##### New features

- Add the ability to create triangles using style tricks - [a6a4389](https://github.com/facebook/react-native/commit/a6a4389bf4a581de5adfe0e5dda4aa4f70438dfc)
- Enable scalesPageToFit on Android - [4b97137](https://github.com/facebook/react-native/commit/4b97137eee9a46ebcd0fe4d2c5a473febb4377bb)
- Add position to Picker onValueChange's call - [b454d31](https://github.com/facebook/react-native/commit/b454d31ab8d778c393a3a99869c50d1967baaaad)
- Added a `root` option to the `run-android` command - [b9ed72a](https://github.com/facebook/react-native/commit/b9ed72a043a67401a43b91f1d55c72d5f7e82bc1)
- Use nanoTime instead of currentTimeMillis for events - [b5d2667](https://github.com/facebook/react-native/commit/b5d26679c4bcc6126d04a98022d86821b5e5de51)
- Add drawerLockMode prop to DrawerLayoutAndroid - [ec173b1](https://github.com/facebook/react-native/commit/ec173b1a1767aa52cf85fe652044d19264def699)
- WebWorkers: Add ExecutorToken to route native module calls to/from workers - [bd95b22](https://github.com/facebook/react-native/commit/bd95b22844e9facd2c6f34c644f4b33fd116c2d7)
- Enable blurOnSubmit for text input in android - [ab12189](https://github.com/facebook/react-native/commit/ab12189f87d8e7fd84a4f1b92fa97e8894e984c7)
- Add generic memory pressure listener interface - [c027f05](https://github.com/facebook/react-native/commit/c027f05ef48b3980c726c78a28117ad79750b8b1)
- Ability to supply product flavor for `react-native run-android` command - [46422dd](https://github.com/facebook/react-native/commit/46422ddd99a798d1af9ea337629f2de5334d72fa)
- Add ReactCompoundViewGroup interface that allows having both virtual and non-virtual (View) children - [aae521f](https://github.com/facebook/react-native/commit/aae521f57e56c0790f957a2f254327057b8ee72e)

##### Bug fixes

- Fix app crashes on Android after fetching the js bundle - [3640080](https://github.com/facebook/react-native/commit/36400807ab968f9e48aee2292545147e74462caf)
- Fix broken drawer layout - [8e809e9](https://github.com/facebook/react-native/commit/8e809e9b24eee6930427edf0b3e876bbda52da88)
- Deprecate PullToRefreshViewAndroid and remove it from the website - [91788d2](https://github.com/facebook/react-native/commit/91788d2bbd35a530269664c71cd17220cc7bc80a)
- Fix hidden StatusBar reappearing after exiting app on Android - [cf3bd9f](https://github.com/facebook/react-native/commit/cf3bd9f9a17570e6b8db3cf9af3156b67243f696)
- Fix android's image tintColor prop when used with alpha - [8b88cae](https://github.com/facebook/react-native/commit/8b88cae74783b226a747510cf8d1f33f92a8d755)
- Fix attributes checking for Image.android.js - [7e3266d](https://github.com/facebook/react-native/commit/7e3266d7de976aedccafa2fdcaa53b43e04cecb1)
- Fix deadlock in bridge - [e64987d](https://github.com/facebook/react-native/commit/e64987d7807e5b0a54429bc969cc60d60e86fc32)
- Fix IllegalStateException crash in WebSocketModule.java - [a6a89fe](https://github.com/facebook/react-native/commit/a6a89fe4e08b6cf834df35cb176feac077234025)

#### iOS

##### New features

- Adds category and alertAction properties to local notification details object - [183d6a0](https://github.com/facebook/react-native/commit/183d6a088cbc13f5e123a54cbe63430d92450e96)
- Add position to Picker onValueChange's call - [b454d31](https://github.com/facebook/react-native/commit/b454d31ab8d778c393a3a99869c50d1967baaaad)
- Add support for sharing images or other media via iOS share sheet - [e6c6510](https://github.com/facebook/react-native/commit/e6c65102d4b1e3b7509a2fc4d595da51e83c6b77)
- Added support for taking snapshots of the screen, window or individual views - [ac12f98](https://github.com/facebook/react-native/commit/ac12f986899d8520527684438f76299675dc0daa)
- Add UIManager.measureInWindow to get window coordinates - [f67fa82](https://github.com/facebook/react-native/commit/f67fa82008918e9e2875387db658911d197a6956)
- Add Universal Links support to Linking.getInitialURL(). Fixes [#6099](https://github.com/facebook/react-native/issues/6099) - [f0689cf](https://github.com/facebook/react-native/commit/f0689cf53431a4eb59c2815e1438406904eac083)

##### Bug fixes

- Fix a bug with ListView with sticky headers + RefreshControl - [671b975](https://github.com/facebook/react-native/commit/671b975d92a462be63cb8edad45b455da2e81d5d)
- Fix RCTPerfMonitor display unit error - [50141f9](https://github.com/facebook/react-native/commit/50141f9d3fcf7cad09dfc44bb8b7951e8e8f830b)
- Fix WebView example on iOS - [7032a64](https://github.com/facebook/react-native/commit/7032a640e7eb661e3be45a494e7311191c329ced)
- Fix issue with opaque thumbnails being given an alpha channel - [7383378](https://github.com/facebook/react-native/commit/738337815dd17c92083d1d752674f337f5366a43)
- Fix RefreshControl layout on screen rotation and consecutive pull to refresh not working properly - [102a31c](https://github.com/facebook/react-native/commit/102a31c13eed82432b3e0d93230653394f7baa3d)
- Fix Geolocation Accuracy and Cached Location Bug - [49b2805](https://github.com/facebook/react-native/commit/49b2805da2237c60559b779f3f6475914f311698)


React Native v0.22.0 released


The cool guys behind [Siphon](https://twitter.com/getsiphon) not only are building one of [most complete solutions](https://getsiphon.com/) for building React Native apps but also sharing their passion and love for this wonderful framework in the meanwhile.

Here is their new tutorial to build a YouTube playlist browser.

## [siphon-youtube-video-browser](https://github.com/getsiphon/siphon-youtube-video-browser) on GitHub

## [Build a YouTube playlist browser with React Native and Siphon](https://getsiphon.com/docs/build-a-youtube-browser/) blogpost

> We're going to use [Siphon](https://getsiphon.com) to quickly build a React Native app from scratch. The finished app will display a live YouTube playlist and let you play a video by tapping it.
>
> You will learn all about:
>
> - Fetching a remote data source
> - Parsing XML using the `xmldom` library
> - How to use React Native's `Navigator` component
> - Integrating the `react`youtube library
>
> Please follow the [quickstart tutorial](/docs/quickstart/) first if you haven't already set up your machine to use Siphon.
>
> The [finished app](https://github.com/getsiphon/siphon-youtube-video-browser) will look something like this:

![YouTube playlist browser ](https://getsiphon.com/static/img/docs/youtube-browser/playlist.jpg)


Build a YouTube playlist browser with React Native and Siphon


React Native's ecosystem is so full of _such magic_ that we might forget were we started.  
Before all [those](https://getsiphon.com/) [fantastic](https://apphub.io/) [tools](https://exponentjs.com/) we had to deal with manual App Store submissions (and Google Play for that matter).

Solution of choice for mobile Apps deploy automation (and maybe behind the curtain of the tools above... who knows) is [fastlane](https://fastlane.tools/).  
If you want to dig deeper, or if you need a different solution tailored for your needs here are [Daniel Banck](https://twitter.com/dbanck) and [Daniel Schmidt](https://twitter.com/DSchmidt1992) talking about it.

Daniel Banck is also keeping pace with React Native udpdates and we can expect him to extend the guide from App Store to Google Play as well.

## [Deploying a React Native App with Fastlane](https://dbanck.svbtle.com/deploying-a-react-native-app-with-fastlane) blogpost by [Daniel Banck](https://twitter.com/dbanck)

## [React Native deployment with Fastlane](https://weluse.de/blog/react-native-deployment-with-fastlane.html) blogpost by [Daniel Schmidt](https://twitter.com/DSchmidt1992)

![fastlane](https://raw.githubusercontent.com/fastlane/fastlane/master/fastlane/assets/fastlane_text.png)


Deploying a React Native App with Fastlane


If you've been following along React.js Conf then you might know how Redux is generally praised as the preferred Flux implementation.

Flux (or Redux) comes handy as your App Size and its complexity grow over time.  
Still, it might feel a little overwhelming to get started with all these new concept, libraries and framework.  
You might also suffer some form of [Javascript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4).

We previously talked about some great references for learning [Redux](https://www.reactnative.com/tag/redux/), but you might still feel the need for a proper learning course.

This is why today we're suggesting `Modern React with Redux`.  
Yes, it is a paid Course, but you're going to find a great discount (code `TECHEXCLUSIVE19`, valid until 2/28 6:00am PST) waiting for you.

---

### [Modern React with Redux](http://goo.gl/rWf88X)

![Modern React with Redux ](http://i.imgur.com/N4t5bcj.jpg)

> ###### Course Description
>
> This is the tutorial you've been looking for to master modern web development with React.
>
> **Redux?** We got it. **ES6/Babel?** Covered. **Webpack?** Included!
>
> Mastering React and Redux can get you a position in web development or help you build that personal project you've been dreaming of. It's a skill that will put you more in demand in the modern web development industry, especially with the release of Redux and ReactNative.
>
> This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build React components and structure applications with Redux.  
> We'll start by mastering the fundamentals of React, including JSX, “props", “state", and eventing. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing. After an introduction to React, we'll dive right in to Redux, covering topics like reducers, actions, and the state tree.  
> If you are new to React and Redux, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it.
>
> - Learn how to use React's custom markup language, JSX, to clean up your Javascript code
> - Master the process of breaking down a complex component into many smaller, interchangeable components
> - Grasp the difference between “props" and “state" and when to use each
> - Develop complex applications that scale in complexity by mastering Redux
> - Dive deeper into Redux by using middlewares. No fancy terms required!
>
> I've built the course that I would have wanted to take when I was learning React and Redux. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.
>
> ###### What am I going to get from this course?
>
> - Over 97 lectures and 10.5 hours of content!
> - Build amazing single page applications with React JS and Redux
> - Master fundamental concepts behind structuring Redux applications
> - Realize the power of building composable components
> - Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
> - Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax
>
> ###### What is the target audience?
>
> - Programmers looking to learn React
> - Developers who want to grow out of just using jQuery
> - Engineers who have researched React but have had trouble mastering some concepts

![](http://ad.linksynergy.com/fs-bin/show?id=IqQtCJUA/uE&bids=323058.3842&type=3&subid=0)


Modern React with Redux


If you ever worked on native Mobile Apps before and you looked for alternatives to SQLite or key-value stores then you already heard about [Realm](https://realm.io/).  
The good news is that the guys at [Realm](https://twitter.com/realm) are now launching a new Realm mobile database built specifically for React Native.

If you're working your way around persistence, then this surely will breathe new life into your project.

## [Introducing Realm React Native](https://realm.io/news/introducing-realm-react-native/)

## [realm-js](https://github.com/realm/realm-js) on GitHub

> At Facebook’s React.js Conference, we’re launching a new Realm mobile database built specifically for React Native. It offers easy object persistence and full query capabilities, with a performance profile that’s usually 2–10x faster than existing options.
>
> Like the other editions of Realm, it is designed from the ground up to enable reactive app development, with [live objects](/docs/react-native/latest/#auto-updating-results), [change events](/docs/react-native/latest/#change-events), and support for [unidirectional data flows](/news/unidirectional-data-flow-in-swift/)

```javascript
const Realm = require("realm");

class Person {}
Person.schema = {
  name: "Person",
  primaryKey: "name",
  properties: {
    name: "string",
    age: { type: "int", default: 0 },
  },
};

const realm = new Realm({ schema: [Person] });

// Query
let people = realm.objects("Person", "age >= 17");
people.length; // => 0

// Write
realm.write(() => {
  savedPerson = realm.create("Person", {
    name: "Hal Incandenza",
    age: 17,
  });
});

// Queries are updated in real-time
people.length; // => 1
```


Realm for React Native: fast database with live objects, change events & support for unidirectional data flows


Amazing times for all of us, React and React Native developers. Not only we're in the middle of a [React.js Conf](http://conf.reactjs.com/) but looks like a lot of big players are going to make major announcements in these days.

Just to start with, here is the Visual Studio Code extension for React Native that will give you a whole new DX for CLI commands, debug and IntelliSense.

## [React Native Tools (Preview)](https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native) on Visual Studio Marketplace

## [vscode-react-native](https://github.com/Microsoft/vscode-react-native) on GitHub

## [React.js Conf 2016 - Web-like Release Agility for Native Apps](https://www.youtube.com/watch?v=B8J8xn3pLpk)

> This extension provides a development environment for React Native projects. You can debug your code, quickly run react-native commands from the command palette and use IntelliSense to browse objects, functions and parameters for React Native APIs.

![React Native Tools extension for Visual Studio  ](https://raw.githubusercontent.com/Microsoft/vscode-react-native/master/images/react-features.gif)
