
We've seen [previous](https://github.com/magus/react-native-facebook-login) [efforts](https://github.com/brentvatne/react-native-login) from the community in making the Facebook iOS SDK accessible from React Native. While we surely appreciate them there's no doubt that an official wrapper from Facebook for their iOS SDK is more than welcome.

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

> React Native FBSDK is a wrapper around the iOS Facebook SDK, allowing for Facebook integration in 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](https://developers.facebook.com/docs/ios)

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

#### react-native-fbsdkcore

- [Graph Requests](https://github.com/facebook/react-native-fbsdk#graph-requests)
- [App events](https://github.com/facebook/react-native-fbsdk#app-events)

#### react-native-fbsdklogin

- [Login Button](https://github.com/facebook/react-native-fbsdk#login-button)
- [Login Manager](https://github.com/facebook/react-native-fbsdk#login-manager)

#### react-native-fbsdkshare

- [Share dialogs](https://github.com/facebook/react-native-fbsdk#share-dialogs)
- [Share API](https://github.com/facebook/react-native-fbsdk#share-api)


React Native FBSDK: a wrapper around the iOS Facebook SDK


Our man, our React Native man [Joel Arvidsson](https://github.com/oblador/), is back again with a new Component.  
This time he relies on the [`react-native-overlay`](https://github.com/brentvatne/react-native-overlay) to produce a Lightbox Component.

## [react-native-lightbox](https://github.com/oblador/react-native-lightbox) on GitHub ([Example](https://github.com/oblador/react-native-lightbox/tree/master/Example))

> Images etc in Full Screen Lightbox Popovers for React Native

![Lightbox](https://cloud.githubusercontent.com/assets/378279/9074360/16eac5d6-3b09-11e5-90af-a69980e9f4be.gif)

```javascript
var Lightbox = require("react-native-lightbox");

var LightboxView = React.createClass({
  render: function () {
    return (
      <Lightbox>
        <Image
          style={{ height: 300 }}
          source={{
            uri: "http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg",
          }}
        />
      </Lightbox>
    );
  },
});
```


Full screen Lightbox for React Native


Carly Kubacak from [The BHW Group](https://twitter.com/BHWGrp) has written a comprehensive and well written guide to the React Native Camera Roll API.  
Additionally she lists many Components and React Native APIs to cover this useful end to end scenario.

## [Accessing iPhone camera roll Images with React Native](https://thebhwgroup.com/blog/accessing-iphone-camera-roll-images-react-native) blog post

> React Native is a framework for [iPhone app development](https://thebhwgroup.com/services/ios-app-development) that uses native elements for the user interface and JavaScript to run and define the application logic. The framework exposes a [subset of native iOS elements](https://facebook.github.io/react-native/docs/getting-started.html) and also allows developers to create new, custom modules to perform actions that are not supported by the framework out of the box. The open source community has created a number of custom modules ([icons](https://github.com/corymsmith/react-native-icons), [image picker](https://github.com/marcshilling/react-native-image-picker), [camera](https://github.com/lwansbrough/react-native-camera), etc.) that can be easily added to any React Native project.
>
> There are multiple ways to access iPhone images using built-in React Native controls and custom modules. In this guide, I’ll cover how to use the React Native CameraRoll API to display a user's camera roll images and get the base64 encoded version of an image when it is selected. If you don’t have an existing React Native project, you can follow [this guide](https://facebook.github.io/react-native/docs/getting-started.html#content) to get started.

![Camera Roll](https://thebhwgroup.com/sites/default/images/React%20Native%20Image%20Picker.png)


Accessing iPhone camera roll Images with React Native


## [v0.9.0-rc](https://github.com/facebook/react-native/releases/tag/v0.9.0-rc) release note:

> 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](https://github.com/facebook/react-native/commit/725053acfeba4c7f2a21ac47ae8100588a710476).

We wrote a [codemod](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) 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](https://facebook.github.io/react/docs/forms.html#controlled-components):** 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](https://github.com/facebook/react-native/commit/961c1eb42904a4d5516fd7939ba14bc0625309d3)). 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](https://github.com/facebook/react-native/issues/1941 "[ScrollView] Cannot find view with tag #XXX")

## Deprecations

- **Navigator's `onItemRef` prop was removed:** Use a callback ref directly on the component you return from `renderScene` instead ([4f904b5](https://github.com/facebook/react-native/commit/4f904b5d68d1176cabf51b3a476d11b61fb07bd1))

## 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](https://github.com/facebook/react-native/commit/961c1eb42904a4d5516fd7939ba14bc0625309d3))  
  [![rewrite](https://cloud.githubusercontent.com/assets/90494/9019994/62eab30c-37ac-11e5-8e1b-0f5bc353cfbc.gif)](https://cloud.githubusercontent.com/assets/90494/9019994/62eab30c-37ac-11e5-8e1b-0f5bc353cfbc.gif)
- **Horizontal ListView:** ListViews now check the `horizontal` prop and calculate layout accordingly ([09236cc](https://github.com/facebook/react-native/commit/09236ccbe74775359dff14404214b7082e34cc8e))
- **Add VerticalUpSwipeJump and VerticalDownSwipeJump to NavigatorSceneConfigs:** Check out a demo of it [here](https://drive.google.com/file/d/0BwY3eLp5Z-sccjlaQUtZMlFBVGc/view). ([#1822](https://github.com/facebook/react-native/pull/1822 "Added transitions 'VerticalUpSwipeJump' and 'VerticalDownSwipeJump' in…"))
- **Text with onPress handlers get highlight:** Highlight is the WebKit grey rounded corner background.  
  [![highlight](https://cloud.githubusercontent.com/assets/90494/9019997/67d19a8e-37ac-11e5-9447-24b84ebaa993.gif)](https://cloud.githubusercontent.com/assets/90494/9019997/67d19a8e-37ac-11e5-9447-24b84ebaa993.gif)
- **Examples for Image download events in UIExplorer:** Check them out here: [74f8055](https://github.com/facebook/react-native/commit/74f8055692893ddc8e756f1a262c0488a205d529)
- **New style properties:** `perspective`, `rotateX`, `rotateY` and `rotateZ` are now available, and a demo of them is available under the Transform example in UIExplorer.  
  [![perspective](https://cloud.githubusercontent.com/assets/90494/9020087/82598b70-37af-11e5-8a72-b8b0d8d47521.gif)](https://cloud.githubusercontent.com/assets/90494/9020087/82598b70-37af-11e5-8a72-b8b0d8d47521.gif)
- **Add support for files in application home directory:** Works as you would expect, application home directory can be referenced with the ~/ prefix. ([90dd7a1](https://github.com/facebook/react-native/commit/90dd7a13f0a3997517f8c560bc53e213efc88049))
- **Add preventDefault to Navigator events:** Gives you more control over your routing ([326a66b](https://github.com/facebook/react-native/commit/326a66ba077a790211bf8d8842fdb784f1b38aac)).
- **tintColor for remote Images:** [d5943b0](https://github.com/facebook/react-native/commit/d5943b0e47428fda78121a5b51c7a40a646af865)
- **Translucent tab bar:** Bringing the `TabBarIOS` api in line with `NavigatorIOS`, it now supports the `translucent` prop. ([9936a24](https://github.com/facebook/react-native/commit/9936a2406d4c886abfeca50b2c8527e354ab654e))
- **Local notification API:** `PushNotificationIOS` now exposes `presentLocalNotification` and `scheduleLocalNotification` functions. ([a8cb47e](https://github.com/facebook/react-native/commit/a8cb47e0118219fa66216cd230912fd82465eb5d))
- **NavigationIOS shadow can be hidden:** `NavigatorIOS` has a new prop called `shadowHidden` that allows you to hide the hairline shadow ([2cb634b](https://github.com/facebook/react-native/commit/2cb634bb0b564a5e4ddadd259df560a53c91e455))

### 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](https://github.com/facebook/react-native/commit/b34a85f4da87c62656ca9d29c5085a46e768d147))

### 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](https://github.com/facebook/react-native/commit/70feab9d50ed50b200c8399f854d41cf252c6962))
- **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](https://github.com/facebook/react-native/commit/fa4c570d33de1f7c0ab17b5da4b3b23a73d63d47))

### 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](https://github.com/facebook/react-native/commit/d1a82c4af120c7c8562d8c4774c939bd59a4cd77))
- Disable focus on `TextInput` with `editable` set to `false` ([5006eca](https://github.com/facebook/react-native/commit/5006eca4a84e0d57a1f57e611081338cbc2fa2dd))
- 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](https://github.com/facebook/react-native/commit/f2d65ea85be5aa0d7bdf87a639d869afc18245d1))
- Pin Babel version to ensure nothing breaks between releases, eg: [the spread operator](https://github.com/facebook/react-native/issues/2134) caused some issues in a minor version.

```
  </div>
```


React Native 0.9.0-rc released


If you're ready to go public with your React Native Apps, then chances are you're going to need and meet the [offline bundle](http://facebook.github.io/react-native/docs/running-on-device-ios.html#using-offline-bundle).  
If you're ready to take it to next level then you might check [Arnaud Rinquin](https://twitter.com/arnaudrinquin)'s work to put the React Native bundle on continuous deployment with CircleCI and host it on an Amazon S3 bucket.

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

> An experimentation to see how cool is React Native:
>
> - Bring continuous deployment to iOS
> - Build native app without any Objective-C / Swift knowledge
> - Enjoy a super-fast dev workflow

![Songkick App ](http://i.imgur.com/eIymyIP.png)


React Native experimentation through a Songkick App


Our friend [Joel Arvidsson](https://github.com/oblador) (as in we like him for his work very much) keeps being prolific and sharing his work for us to take advantage of it.  
Check his new Parallax component:

## [react-native-parallax](https://github.com/oblador/react-native-parallax) on GitHub ([Example](https://github.com/oblador/react-native-parallax/tree/master/Example))

> **NOTE: This module requires React Native 0.8+**

```javascript
var Parallax = require('react-native-parallax');

var ParallaxView = React.createClass({
  mixins: [Parallax.Mixin],

  render: function() {
    return (
      <ScrollView
        scrollEventThrottle={16}
        onScroll={this.onParallaxScroll}
      >
        <Parallax.Image
          style={{ height: 200 }}
          scrollY={this.state.parallaxScrollY}
          overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
          source={{ uri: 'http://loremflickr.com/640/480' }}
        >
          <Text>This is optional overlay content</Text>
        </Parallax.Image>
      </ScrollView>
    );
  },
```

![Parallax effects](https://cloud.githubusercontent.com/assets/378279/8894786/81b493f8-33c3-11e5-9a5a-8695642c6ee7.gif)
