Issue #12

Logo for React Native Newsletter

Special San Francisco edition! Well special for me anyways because I live in Vancouver, Canada, but I am in San Francisco helping out some A1 folks (I learned the term "A1" yesterday and had to UrbanDictionary it) on a React Native project. Also special because it's coming out a Tuesday, wow! A late edition! And shorter than usual! Fancy.

Top News

React Native 0.8.0-rc released
React Native 0.8.0-rc released

Notable new features: the long-awaited animation API, text-decoration styles for Text elements and remote image loading events. This animation API, wow. You have to try it. Check out my Tinder card demo using the Animated API, and @sahrens' talk at React Europe for an in depth look at the API.

This release boasts performance improvements: a switch to io.js, a faster version of the babel transformer, and optimizations by @a2 around removing layout-only View nodes.

Docs for "Animated" are up
Docs for "Animated" are up

I know I'm really milking this one, but I can't emphasize enough how fantastic I think this library is. Click through to read the docs!

Joshua Sierles - React Native playground lightning talk at react-europe 2015 - YouTube
Joshua Sierles - React Native playground lightning talk at react-europe 2015 - YouTube

"Soon after React Native's release, I started working on this tool to help share and test React Native apps: the React Native Playground (https://rnplay.org)"

A great demo of React Native Playground, well played @jsierles.

All ReactEurope presentations up on YouTube
All ReactEurope presentations up on YouTube

Watch, learn, be happy. A big :clap: for all of the presenters, thank you for sharing your knowledge with us!

Highlights from Issues and Pull Requests

Add Image progress examples to UIExplorer
Add Image progress examples to UIExplorer

@unknownexception spent a good amount of time pushing his Image loading progress events that were included in the 0.8.0-rc release, and followed that up promptly with some examples for UIExplorer to ensure that people know how to use it.

Expose rotate x, y, z transforms by @chirag04
Expose rotate x, y, z transforms by @chirag04

This pull request is one in a series that adds support for 3d transforms to style. Very cool stuff when used in conjunction with the Animated api especially. Thanks @chirag04!

App Extension support by @yusefnapora
App Extension support by @yusefnapora

This adds workarounds for the code that was preventing React from compiling when linked against an iOS App Extension target. Some iOS APIs are unavailable to App Extensions, and Xcode's static analysis will catch attempts to use methods that have been flagged as unavailable.

Learn more about app extensions.

Highlights from the community

react-router has a React Native branch
react-router has a React Native branch

@tylermcginnis33 there's a branch, soon as 1.0 ships we'll make it happen, it kinda works right now iirc

Currently, this branch aims to incorporate navigation history. It will be interesting to see how it integrates with Navigator - which works great but could be even more powerful if it were declarative.

Check out the branch.

Exploring Dynamic Layout in Sketch
Exploring Dynamic Layout in Sketch

An interesting experiment that uses React Native's css-layout library to prototype interfaces in Sketch. Seems like a good middle ground between developers and designers, and a good way to get more familiar with React Native's subset of supported CSS declarations.

syrusakbary/react-native-refresher
syrusakbary/react-native-refresher

If the demo gifs are any indication, this looks to be the best pull-to-refresh library out there at the moment. Animations look smooth and it has a clean API, so check it out!

johanneslumpe/react-native-gesture-recognizers
johanneslumpe/react-native-gesture-recognizers

Library built on last week's blog post about gesture recognition in React Native - it's implemented using ES7 decorators, which are basically like macros that wrap a component in some other component to layer on functionality. Think onions. But components. Component-onions. Maybe that's why the syntax is @decoratorName. @ is pretty onion-like.

So yeah, onions aside, check it out if you need custom gesture recognition like pinch, or are interested to see how a decorator-based API can work in React Native. Also johanneslumpe is just a cool human being, so respect.

exponentjs/react-native-scrollable-decorator
exponentjs/react-native-scrollable-decorator

Speaking of onions/decorators, check this other decorator library from the fine exponent duo of @ide and @ccheever. With a @scrollable dusted on top of your component declaration, your component is given the same external api (eg: scrollTo) as a ScrollView.

nulrich/RCTAutoComplete
nulrich/RCTAutoComplete

The only thing better than completing something is autocompleting something. PSA: try to stay away from using RCT for your module prefixes. I get it, I'm a hypocrite because in react-native-video I use RCTVideo. Or am I? Kind of but not so much because this was actually

That's it for now! Ping me on Twitter @notbrent if you have anything that you would like me to share next week.

If you're reading this on the web, you can subscribe to get this delivered weekly to your email here!

Goodbits

Collect and curate content easily for brilliant newsletters. Try Goodbits for free!