
If you're fascinated about "Universal JavaScript" code, there's enough in the making to get started.  
We previously covered [gl-react-native](https://github.com/ProjectSeptemberInc/gl-react-native)'s OpenGL bindings for React Native and technics to [share your application logic on web and mobile](http://www.reactnative.com/share-your-application-logic-on-web-and-mobile/).

But today we're focusing on Components that can be shared between the web version of React and React Native, a concept that isn't something [really](https://twitter.com/Vjeux/status/631913854918918144) [new](https://twitter.com/Vjeux/status/639163817184858112), but has been formalized since [React v0.14](http://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#two-packages-react-and-react-dom).

We're obiouvsly talking about Components and code that don't depend on native features.  
Here is a roundup of libraries and work that is in the making:

## [react-native-web](https://github.com/necolas/react-native-web) ([Nicolas Gallagher](https://twitter.com/necolas))

> The core React Native components adapted and expanded upon for the web, backed by a precomputed CSS library

## [react-native-for-web](https://github.com/KodersLab/react-native-for-web) ([Mattia Manzati](https://twitter.com/MattiaManzati))

> A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)

## [react-multiplatform](https://github.com/lmorchard/react-multiplatform) ([Les Orchard](https://twitter.com/lmorchard))

> This is an experiment to build a React web app and a React Native iOS app that share as much as possible.


Make your React Native app work in a browser


How many times, as a Web developer, you pointed to [Google Places API Javascript docs](https://developers.google.com/places/javascript/) and installed (updated?) it.  
How weird did it look on your Mobile devices?

Oh, maybe you're a [iOS](https://developers.google.com/places/ios-api/) or [Android](https://developers.google.com/places/android-api/) developer.  
Have you ever wished it just was one `npm install` away?

We're in React Native's heavens now, meet [Farid Safi](https://twitter.com/FaridSafi) and its cross platform Component for Google Places autocomplete.

## [react-native-google-places-autocomplete](https://github.com/FaridSafi/react-native-google-places-autocomplete)

> Customizable Google Places autocomplete component for iOS and Android React-Native apps
>
> ### Features
>
> - Places autocompletion
> - iOS and Android compatibility
> - Places details fetching + ActivityIndicatorIOS/ProgressBarAndroid loaders
> - Customizable using the styles parameter
> - XHR cancellations when typing fast
> - Google Places terms compliant
> - Caching of results

```javascript
var GooglePlacesAutocomplete =
  require("react-native-google-places-autocomplete").create({
    placeholder: "Search",
    minLength: 2, // minimum length of text to search
    autoFocus: true,
    fetchDetails: true,
    onPress(data, details = null) {
      // details is provided when fetchDetails = true
      console.log(data);
      console.log(details);
    },
    query: {
      // available options: https://developers.google.com/places/web-service/autocomplete
      key: "YOUR API KEY",
      language: "en", // language of the results
      types: "(cities)", // default: 'geocode'
    },
    styles: {
      description: {
        fontWeight: "bold",
      },
    },
  });
```

![Google Places autocomplete ](https://raw.githubusercontent.com/FaridSafi/react-native-google-places-autocomplete/master/Assets/screenshot.png)


Customizable Google Places autocomplete component for iOS and Android React Native apps


Looking to get started writing React Native Apps?  
[Stanley Yang](https://twitter.com/stanleycyang) has published a detailed and descriptive tutorial about the basic concepts of React Native.

## [Tutorial: Handcrafting an iOS Application with React Native (and lots of love)](http://stanleycyang.github.io/technology/reactjs/native/ios/2015/10/04/react-native-tutorial-with-navigation-and-animation.html) blogpost

## [rn animation tutorial](https://github.com/stanleycyang/rn_animation_tutorial) on GitHub

> ### Tutorial Objectives:
>
> - Provide an overview of **React Native** and why it is amazing
> - Teach the fundamentals of **Navigator** in a React Native iOS application
> - Break down the **Animated API** and perform amazing animations
> - Tap into **gesture detection** with PanResponder in iOS


Handcrafting an iOS Application with React Native (and lots of love)


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

> 0.13.0-rc has been published to npm, Center, and CocoaPods.
>
> The 0.13 release includes preliminary support for installing `react-native` with npm 3 and running the packager on Windows. Please understand they might not work as well as they do with npm 2 on Mac yet, since this is the first release that supports them.
>
> **A note about Windows as a dev environment:** As RN iOS requires a Mac and most of the programmers at Facebook and the RN developers use Macs, support for OS X is a top priority. However, we would like to support developers using Linux and Windows too. We believe we'll get the best Windows support from people using Windows on a daily basis. So to begin with, **Windows support for the development environment is an ongoing community responsibility.** This can mean filing issues and submitting PRs, and we'll help review and merge them. We are looking forward to your contributions and appreciate your patience.

## Breaking Changes

- **setImmediate batching:** React updates (e.g. `setState`) scheduled with `setImmediate` are now batched. Most apps will notice only a performance improvement, but it may reveal bugs in code that was relying on the precise timing semantics of React during `setImmediate` processing. [4c74f01](https://github.com/facebook/react-native/commit/4c74f01b85cb26a23292c44118ad1e28f43deaa3)
- **Node 4.0:** This is not a new requirement but we have made it more visible: [#2547](https://github.com/facebook/react-native/pull/2547 "[Node 4.x] Update the packager's version check message for Node 4.0") [#3296](https://github.com/facebook/react-native/pull/3296 "[Node] Add Node >= 4 requirement to package.json and packager/package.json")
- **ScrollView's `keyboardShouldPersistTaps`** defaults to false: [166a96b](https://github.com/facebook/react-native/commit/166a96bcee5ac5407be3dc3cc8803789e42b07a2)
- **Warn when style props are not under `style`:** make sure properties like `width` or `backgroundColor` are specified in the `style` prop. [2ea3b93](https://github.com/facebook/react-native/commit/2ea3b9378498913b85691c69bad29acd89c08334)
- **Flow 0.17:** Flow has been upgraded. [49a0ae7](https://github.com/facebook/react-native/commit/49a0ae7c32c959fb2cf950d1acea3e6b5cbf12be)
- **Removed RCTCache on iOS:** [63a37be](https://github.com/facebook/react-native/commit/63a37be1dde02894c3d452f4b4e9c1fd87a4fbfc)
- **Remove `header_mappings_dir` from Podspec** so that all header files are flattened when installing with CocoaPods. This improves compatibility with react-native-fbsdk, for example: [#3248](https://github.com/facebook/react-native/pull/3248 "Fix build process for react-native-fbsdk libraries.")

## Known Issues

- **React Dev Tools do not work:** [facebook/react-devtools#229](https://github.com/facebook/react-devtools/issues/229 "[React Native] Devtools can't find React within the Web Worker")
- **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"))
- **3D touch breaks the gesture system due to an iOS 9.0 bug:** [#3082](https://github.com/facebook/react-native/issues/3082 "[Gestures] PanResponder blocking child Touchable on 6s and 6s plus")
- **WebSockets on Android can fatal when closing:** [#3347](https://github.com/facebook/react-native/pull/3347 "[Android] Check that WS connection is open before closing it on failed. Fixes #3346")
- [Other known issues](http://facebook.github.io/react-native/docs/known-issues.html)

## New Features

### JavaScript

- **`const`** is enabled by default: [#2955](https://github.com/facebook/react-native/pull/2955 "support es6.constants by default. Fixes #2932")
- **`import`** is enabled by default: [#3175](https://github.com/facebook/react-native/pull/3175 "enable es6 module syntax")
- **`Number.EPSILON/MIN_SAFE_INTEGER/MAX_SAFE_INTEGER`** are polyfilled: [de717a8](https://github.com/facebook/react-native/commit/de717a8379d3c969fb3a373934376911badaf10e)
- **Animate to hex and named colors:** instead of `rgba` syntax you now can use hex or names like "black" in Animated output ranges. [#3177](https://github.com/facebook/react-native/pull/3177 "Support hex values in outputRange")
- **`processColor`** is faster: [babdeb3](https://github.com/facebook/react-native/commit/babdeb33ba8b4d0ca0a0b004ff103b4796b41188)
- **New `Switch` component** that wraps iOS and Android's switch components: [36cbe74](https://github.com/facebook/react-native/commit/36cbe74f990369c793966b052bee4af3f2f4e401)
- **Preserve original globals before polyfilling them:** If the JS environment supports a global property like `fetch`, it will still be polyfilled but the original implementation will be saved as `originalFetch`. This lets you do things like assign `global.fetch = originalFetch` if you want to use Chrome's built-in `fetch` when debugging in Chrome. [#3293](https://github.com/facebook/react-native/pull/3293 "Preserve original global properties when polyfilling them")
- **Export the different Navigator navigation styling for iOS and Android and a new `navigationStyles` prop:** [#3028](https://github.com/facebook/react-native/pull/3028 "[Navigator] Export per-platform NavigatorNavigationBarStyles for consistent styling")

### iOS

- **Pause JS runloop:** Pause the CADisplayLink when there are no JS tasks to process to conserve energy. [e727fc8](https://github.com/facebook/react-native/commit/e727fc817bd8a61d47387408637d53a30fc66f00)
- **Use `bundleForClass` instead of `mainBundle`** when looking up resources: [9076b71](https://github.com/facebook/react-native/commit/9076b71ac307d2a45b30efec41414862638c6aeb)
- **Disable RCTAssert completely in production builds:** [6ca8f48](https://github.com/facebook/react-native/commit/6ca8f4836d20585fef83168801b0b0265f71278c)
- **Inline Images:** Image components can be children of Text components. Note that all properties of the image except its source are ignored. [91e6c98](https://github.com/facebook/react-native/commit/91e6c98ecdf5c9116bd894475ce3f3ed601fc5bc)
- **Optimize loading local JS bundles from the filesystem:** [7fe7a2a](https://github.com/facebook/react-native/commit/7fe7a2a26b748ea9d115b1a04d4d4e187b6f6a05)

### Android

- **Autoplay GIFs:** Fixed [#2997](https://github.com/facebook/react-native/issues/2997 "Gif not moving in android")
- **Enable background initialization of ReactApplicationContext:** [dcae4ba](https://github.com/facebook/react-native/commit/dcae4bada046c68f028e59e805da7430a8539894)
- **Remote images in ToolbarAndroid:** [5ca5ec7](https://github.com/facebook/react-native/commit/5ca5ec76889040c7c65b4a73bfe42f6e675eb0bc)
- **`borderWidth` and `borderColor` on Images:** [2cc8acf](https://github.com/facebook/react-native/commit/2cc8acf2e3734397eb2b732e8219a18e8d0ebb6f)
- **New `ViewPagerAndroid` component** that provides paginated scrolling. Check out the example in the UIExplorer to see how it works and how to use it. [0a41965](https://github.com/facebook/react-native/commit/0a419650ce1a362f5301a62eabe802b8f4010f8e)
- **New WebSocket support on Android** with an API similar to the iOS version: [#2839](https://github.com/facebook/react-native/pull/2839 "Implement WebSocket module for Android. Fixes #2837")
- **Add a ProGuard config:** [a7b23df](https://github.com/facebook/react-native/commit/a7b23df510016058dfb23dab90df10a9af187e09)

### Packager

- **Reject module collisions:** If you are using the Facebook-proprietary `@providesModule` pragma, the packager will now explicitly reject collisions: [9293e54](https://github.com/facebook/react-native/commit/9293e54085fc834778e1d25746e9d1875088e30d) [502d277](https://github.com/facebook/react-native/commit/502d277ff2a6bc6d589865e35e47998390dccf7d)

### Other

- **Refactored React Native attribute reconcilation:** [6c5024e](https://github.com/facebook/react-native/commit/6c5024ec585662cfba8391f98d23cb12ed8256ad) [8e3ce0f](https://github.com/facebook/react-native/commit/8e3ce0ff98bae068f4bbbc91394bfcb9394c1522) [ac5b754](https://github.com/facebook/react-native/commit/ac5b7548d2eabbd6556c3f950e0d5e2243ea0989)
- **Use platform-independent dir separator in Android build file:** [#2961](https://github.com/facebook/react-native/pull/2961 "Fixed to use ; instead of : as the path delimiter on Windows, for NDK_MODULE_PATH")
- **CLI has `--verbose` flag** to debug slow project initialization. You will need to update your global npm package for `react-native-cli` to get this feature. [#3193](https://github.com/facebook/react-native/pull/3193 "Add --verbose option to react-native-cli (fixes #2797)")
- **Packager server is more modular** and split into several middleware. This doesn't affect users of RN but should make it a little nicer for contributors. [35f9ac8](https://github.com/facebook/react-native/commit/35f9ac89a7554f1fcc0371ae09297245ffd8f24f) [f37ad56](https://github.com/facebook/react-native/commit/f37ad56afd74279669abfaad0650a8ab81ce9069) [f980c33](https://github.com/facebook/react-native/commit/f980c330732b832befd5bc606325ba5901200631) [22e88f2](https://github.com/facebook/react-native/commit/22e88f206939c02142a443a6bee8cf8d72e0efde) [0a835b7](https://github.com/facebook/react-native/commit/0a835b7994b57cba545be062f8c882c763ecbe50) [42d7563](https://github.com/facebook/react-native/commit/42d756310aef37317f1da6a51ea05e596b4f0247)
- **Lots of documentation updates.** A thank you to the contributors!

## Bug Fixes

- **End iOS Slider interaction when touches are cancelled:** [8f13560](https://github.com/facebook/react-native/commit/8f13560fd58eaaa2029f025e2c721268efdbd17d)
- **Clear images only if they have been removed from the view hierarchy:** previously images were removed even if they were moved within the view hierarchy. [a4ef7ab](https://github.com/facebook/react-native/commit/a4ef7abebb01a3f968aae41c84d878b3bc93e025)
- **Multiline JS `import` statements are now parsed:** [#1939](https://github.com/facebook/react-native/issues/1939 "[Packager] DependencyResolver fails to handle ES6 modules import statements with new lines")
- **JS WebSockets implement EventTarget:** [#2599](https://github.com/facebook/react-native/pull/2599 "Implement EventTarget interface for WebSocket.")
- **Preserve Android React instance when handling exceptions:** [3dcc234](https://github.com/facebook/react-native/commit/3dcc234efd8dc9f39588e11f2d4ea2ac8df34f39)
- **Set `scrollsToTop = NO` for RCTTextInput placeholders:** [#3129](https://github.com/facebook/react-native/pull/3129 "[TextInput] Set scrollsToTop = NO for UITextViews")
- **Cancel pending timeouts when Touchable components are unmounted:** [#1152](https://github.com/facebook/react-native/issues/1152 "[TouchableMixin] Should cancel timers on unmount")
- **Support npm packages that require package.json:** [#2949](https://github.com/facebook/react-native/issues/2949 "When requiring outside library, transform process hangs")
- **Better error message when loading non-existent image URIs on iOS:** [#3127](https://github.com/facebook/react-native/issues/3127 "[Image] No suitable image URL loader found for")
- **Check if Android React instance is destroyed when adding profiling option to dev menu:** [787895e](https://github.com/facebook/react-native/commit/787895e9039eb6e5e1cb22fb96f5cfc8f911032d)
- **Make sure ListView call `onEndReached` even when there are very few rows:** [b0bdd4e](https://github.com/facebook/react-native/commit/b0bdd4e45d6de4a8f60cffe8d82f063381088f6c)
- **Protect against Android SQLLiteFullExceptions for AsyncStorage:** [ea8d0b6](https://github.com/facebook/react-native/commit/ea8d0b6c1f3053b1a1c38b8b66c401a76e40e31c)
- **Fix touches when the Android keyboard is visible:** [c805157](https://github.com/facebook/react-native/commit/c805157cac6acbb74690f209fe7bfd9ea51f8e55)
- **Fix crash due to thread-unsafe race condition on iOS when reloading:** [cb8b656](https://github.com/facebook/react-native/commit/cb8b656a82ad0105679f14b02cbec5fbeaea9cd3)
- **Use correct spans in Android shadow Text nodes:** [9f1dab6](https://github.com/facebook/react-native/commit/9f1dab69c133841c8da3b67e0a8ded3891b12bb4)


React Native v0.13.0-rc released


Word is out [Reactive2015](https://reactive2015.com/) Conference is taking place in Europe (Bratislava, Slovakia) on November 2-4.  
Some of the [most charismatic](https://reactive2015.com/schedule_speakers.html#team) members of the React's community are going to share their unique insights.

While tickets are still up for [grabbing](https://reactive2015.com/),  
[Brent Vatne](https://twitter.com/notbrent/) had the chance to give out one for free, so he setup a [contest](https://gist.github.com/brentvatne/2cd6d5d5f92e907e9630) to select the best React Native App for this Conference.

> Contest entries are in! Four fine folks have built apps for Reactive2015 - the winner will receive their choice of an autographed photo of @vjeux himself (yeah, feel the regret) or a ticket to the Reactive 2015 Conference. We are going to have a cocktail party in a castle while eating food prepared by chefs that serve the prime minister of Sloavakia, isn't that ridiculous? Oh and 25 amazing talks. See the entries below and cast your vote before Friday at noon PT!

Our chance is to both vote for any of them and, of course, appreciate their great features, some crazy good (_no spoilers_).

---

## [Ken Wheeler](https://twitter.com/ken_wheeler)

### [App entry](https://github.com/kenwheeler/reactive2015) on GitHub ([Vote it](https://github.com/brentvatne/react-native-newsletter/issues/2)!)

### Schedule

![Schedule ](http://i.imgur.com/yI6Scix.gif)

### Speakers

![Speakers ](http://i.imgur.com/PnDsUDy.gif)

### Map

![Map ](http://i.imgur.com/iZmGcWU.gif)

### Social

![Social ](http://i.imgur.com/tC8AjT3.gif)

---

## [Daniele Zannotti](https://twitter.com/dzannotti)

### [App entry](https://github.com/dzannotti/reactive2015) on GitHub ([Vote it](https://github.com/brentvatne/react-native-newsletter/issues/3)!)

### Info Screen

![Info Screen ](http://i.imgur.com/mqUwRdA.gif)

### Map Screen

![Map Screen ](http://i.imgur.com/qKyUnsD.png)

### Speakers Screen

![Speakers Screen ](http://i.imgur.com/O5DhOo5.gif)

### Schedule

![Schedule ](http://i.imgur.com/C3jjdM9.gif)

---

## [Jason Brown](https://twitter.com/browniefed)

### [App entry](https://github.com/browniefed/rncontest) on GitHub ([Vote it](https://github.com/brentvatne/react-native-newsletter/issues/4)!)

### App Demo

![ App Demo](http://i.imgur.com/S4HoQyx.gif)

### Also a not so hidden but hidden easter egg :)

![Hidden easter egg ](http://i.imgur.com/ONxeJ33.gif)

---

## [Kureev Alexey](https://twitter.com/KureevAlexey)

### [App entry](https://github.com/Kureev/Reactive2015) on GitHub ([Vote it](https://github.com/brentvatne/react-native-newsletter/issues/5)!)

### Schedule screen

![Schedule ](https://habrastorage.org/files/8df/6f7/930/8df6f793095344e7930444855598fea0.png)

### Talk screen

![Talk ](https://habrastorage.org/files/565/4c2/2db/5654c22db92c44518c9e12cc9ea37763.png)

### Profile screen

![Profile ](https://habrastorage.org/files/87b/134/902/87b1349028514bab80a5cb115a7215de.png)

### Filters screen

![Filters ](https://habrastorage.org/files/5b5/8a0/71a/5b58a071a608472ab17a557fb8afd6cb.png)

---


Reactive 2015 Conference App contest (open for votes)


Do you think you you can keep up the pace with React Native and its community?  
We just recently talked about [react-native-emoji](https://github.com/jorilallo/react-native-emoji) and today we're learning that we're getting [inline image support](https://github.com/facebook/react-native/commit/91e6c98ecdf5c9116bd894475ce3f3ed601fc5bc) in React Native.  
We also mentioned [Facebook's Reactions](https://www.facebook.com/zuck/videos/10102412343501081/), and a couple of days after we have a great tutorial straight from the man who animates all the things: [Jason Brown](https://twitter.com/browniefed)!

## [How to make Facebook Reactions](http://browniefed.com/blog/2015/10/11/react-native-how-to-make-facebook-reactions/) blogpost

> Facebook reactions is a new liking system that Facebook is trialing on a limited basis. Why wait for them to roll it out when we can roll it out ourselves.
>
> Thanks to Engadget who created a gif of the animations from a youtube video. After a little slicing up and conversion from white to transparent we have a nice bunch of terrible animated gifs… but they’re animated so deal with it. Like/Love aren’t transparent since imagmagick was destroying the white in them.
>
> This code will target .12 and above, running on .11 seemed to cause some slightly different layout issues. I’ve fixed them on RNPlay, so just a heads up. The difference is add height:50 to our likeContainer.

![Facebook Reactions in React Native ](http://i.imgur.com/dFLU8SI.gif)
