
At [F8 2016](https://www.fbf8.com/), [Kevin Gozali](https://twitter.com/fkgozali) and [Emily Janzer](https://twitter.com/emilyjanzer) from the Ads Manager team shared their experience of building a Facebook-grade React Native app.

## [Building Cross-Platform Mobile Apps with React Native](https://developers.facebook.com/videos/f8-2016/building-cross-platform-mobile-apps-with-react-native/)


Building Cross-Platform Mobile Apps with React Native


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

---

Docs here: [https://facebook.github.io/react-native/releases/0.24/docs/getting-started.html](https://facebook.github.io/react-native/releases/0.24/docs/getting-started.html).

This release includes a series of improvements for coalescing touch and scroll events on iOS by Martin Kralik ([@majak](https://github.com/majak)). These improvements fixed a bug that was preventing some native touch events from being dispatched to JS. This also improves the perceived performance of components that rely on these touch events, like parallax scrollers. Thanks, Martin! 👏🏻

#### Known issues we’re fixing

- RefreshControl broken on iOS: [#6929](https://github.com/facebook/react-native/issues/6929) (fix: [03c1688](https://github.com/facebook/react-native/commit/03c1688ce6fa5a6a77b25a19c1dda1a1fe62bcc3))
- Hot module reloading raises an error: [#6798](https://github.com/facebook/react-native/issues/6798)
- `response.json()` hangs when Chrome debugging is enabled: [#6679](https://github.com/facebook/react-native/issues/6679)
- Unable to require images under `node_modules`: [#6638](https://github.com/facebook/react-native/issues/6638)

Ongoing issue thread: [#6800](https://github.com/facebook/react-native/issues/6800)

#### Breaking changes

- Android no longer includes Stetho by default: [3c488af](https://github.com/facebook/react-native/commit/3c488afb0fa09c7fc1189f3e4c0932c28045f065)
- Removed `RCTBridgeModuleClassIsRegistered` from iOS: [a16771c](https://github.com/facebook/react-native/commit/a16771c5dc980768d6312673156887171d3e594b)
- Removed `sendMomentumEvents` prop from ScrollView, which was intended for internal usage
- StyleSheetRegistry has been renamed to ReactNativePropRegistry. This module is private so it shouldn't affect everyone using React Native's public API, though: [433fb33](https://github.com/facebook/react-native/commit/433fb336af59cd5f8e939831f0a5cae0e3e58ee9)

#### New features

- Enhancements to NavigationExperimental by [@hedgerwang](https://github.com/hedgerwang):

  - Animations and gestures for pagers: [4f8668b](https://github.com/facebook/react-native/commit/4f8668b11092de84a911f92c1e0b19cfedbb8a33)
  - Use the same type of animation (spring) in NavigationCardStack and NavigationAnimatedView: [07697d1](https://github.com/facebook/react-native/commit/07697d15cc7ca53b86635b0c8c372d997c50c4d3)
  - Reduce extra rendering in NavigationHeader: [62e80a6](https://github.com/facebook/react-native/commit/62e80a600ead2cdf02eb2c0be30171014d91e8d7)

- Experimental WindowedListView, which uses a placeholder spacer view for off-screen rows. It is not a drop-in replacement for ListView: [cd79e26](https://github.com/facebook/react-native/commit/cd79e269dc1aa17d911605ec78a4603b9e2f5e4c)

- Several improvements to the docs

#### Bug fixes

- Use a monotonic clock instead of the current time in the profiling tools: [ac03c47](https://github.com/facebook/react-native/commit/ac03c47895f59842a4e6528e8272f371d61e41cf)
- Various Hot Module Reloading fixes: [98411f1](https://github.com/facebook/react-native/commit/98411f1642715bc678661403f9421ce18f6f5347), [51b5423](https://github.com/facebook/react-native/commit/51b5423fd5c3263b34fe6dc7ca83cf188e5e8d5e)
- Fix views not stretching vertically in column layout: [#2724](https://github.com/facebook/react-native/issues/2724), [d957570](https://github.com/facebook/react-native/commit/d95757037aef3fbd8bb9064e667ea4fea9e5abc1)
- Use semver in the .flowconfig file to allow you to use patch versions of Flow without updating .flowconfig: [#6767](https://github.com/facebook/react-native/pull/6767)

#### Android

##### New features

- 🎉 Preliminary support for delegating Animated commands to the native UI thread. Credit goes to [@kmagiera](https://github.com/kmagiera) for the design and implementation, [@brentvatne](https://github.com/brentvatne) for experimentation and critical feedback, and [@astreet](https://github.com/astreet) and [@vjeux](https://github.com/vjeux) for a thorough code review. The implementation is not complete but will eventually unblock Navigation animations from other heavy work on the JS thread: [#6466](https://github.com/facebook/react-native/pull/6466)
- Modal now warns if you don't provide the `onRequestClose` prop: [ce81f8b](https://github.com/facebook/react-native/commit/ce81f8b35af8d273072583d369594d4f5fd6d696)
- Vibration patterns: [e20e8a3](https://github.com/facebook/react-native/commit/e20e8a3cc87cbb624add4de00149b1f55bbdcfba)
- DrawerLayoutAndroid has a new `statusBackBackgroundColor` prop, which tells it to draw over the native Android toolbar. See the screenshots in the PR: [#6218](https://github.com/facebook/react-native/pull/6218)
- ScrollView has a new `endFillColor` prop, which tells React Native to fill in the rest of the scroll view with a color in the event that the scroll view's viewport is larger than its content. This is an advanced performance optimization to reduce overdraw; measure performance before you use it: [4498bc8](https://github.com/facebook/react-native/commit/4498bc819730e3c513750a04d705883f1d61816d)
- TextInput supports the 'selectTextOnFocus' prop now: [#6654](https://github.com/facebook/react-native/pull/6654)
- Start creating views before the end of a batch for performance: [6a3b334](https://github.com/facebook/react-native/commit/6a3b334139d528cef075555d3ebbe8a1a5ec92c5)
- ReadableArray and ReadableHashMap now define convenience methods: `toArrayList` and `toHashMap`: [#6639](https://github.com/facebook/react-native/pull/6639), [#6762](https://github.com/facebook/react-native/pull/6762)
- Returning true from a BackAndroid `hardwareBackPress` handler stops invocation of previously registered handlers and the default OS action: [67efe4c](https://github.com/facebook/react-native/commit/67efe4c1a932ac6acd20caf497df6978c1b52c90) (reverted in [ede99ee](https://github.com/facebook/react-native/commit/ede99eeaddea990e76b1d37fc1f471a71576f7ed))
- Slider component is available: [afe78f6](https://github.com/facebook/react-native/commit/afe78f6935f4d1672c3ed51522fdf2b2feac71c5)

##### Bug fixes

- Fix clipping rectangle calculation for nested scroll views: [e8e3182](https://github.com/facebook/react-native/commit/e8e31823b9bde22eb348fd828d6e5b38a5371833)
- Don't strip `NativeRunnable` constructor with ProGuard: [393890e](https://github.com/facebook/react-native/commit/393890e00f0c8455678eedd2aa7341d0d727aade)
- Fix fetching source maps in Genymotion: [6c22a21](https://github.com/facebook/react-native/commit/6c22a2174e733d536a12f47a2da4f84329ac3023)
- Prevent a parent view’s touched state from applying to its children when nesting TouchableNativeFeedback components: [#6783](https://github.com/facebook/react-native/pull/6783)

#### iOS

##### New features

- Open-source `FBPortForwarding`, which proxies network requests from a device to your computer like `adb reverse`. It is not integrated with React Native, but the code is here if you want this feature: [`FBPortForwarding`](https://github.com/facebook/react-native/tree/c4699d8b739c2b22017f8d88a3143bac48e3a2fa/Tools/FBPortForwarding): [c4699d8](https://github.com/facebook/react-native/commit/c4699d8b739c2b22017f8d88a3143bac48e3a2fa)
- ActionSheetIOS has a new `message` option: [#6685](https://github.com/facebook/react-native/pull/6685)

##### Bug fixes

- 🎉 Fix how native events are coalesced when sending them to JS, specifically touch and scroll events, in order to respect their ordering ([#5246 (comment)](https://github.com/facebook/react-native/issues/5246#issuecomment-198326673)). When all events can be coalesced, they are processed ASAP instead of waiting for the next JS frame. Several diffs from [@majak](https://github.com/majak): [a496baa](https://github.com/facebook/react-native/commit/a496baa68c22965b19540954adaa97a1365a1e7e), [a37075d](https://github.com/facebook/react-native/commit/a37075dcecc24d5178c4fb352449d360feb57222), [cefc5a6](https://github.com/facebook/react-native/commit/cefc5a66f2e4971cbcad25b3b2a31422971909b1), [7c2b397](https://github.com/facebook/react-native/commit/7c2b397b004571620847d3636fe7ff98ba32e700), [b1b53aa](https://github.com/facebook/react-native/commit/b1b53aad8b75afd6fd18276671a8d5cea572fcc2), [1d3db4c](https://github.com/facebook/react-native/commit/1d3db4c5dc8763d16f2d051fdf04a2976c0fb154) (reverted in [144dc30](https://github.com/facebook/react-native/commit/144dc3066144a48fc13bb7832abc9e645024fb88) , reinstated with a fix in [02b6e38](https://github.com/facebook/react-native/commit/02b6e38bee04bb9a4619ce0dac2a8db34656b060) ), [31bb85a](https://github.com/facebook/react-native/commit/31bb85a210e8a6edba4f59df6eb36ccc5cc58d9e)
- Lock accesses to the flow ID map (for profiling) for thread safety: [2be42ab](https://github.com/facebook/react-native/commit/2be42abbc2d55927ba2239ec0201b41c91468e2a)
- Stop the JS run loop from `-[RCTJSExecutor invalidate]` instead of `dealloc` so that it is guaranteed to be stopped from the JS thread: [99c7de2](https://github.com/facebook/react-native/commit/99c7de2600d81325fcb6124d6fd9359e52bbd2ef)
- Prevent dev menu from resetting simulator orientation: [#6765](https://github.com/facebook/react-native/pull/6765)
- Increase dev tools timeout: [b00c77a](https://github.com/facebook/react-native/commit/b00c77af8066cf74f05ccaca2b08c8952e1ae8a6)
- Use indirect jumps in the profiling trampoline to support larger binaries when needing to jump more than 32MiB: [2f27039](https://github.com/facebook/react-native/commit/2f2703936d1b41d0d36f0b12aee2939d341aa65f)
- Make SliderIOS retain its touch responder status: [52ddfd9](https://github.com/facebook/react-native/commit/52ddfd9b51cbaa05176efc8c9dfa7b581be01a97)


React Native v0.24.0 released


Last month, at [React.js Conf 2016](http://conf.reactjs.com/), [Andres Suarez](https://twitter.com/zertosh) showed us the true power of Nuclide applied to React Native.  
This news came as a [long awaited](https://github.com/facebook/nuclide/issues/211#issuecomment-191499124) response for those who were eagerly waiting for React Native's support.

If you didn't watch his lightning talk yet, then you might have missed some of the [great features](http://nuclide.io/docs/platforms/react-native/) that are bundled into this tool.  
Even if you didn't test it yet, [chances are](http://blog.atom.io/2016/03/28/atom-reaches-1m-users.html) you'll be able to get it with very little work since Nuclide is a [package](https://atom.io/packages/nuclide) completely built on top of [Atom](https://atom.io/).

## [Nuclide - Unified IDE](http://nuclide.io/docs/platforms/react-native/)

> Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects.

![Nuclide - React Native IDE ](http://nuclide.io/static/logo.png)


Time to take Nuclide for a spin


It's something that was [eagerly awaited](https://github.com/facebook/react-native-fbsdk/issues/33#issue-106831390) for, and now it's [done](https://github.com/facebook/react-native-fbsdk/issues/33#issuecomment-200498972)!  
Facebook has released a new version of its official SDK for... well, Facebook, that includes Android support as well.  
You can now relay on the official SDK for features like Login, Sharing, App Analytics and Graph API.

Make sure to grab the [v0.1.0-alpha](https://github.com/facebook/react-native-fbsdk/releases/tag/0.1.0-alpha)!

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

> React Native FBSDK is a wrapper around the iOS Facebook SDK, allowing for Facebook integration in [React Native](https://facebook.github.io/react-native/) apps. Access to native components, from login to sharing, is provided entirely through documented JavaScript modules so you never have to call a single native function directly.
>
> Functionality is provided through three separate npm packages so you never have to include more than you need:  
> \- `react-native-fbsdkcore` - `react-native-fbsdkshare` - `react-native-fbsdklogin`

![Facebook SDK for iOS](http://i.imgur.com/jjV6HVc.png)


Facebook SDK for React Native apps gets revamped (and Android support)


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

---

This release includes Android support for Modal.

#### New features

- Add ability to silence packager logs to stdout - [d5445d5](https://github.com/facebook/react-native/commit/d5445d5fbc5ea6d1ec01c9d4e7692613a216967f)
- Add the possibility to `console.error`/redbox on promise rejections - [f87b673](https://github.com/facebook/react-native/commit/f87b673a2959b8d05703c2c83c89d32fe38d2e75)
- Add more performance logs and improve Systrace support - [f6853b8](https://github.com/facebook/react-native/commit/f6853b8eacec250df1a73f56d7ef9d32b91615e1)
- Initial implementation of the Navigator with NavigationExperimental. - [fa5783e](https://github.com/facebook/react-native/commit/fa5783e3ee1c5e0b73231a2cf0703545cf9b91ac)
- `<Incremental>` for incremental rendering - [f21da3a](https://github.com/facebook/react-native/commit/f21da3aa31c09c375ce0021ee5069671b6e79ac1)
- Add ability to specify custom left, right components, and title component in `NavigationExperimental`'s `NavigationHeader`. Style the `NavigationHeader` according to the Platform - [720c76f](https://github.com/facebook/react-native/commit/720c76f94dcf756f1c8f7aeea7f68a2166a48790) (Breaking)

#### Bug fixes

- Update node-haste and replace fast-path with node-haste's version to fix Windows compatibility - [fd816b1](https://github.com/facebook/react-native/commit/fd816b1349506fb40c4229e470c0ef5c32de1e80)
- Fix bug [#5604](https://github.com/facebook/react-native/issues/5604) - Unrecognised signal for touchable no longer on the screen - [d637621](https://github.com/facebook/react-native/commit/d63762194d7c9ba8ebf6774ef25948cb87a3e694)
- Update Layout.c to fix flexbox layout bug - [6c5195f](https://github.com/facebook/react-native/commit/6c5195fb3aa175ea416eb53e2c10720089dd8c85)
- Transform before extracting dependencies - [9d09efd](https://github.com/facebook/react-native/commit/9d09efdd53017877328a9fbaef2fd2cfd31352fc)
- Refactor bezier implementation from bezier-easing library - [b5985cf](https://github.com/facebook/react-native/commit/b5985cf6908365e28bff1f3dd15c44d7586a6433)
- Inline `__accept` call so that source maps work with HMR [bcb37c0](https://github.com/facebook/react-native/commit/bcb37c0b6ae6c319bc99b569a2253c30c3715a07)

#### Android

##### New features

- Modal now works on Android
- Add missing textAlignVertical support on android TextView - [d20bde3](https://github.com/facebook/react-native/commit/d20bde3f2ee5cce4dbe3baa01ed70a4bb7f20340)
- Add support for elevation in DrawerLayoutAndroid - [61483aa](https://github.com/facebook/react-native/commit/61483aa15d39576f632010022f61d0f838c38752)
- Add JS Minify option to settings in Android - [1f94a00](https://github.com/facebook/react-native/commit/1f94a00785a472d135d121958d5c2fa73ec94103)
- Make run-android execute the app on all connected devices - [10ad47a](https://github.com/facebook/react-native/commit/10ad47a711954f1af077c7f237ad37ff269d324e)
- Add support for multiple JS contexts - [872b697](https://github.com/facebook/react-native/commit/872b697730291575c5c25556bc9b49f66863947c)
- Make JS perf API available to JS - [6e3710f](https://github.com/facebook/react-native/commit/6e3710f36b4c272c60cc7c38815951460272fa7c)

##### Bug fixes

- Fix setting android toolbar images after null them - [8aa83a2](https://github.com/facebook/react-native/commit/8aa83a2d93fe4dba746cb03bb24604dc1ab859b6)
- Add StatusBar height constant and improve implementation - [18f38ec](https://github.com/facebook/react-native/commit/18f38ecdc0baafeead06fc982eafa51f2c7cf8c3)
- Fix event dispatcher timestamp sorting bug - [f5a3490](https://github.com/facebook/react-native/commit/f5a349021d3e9ccaf1a1590dc984c0ea16a177ca)
- Fix RCTText crashing when negative width is passed to measure - [c42fc61](https://github.com/facebook/react-native/commit/c42fc61a2a8cfcdf17f5290895f550af8b733412)
- Fix text input scroll when status bar is translucent - [c76523f](https://github.com/facebook/react-native/commit/c76523f1ad832cd3a32151e6a20d3a58bf09496f)
- Fix race condition in refactored bridge code - [0cb7d16](https://github.com/facebook/react-native/commit/0cb7d16ab461c64e8fa6f81a0cc16c2ee7bbc117)
- Convert Image resizeMode `contain` to FIT_CENTER - [2070efa](https://github.com/facebook/react-native/commit/2070efa019f6b5dfb38500d41e4d7e263f59f0d2)

#### iOS

##### New features

- Adding Pre-Parsing cache & StringRef to iOS 8's JSC - [22e55d4](https://github.com/facebook/react-native/commit/22e55d4396499a5fe960f9d59210fc3fece3e55f)
- Add lineBreakMode prop to Text - [64a09fe](https://github.com/facebook/react-native/commit/64a09feaf7d3f989ca665d60a79b420acf8ee8f1)
- Add blur effect to RCTImageView - [9cb3ec9](https://github.com/facebook/react-native/commit/9cb3ec94246e26d8c8291f7f90160b72a3009d0d)

##### Bug fixes

- Fix sticky header touch handling bug - [688bb17](https://github.com/facebook/react-native/commit/688bb177777ab0f26696fde7633f928e14f6f348)
- Update AppState to support the inactive state - [ec9efb8](https://github.com/facebook/react-native/commit/ec9efb8a01ce59c7a594df5ca4c314a208ba1902)


React Native v0.23.0 released


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