Issue #19

Logo for React Native Newsletter

Top News

React Native for Android
React Native for Android

I'm sure by now you've all heard that this is available, but I'm saying it again because I'm so excited about it. Click through for instructions on how to get set up. Keep in mind while using it that it will still be some time before React Native for Android catches up to its iOS counter part in terms of feature parity.

Check out the Known issues section of the documentation for the upcoming component roadmap and some information about platform differences that won't be going away in the near future, if at all. For example, overflow: hidden is the default behaviour for all Views on Android, and this cannot be changed -- this is a result of how rendering works on Android. There aren't many of these issues but knowledge is power, my friends.

Try it out, post issues that you run into and contribute back fixes, show the team how much you appreciate the hard work they put into open sourcing this over the last few months. These folks did an amazing job now let's give them a hand!

React Native Playground gets Android support!
React Native Playground gets Android support!

Click through to give Android a try on the React Native Playground - amazing work by @jsierles, @dsibiski and @jruokangas to create the Android version in a matter of days! Also shoutout to appetize.io who hosts the simulator :)

If you haven't been there in a while you'll also be pleasantly surprised by the beautiful new design. Go, click.

These guys put in a lot of work on React Native Playground and receive nothing but good old feels in return at the moment. If you or your company are interested in sponsoring the site in any way, be sure to reach out!

Relay out of technical preview!
Relay out of technical preview!

Read more about it in this great post by Timothy "yungsters" Yung. Also worth checking out is this Relay Community Roundup by Steven "steveluscher" Luscher.

GraphQL out of technical preview!
GraphQL out of technical preview!

Yet another release from Facebook this week. :clap: :clap: for Lee "leeb" Byron and team!

Most React Rally talks up on Youtube!
Most React Rally talks up on Youtube!

I had a lovely time in Salt Lake City, now I can relive the feeling of being overtired and under-caffeinated in the comfort and convenience of my own home -- and so can you! You can't attend the karaoke and listen to @vjeux and I sing "Chop Suey" though. That, thankfully, was not filmed.

React Native for Android: How we built the first cross-platform React Native app
React Native for Android: How we built the first cross-platform React Native app

"We were able to ship Facebook's first fully React Native app on two platforms, with native look and feel, built by the same team." - a worthwhile read, written by the Ads Manager team.

@Scale presentation videos up on YouTube
@Scale presentation videos up on YouTube

Couldn't make it out to San Jose for the conference? Didn't know about it? Well just watch the videos because it's too late now. Next year though!

Highlights from facebook/react-native

Added mechanism for directly mapping JS event handlers to blocks
Added mechanism for directly mapping JS event handlers to blocks

Probably not of much interest to people who care little about the internals of React Native, but this is another lovely commit by @nicklockwood:

"Currently, the system for mapping JS event handlers to blocks is quite clean on the JS side, but is clunky on the native side. The event property is passed as a boolean, which can then be checked by the native side, and if true, the native side is supposed to send an event via the event dispatcher."

"This diff adds the facility to declare the property as a block instead. This means that the event side can simply call the block, and it will automatically send the event.."

How to hide topbar black prompt box: "loading from x.x.x.x:8081"
How to hide topbar black prompt box: "loading from x.x.x.x:8081"

Some people don't like this prompt, even in development mode. I think that's silly because I enjoy it. But hey, go for it, your app your rules, I respect that. Click through to find out how to get rid of it.

How to preload / prefetch images for later use in ImageView?
How to preload / prefetch images for later use in ImageView?

This one's a bit old but good, @hayeah points out a nice solution for preloading images.

Why do unhandled promises disappear?
Why do unhandled promises disappear?

Read this then I promise you, you will learn something by the time you are done. Go on, I'll await.

Binding the navigation bar with the underlying scene
Binding the navigation bar with the underlying scene

A useful discussion outlining various approaches for handling button presses from your navigation bar inside of the current scene.

Highlights from the community

An iOS Developer on React Native — iOS App Development — Medium
An iOS Developer on React Native — iOS App Development — Medium

This article was written by Marc Shilling, one of the developers behind the very cool Discovery VR app. It is a "super thoughtful/honest/thorough review of ReactNative from an iOS developer's perspective" says Jordan Walke. When challenged by a Twitter troll on the usage of the word super, he elaborated: "It's super because author made themselves vulnerable, introspected on emotions that drive technology." Indeed, indeed.

AppHubPlatform/AppHubStarterProject
AppHubPlatform/AppHubStarterProject

I had the pleasure of using AppHub while working on Iodine's Start app recently. Overall the experience is very smooth! Check out this starter project that they've provided for a demo of how you might integrate AppHub into your app for super easy OTA deploys.

If you would prefer an open source solution that isn't quite as far along but worked on by some very clever people, check out react-native-versions. Both are amazing tools.

Walmart React
Walmart React

"Home of the React projects of Walmart Labs" - I noticed a few React Native components pop up on here this week, welcome to React Native, Walmart Labs!

chirag04/react-native-mail
chirag04/react-native-mail

This is the first React Native library that I saw with native Android support -- I think @chirag04 might have had early access though ;) Check it out for some insight into how to build native modules, the perfect complement to the Native Modules and Native UI Components guides on a relaxing weekend of React Native hacking.

Fixing React-Native App Following Upgrade
Fixing React-Native App Following Upgrade

"I have an iOS app that I've been working on with React-Native and I was so excited when they announced support for Android yesterday. Unfortunately it took me a long time to get things working, and adding Android support...." - protip for those of you updating to 0.11 to save yourself 5-10 minutes.

Wrap platform specific components and let the packager do the work
Wrap platform specific components and let the packager do the work

@dsibiski demonstrates a pattern for wrapping platform-specific components that may be useful to avoid forking your code. Cool thing, guy!

iodine/react-native-drawer-layout
iodine/react-native-drawer-layout

The young and talented @mfmendiola and I wrote a pure-JS implementation of DrawerLayoutAndroid for use on iOS, and then wrapped them in another component (similar to the link from @dsibiski above) to make this component cross-platform with an identical API! Maybe I'm biased but it's my favourite side menu around ;) Check out this demo video on YouTube showing how we use it in our app -- we even added a little parallax for good measure.

Friends of the newsletter

Appetize.io
Appetize.io

I love these folks. They make rnplay.org possible and in doing so support the React Native community in a big way. I am not paid to advertise for them, I'm happy to advocate for products that I believe in (see: this newsletter about React Native) - so check them out if you have any need for an in-browser simulator for iOS or Android! Go and upload an app, the first 100 minutes of simulator use are free!

Goodbits
Goodbits

"Newsletters should take minutes, not hours. Goodbits helps you quickly build email campaigns." That's their thing. True story, I once wore a Goodbits tshirt while cycling across the Golden Gate bridge. If you've read this far, you should probably at least try out Goodbits, because clearly you have time on your hands.

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!