
Love React Native and got a Chromecast plugged in?  
You can now unleash your [Chromecast](http://www.google.com/chrome/devices/chromecast/)'s full potential by toying with this awesome React Native Chromecast Example App from [Edmondo Pentangelo](https://twitter.com/holoed).

## [Chromecast_ReactNative](https://github.com/holoed/ChromeCast_ReactNative) on GitHub

![Chromecast](https://raw.githubusercontent.com/holoed/ChromeCast_ReactNative/master/docs/Screenshot.png)


Chromecast videos from JavaScript in React Native


Here is for the nostalgic of Radio Buttons, [Ali Najafizadeh](https://twitter.com/li_n_z) has brought them back with its new component.

## [react-native-radio-button-classic](https://github.com/pressly/react-native-radio-button-classic) on GitHub ([Example](https://github.com/pressly/react-native-radio-button-classic/tree/master/Example))

```javascript
<Radio
  onSelect={this.onSelect.bind(this)}
  defaultSelect={this.state.optionSelected - 1}
>
  <Option color="gray" selectedColor="#008BEF">
    <Item title="First Options" description="This is your First Option" />
  </Option>
  <Option color="gray" selectedColor="#008BEF">
    <Item title="Second Options" description="This is your Second Option" />
  </Option>
  <Option color="gray" selectedColor="#008BEF">
    <Item title="Third Options" description="This is your thrid Option" />
  </Option>
</Radio>
```

![Radio buttons](https://raw.githubusercontent.com/pressly/react-native-radio-button-classic/master/demo.gif)


Bring classic radio buttons to React Native


Where did we left?  
Oh, right, we introduced the new [Animated API](http://www.reactnative.com/react-native-animated/) that lets you handle Native iOS and Android animations in React Native.  
Then we talked about Brent Vatne showcasing it with its [Tinder-style gestures/animations](http://www.reactnative.com/react-native-animated-api-demo/).

That's where [Jason Brown](https://twitter.com/browniefed) kicks in, he has took Brent's code and simplified while writing a nice tutorial around it.

## [React Native Animated API with PanResponder](http://browniefed.com/blog/2015/08/15/react-native-animated-api-with-panresponder/) blog post

## [Showcase](https://rnplay.org/apps/71CyoA) on RNPlay

![Final with rotation and opacity](http://i.imgur.com/b5K2fcx.gif)


React Native Animated API with PanResponder


## [v0.10.0-rc](https://github.com/facebook/react-native/releases/tag/v0.10.0-rc) on GitHub ([npm](https://www.npmjs.com/package/react-native), [CocoaPods](https://cocoapods.org/pods/React)) Release note:

> 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](https://facebook.github.io/react-native/docs/animations.html) API or [react-motion](https://github.com/chenglou/react-motion) instead

## 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](https://github.com/facebook/react-native/issues/1378 "[Layout] Navigating back to scene with flexWrap + flexDirection sends CPU to 100%"))
- **Packager does not support symlinks:** Symlinks under node_modules, for example, are ignored ([#637](https://github.com/facebook/react-native/issues/637 "[Packager] doesn't resolve modules that are symlinks"))
- **ScrollView sometimes errs with "Cannot find view with tag #XXX":** [#1941](https://github.com/facebook/react-native/issues/1941 "[ScrollView] Cannot find view with tag #XXX")

## 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](https://github.com/facebook/rebound-js) 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:  
  [![](https://cloud.githubusercontent.com/assets/379606/9287504/dc546500-42cc-11e5-8abd-f1215e5370e3.png)](https://cloud.githubusercontent.com/assets/379606/9287504/dc546500-42cc-11e5-8abd-f1215e5370e3.png)
- **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](https://github.com/facebook/react-native/commit/b812b0ee2e1136b409f78f04bc6665f55fd61a6f))
- Fixed ResponderEventPlugin ([e0ea046](https://github.com/facebook/react-native/commit/e0ea04609253ca289890d3799062e53ad6c1d7c6))
- Guard against popping past the first route in a Navigator ([809a2dc](https://github.com/facebook/react-native/commit/809a2dc1d65b12e895bd48043de0fa6ba0093838))
- Fix issue with border width precedence ([f2b3057](https://github.com/facebook/react-native/commit/f2b3057a7cb350b8c41e240ca4188d1518730235))
- Maintain the height of inactive Navigator scenes so that the scroll state is unmodified ([41dd6fe](https://github.com/facebook/react-native/commit/41dd6fe6ea9755069e7a267d61e94fab9372007d))
- Fixed null argument errors for timers and layout animations ([95d1fd1](https://github.com/facebook/react-native/commit/95d1fd142ef8f6ebee1860b7001fd5094b43069e))
- Fixed retain cycle that caused RCTModuleMethods to leak ([6a4b83c](https://github.com/facebook/react-native/commit/6a4b83c16ffc01323a6c78dd7317d218e4505f42))
- 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](https://github.com/MattFoley)! ([#2224](https://github.com/facebook/react-native/pull/2224 "[ListView] Fix RCTScrollView stickyHeader touch passing."))
- Delay sending touches to JS until dependent (native) gesture recognizers fail ([2d66e10](https://github.com/facebook/react-native/commit/2d66e10ec45b9fbbf005d7d110f57c22cf972338))
- Fixed `defaultSource` for Image components ([#2269](https://github.com/facebook/react-native/pull/2269 "[Image] Fix default Image functionality"))
- Fixed waring about "invalid context 0x0" when rendering an image of with dimensions of zero area ([#2278](https://github.com/facebook/react-native/pull/2278 "[Image] Fix invalid CGContext when one dimension of destination Image size == 0"))
- Fix crash when using alert() polyfill due to null callback ([4d81724](https://github.com/facebook/react-native/commit/4d817245f79c10d548abbd541c89ed3ad1ea5cac))

## [v0.9.0](https://github.com/facebook/react-native/releases/tag/v0.9.0) on GitHub ([npm](https://www.npmjs.com/package/react-native), [CocoaPods](https://cocoapods.org/pods/React))


React Native v0.10.0-rc and v0.9.0 released


We often cover UI and aesthetic Components to get your Apps up running.  
This time we don't have much to show, really, but just to plug [Shaheen Ghiassy](https://twitter.com/ShaheenGhiassy)'s work regarding ListView's performances.  
He has then provided his own `SGListView`, with a lovely API, so much that's just a droping for `ListView` itself.

## [react-native-sglistview](https://github.com/sghiassy/react-native-sglistview) on GitHub ([npm](https://www.npmjs.com/package/react-native-sglistview))

> ###### The Problem
>
> The React Native team has done a tremendous job building a robust platform. One oversight, is the memory performance of their ListView implementation. When scrolling down long lists, the memory footprint increases linearly and will eventually exhaust all available memory. On a device as memory-constrained as a mobile device, this behavior can be a deal breaker for many.
>
> ###### The Solution
>
> SGListView resolves React Native's ListView memory problem by controlling what's being drawn to the screen and what's kept in memory. When cells are scrolled off screen, SGListView intelligently flushes their internal view and only retains the cell's rendered bounding box - resulting in huge memory gains.
>
> ###### Usage
>
> SGListView was designed to be a developer-friendly drop-in replacement for ListView. Simply import the package and change the `ListView` references in the render methods to `SGListView`. Nothing else. No fuss, no muss.

Import SGListView

```
var SGListView = require('react-native-sglistview');
```

Change references from `ListView` to `SGListView`.

From:

```
<ListView ... />
```

To:

```
<SGListView ... />
```

Done.


A memory minded implementation of the React Native's ListView


[Chris Scott](https://twitter.com/christocracy) has "just started" porting his [Cordova Background Geolocation](http://transistorsoft.github.io/cordova-background-geolocation/) to React Native. This shift of modules coming from Cordova is something we'd love to see in the upcoming future.  
His work, coming from the expertise of his previous module, is just invaluable (and also greatly documented). Check it out!

## [react-native-background-geolocation](https://github.com/transistorsoft/react-native-background-geolocation) on GitHub ([demo](https://github.com/transistorsoft/rn-background-geolocation-demo))

> Cross-platform background geolocation module for React Native with battery-saving **"circular stationary-region monitoring"** and **"stop detection"**.
>
> This is a React Native implementation of our popular [Cordova Background Geolocation](http://transistorsoft.github.io/cordova-background-geolocation/) plugin, a sophisticated, battery-conscious location-management component for both **iOS** & **Android**.

```javascript
var BackgroundGeolocation = require('react-native-background-geolocation');

var Foo = React.createClass({
  getInitialState() {

    BackgroundGeolocation.configure({
      desiredAccuracy: 0,
      stationaryRadius: 50,
      distanceFilter: 50,
      disableElasticity: false, // <-- [iOS] Default is 'false'.  Set true to disable speed-based distanceFilter elasticity
      locationUpdateInterval: 5000,
      minimumActivityRecognitionConfidence: 80,   // 0-100%.  Minimum activity-confidence for a state-change
      fastestLocationUpdateInterval: 5000,
      activityRecognitionInterval: 10000,
      stopTimeout: 0,
      activityType: 'AutomotiveNavigation',

      // Application config
      debug: true, // <-- enable this hear sounds for background-geolocation life-cycle.
      forceReloadOnLocationChange: false,  // <-- [Android] If the user closes the app **while location-tracking is started** , reboot app when a new location is recorded (WARNING: possibly distruptive to user)
      forceReloadOnMotionChange: false,    // <-- [Android] If the user closes the app **while location-tracking is started** , reboot app when device changes stationary-state (stationary->moving or vice-versa) --WARNING: possibly distruptive to user)
      forceReloadOnGeofence: false,        // <-- [Android] If the user closes the app **while location-tracking is started** , reboot app when a geofence crossing occurs --WARNING: possibly distruptive to user)
      stopOnTerminate: false,              // <-- [Android] Allow the background-service to run headless when user closes the app.
      startOnBoot: true,                   // <-- [Android] Auto start background-service in headless mode when device is powered-up.

      // HTTP / SQLite config
      url: 'http://posttestserver.com/post.php?dir=cordova-background-geolocation',
      batchSync: true,       // <-- [Default: false] Set true to sync locations to server in a single HTTP request.
      autoSync: true,         // <-- [Default: true] Set true to sync each location to server as it arrives.
      maxDaysToPersist: 1,    // <-- Maximum days to persist a location in plugin's SQLite database when HTTP fails
      headers: {
        "X-FOO": "bar"
      },
      params: {
        "auth_token": "maybe_your_server_authenticates_via_token_YES?"
      }
    });

    // This handler fires whenever bgGeo receives a location update.
    BackgroundGeolocation.on('location', function(location) {
      console.log('- [js]location: ', JSON.stringify(location);
    });

    // This handler fires when movement states changes (stationary->moving; moving->stationary)
    BackgroundGeolocation.on('motionchange', function(location) {
        console.log('- [js]motionchanged: ', JSON.stringify(location));
    });

    BackgroundGeolocation.start(function() {
      console.log('- [js] BackgroundGeolocation started successfully');

      // Fetch current position
      BackgroundGeolocation.getCurrentPosition(function(location) {
        console.log('- [js] BackgroundGeolocation received current position: ', JSON.stringify(location));
      });
    });

    // Call #stop to halt all tracking
    // BackgroundGeolocation.stop();
  }
});
```

![Geofences](https://www.dropbox.com/s/4cggjacj68cnvpj/screenshot-iphone5-geofences-framed.png?dl=1)![Settings](https://www.dropbox.com/s/mmbwgtmipdqcfff/screenshot-iphone5-settings-framed.png?dl=1)
