Issue #18

Logo for React Native Newsletter

Happy labour day everybody! Unless you're outside of North America, then happy Monday, suckers! Just kidding, you probably get way more vacation than us North Americans anyways, just let us have this one. React Native 0.11 won't be out until next week, but please keep kicking the tires with 0.11-rc!

Top News

Community Interview #4 - Clay Allsopp
Community Interview #4 - Clay Allsopp

Clay Allsopp (twitter) (github) (medium) works at Palantir, where he uses React Native in Production. I loved this blog post, so naturally I had to spend my Sunday morning catching up with him and I'm so glad that I did! Usually I describe people's background here but since that's covered in the interview, I'll let you click through and read it.

Spero for Cancer on the App Store on iTunes
Spero for Cancer on the App Store on iTunes

"Spero for Cancer is a safe place for cancer fighters, survivors, and supporters to connect and support each other 24/7." Built with React Native! 👌

RubyMotion 4.0: free Starter edition, cross-platform games, watchOS 2.0
RubyMotion 4.0: free Starter edition, cross-platform games, watchOS 2.0

I played around with RubyMotion years ago and had a lot of fun. I even read interviewee-of-the-week @clayallsopp's book on it! While I personally prefer to use React Native, I believe it's valuable to be familiar with alternative approaches for solving similar problems -- and hey, it's free and a long weekend (if you're in North America) so why not give it a try?

A work-in-progress Relay prototyping tool
A work-in-progress Relay prototyping tool

Former Vancouverite @steveluscher, now working at some company called Facebook in California, is building a Relay prototyping tool that will let you easily play with Relay in your browser, "Coming soon to a Relay homepage near you!" Check out a video of it in action by clicking through.

How Facebook Focuses on the Most Important Element of an App - Airbnb Engineering
How Facebook Focuses on the Most Important Element of an App - Airbnb Engineering

Facebook’s React Native iOS framework helps the social network keep its focus on the most important element of a mobile app: the user interface.

React Native gets instrumentation, performance boosts
React Native gets instrumentation, performance boosts

I admit I only included this article for the hilarious overly lens-flared wrench splash image. I guess you can read it if you want to, it couldn't hurt.

Oculus VrScript
Oculus VrScript

Read through this article and tell me it doesn't sound a lot like React Native and Exponent!

"Web Like: where the script is downloaded from the net for each execution and run by a single signed app that we provide (NetHMD). Fully specified by an app-scheme URI, this allows VR experiences to be launched directly from web pages or app-links on Facebook"

"Remote development: where the script is actually executed in an IDE on a PC, communicating with NetHMD over a TCP connection. This allows sub-second code-change to VR change iteration cycles, and the use of a debugger."

Discord - Chat for Gamers on the App Store on iTunes
Discord - Chat for Gamers on the App Store on iTunes

"Discord is the only cross-platform voice and text chat app designed specifically for gamers. With the iOS companion app you can stay connected to all your Discord voice and text channels even while AFK. It is perfect for chatting with team members, seeing who is playing online, and catching up on text conversations you may have missed."

The actual chat view drops down to native (well, React-Inspired ComponentKit) because the team couldn't get the performance that they needed out of ListView, but the rest is React Native! Beautiful work.

Highlights from facebook/react-native

New README for facebook/react-native!
New README for facebook/react-native!

Billionaire playboy and dilettante @ide (pronounced ee-day) spent an hour this afternoon re-writing the README. In his words: "This new README talks more about the react-native project, repository, and contribution process (the old one was more focused on technical details). @brentvatne and I want people to get help and file issues & PRs more effectively. Here's a first draft that we believe helps with that."

How to handle http request timeout with fetch
How to handle http request timeout with fetch

It looks like there isn't any timeout option built into the fetch API yet, but I mention in this issue a few existing discussions about handling timeouts / aborting in general, on both the fetch polyfill and spec reposl. An example of where this might be useful is if you have a large request where it might take a while to parse the JSON, and if the user switches away from the view where that is relevant then you may be better off just aborting that request than letting it potentially drop frames during your navigator transition.

UIExplorer example won't run
UIExplorer example won't run

UIExplorer not working out for you after pulling a newer version of React Native? In this issue I describe a sequence of steps to get it running.

Prepare for Node 4
Prepare for Node 4

Node 4.0 is coming. @ide leads the charge here: "I believe the codebase is in good shape for Node 4.0. It's going to be much better when we can tell people just to get the latest version of Node without any of the io.js confusion."

Text - font size is changing on 0.11.0-rc
Text - font size is changing on 0.11.0-rc

"Just upgraded to 11-rc and all <Text> font sizes are now being affected by accessibility settings. Accessibility is great, but this ended up breaking many of our screens." - beware of this if you plan to upgrade to 0.11.0-rc! The reason this is happening is that allowFontScaling is default to true when it should be false. Edit: Or maybe it shouldn't be? Accessible-by-default seems like the right way to go. Feel free to weigh-in on the issue.

Highlights from the community

oblador/react-native-lightbox
oblador/react-native-lightbox

A beautiful lightbox library. Check out this [demo gif]. It's worth it. Go on. Fine work, @oblador.

christopherdro/react-native-print
christopherdro/react-native-print

"Print documents using React Native"

RNPrint.print(filePath).then((jobName) => {
  console.log(`Printing ${jobName} complete!`);
});;
Youtube Animated Video Slide (Blog Post)
Youtube Animated Video Slide (Blog Post)

"If you haven’t seen it, YouTube allows you to drag the current playing video down to the bottom right corner and have it continue to play while you browse the rest of the app." - this blog post explains one way that you can achieve this effect using Animated.

dsibiski/react-native-embedded-app-example
dsibiski/react-native-embedded-app-example

"A collection of examples for using React Native in an existing iOS application"

@dsibiski has done plenty of iOS work before he got into React Native. At work, he has as much experience as anyone in the community at integrating React Native into existing iOS apps. He kindly put together this repository to share some of his knowledge, what a good guy.

Animated with React-Art - Firework Tap To Shoot (Blog Post)
Animated with React-Art - Firework Tap To Shoot (Blog Post)

Another blog post from @browniefed, in this one he explains how you can make an exploding-fireworks-style effect with ReactART.

A tip from @gpblv
A tip from @gpblv

“#reactnative tip: use the propType of the native component if you are just passing a prop to it”

@rhaker wraps a bunch of small modules
@rhaker wraps a bunch of small modules

Flashlight control & control whether device should sleep are features that I hadn't seen wrapped yet for React Native, neato!

ryanmcdermott/react-native-login
ryanmcdermott/react-native-login

"react-native-login is an example React Native project showing how to use a WebView and react-native-cookies to login to your existing backend."

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!