
[Xavier Carpentier](https://twitter.com/xcapetir) is making sure that your App is going to be ready to hit all App/Play Store around the globe. Check his new Component that is letting your users pick their Country through a Modal.

Things are going to get even better when the Android support for Modal is coming in React Native [v0.23](https://github.com/facebook/react-native/releases/tag/v0.23.0-rc1)!

## [react-native-country-picker-modal](https://github.com/xcarpentier/react-native-country-picker-modal) on GitHub

> Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.

```javascript
class Example extends Component {
  constructor(props) {
    StatusBarIOS.setHidden(true);
    super(props);
    this.state = {
      cca2: "US",
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to Country Picker !</Text>
        <CountryPicker
          onChange={(value) => this.setState({ country: value })}
          cca2={this.state.cca2}
          translation="eng"
        />
        <Text style={styles.instructions}>press on the flag</Text>
        {this.state.country && (
          <Text style={styles.data}>
            {JSON.stringify(this.state.country, null, 2)}
          </Text>
        )}
      </View>
    );
  }
}
```

![Country Picker Component for React Native ](http://i.imgur.com/WF4sdT7.gif)


A Country Picker Component for React Native


Once again, forms are getting attention, this time [Daniel Weinmann](https://github.com/danielweinmann) takes huge inspiration from [Farid from Safi](https://github.com/FaridSafi/)'s [react-native-gifted-form](https://github.com/FaridSafi/react-native-gifted-form) for his new stateless form components.

His goal is to achieve common patterns in mobile forms' user interaction, but without managing any state at all, so other libraries like [redux-form](http://redux-form.com/) could be used for what they really shine.

## [react-native-stateless-form](https://github.com/danielweinmann/react-native-stateless-form) on GitHub

> This package is inspired by [FaridSafi/react-native-gifted-form](https://github.com/FaridSafi/react-native-gifted-form), and my intention is to merge with it in the future.
>
> The reason for creating a new package is that I want the form components to be presentational only, and not to store state at all. This way we can easily integrate with Redux Form, any other form management tool, or even implement our own form management.

![Form components for React Native](https://raw.githubusercontent.com/danielweinmann/react-native-stateless-form/master/StatelessForm.gif)


Stateless presentational form components for React Native


## [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)
