Issue #6

Logo for React Native Newsletter

I know, I know, this was supposed to be sent out on Friday. Well you'll be happy to know that I wasn't procrastinating by sipping a beer on the beach; I spent most of my day on Friday, half of my Saturday and a good portion of the morning on Sunday triaging issues on the React Native repo - we're now down from almost 400 to about 180 open issues. Shoutouts to @ide, @jsierles, @cdro_, @ccheever for helping out, and to everyone on the React Native team for being so responsive to my mentions!

Top News

React Native Release Process
React Native Release Process

I pulled the trigger on last week's newsletter a bit earlier than I should have, and almost immediately afterwards @vjeux posted an update to the React blog about the new React Native release process.

In short, last Friday a release candidate for 0.5.0 was cut, and two weeks from that day (this coming Friday), the 0.5.0 release will be shipped along with any bugfixes that came in during those two weeks. At the same time 0.5.0 is shipped, a release candidate for the next version, including new features that were added during the previous two weeks, will be cut and made available on npm.

React Native Newsletter now available via Exponent!
React Native Newsletter now available via Exponent!

@ccheever has converted this newsletter into a React Native app that you can load via Exponent, I highly recommend checking out - it allows us to do some incredibly cool things like embed examples of the components directly inside of the newsletter.

Warning: Put down your coffee when you're checking this out or you will spit it all over your screen when you hit the Sudoku example.

If you have already installed Exponent, click here from iOS device to open up this week's newsletter directly (you might need to update your Exponent version).

If you haven't, click here from your iOS device, then press "Install Now" - it'll download right to your phone, then just navigate to exp://exp.host/@newsletters/6 inside of the exponent browser.

I'm a contributor to React, Immutable.js, and GraphQL at Facebook. AMA!
I'm a contributor to React, Immutable.js, and GraphQL at Facebook. AMA!

@leebyron is the uncomfortably smart man behind Immutable.js and member of the TC39 JavaScript committee. Check out this AMA on CodeMentor, and if you haven't seen it already his talk "Immutable Data and React" from React Conf.

require('react-native') and jest test fails
require('react-native') and jest test fails

Jest is a popular tool for unit testing with React, but it doesn't quite work as you'd expect out of the box with React Native. Check out this thread for a discussion about how you can make it work better, and please chime in with your techniques for testing in React Native to help us put together some documentation and perhaps even standards that ship with react-native init.

 Expose global as `self` too
Expose global as `self` too

"In JavascriptCore self is not defined. Libraries like bluebird for example rely on self being the global object instead of window, as it works in web workers too." If you run into this issue, check out the solution by @johanneslumpe's react-native-browser-polyfill that came out of the discussion.

Firebase now works with React Native!
Firebase now works with React Native!

Announced at Google IO, "if you’re like me, you’re really excited about React Native, a new way to build (native!) mobile applications with JavaScript. Today, I’m happy to announce that thanks to the efforts of our developer community, Firebase and React Native now work together."

Create a map with React Art by @browniefed
Create a map with React Art by @browniefed

A fun article that walks you through creating a simple, customizable map using React Art and OpenStreetMap tiles

Updates on React Native Playground
Updates on React Native Playground
  • Added support for VIM Keybindings in the editor
  • Added an alternate "dark" theme for the editor
  • Made a bunch of progress on the mobile app, led by @jsierles, @dsibiski, @cdro_ and @jlumpe
  • Made progress towards getting the accompanying app into an app-store ready state: screenshot of updates to the app
  • If you're interested in helping out, get in touch with me @notbrent on Twitter!
The Evolution of Flux Frameworks
The Evolution of Flux Frameworks

@dan_abramov's musing on the past present and future of Flux frameworks, worth a read if you're into that kind of architecture.

Highlights from Issues and Pull Requests

"Inspect Element" lands in the Developer Menu
"Inspect Element" lands in the Developer Menu

A sign of things to come, the first iteration of "Inspect Element" has landed on master.. Excuse the bro-terminology but I'm pretty stoked. @tadeuzagallo is winning my heart with his FPS monitor last week and "Inspect Element" this week.

See it in action in beautiful gif form here

UIBlocks don't flush at the correct time
UIBlocks don't flush at the correct time

If you need to invoke native code to act on one of your views, for example to animate it as is done with AnimationExperimental, be sure to check this comment out. This can be very useful also when you're wrapping a native library such as a map and want to be able to make direct function calls on it via JavaScript.

Bonus: @nicklockwood shares the internal POP integration code - you probably don't want to use it because the new animation API is coming soon and react-tween-state is a reasonable stop-gap until then, but worth the read.

Small delay displaying RCTRootView after a push - @marcshilling
Small delay displaying RCTRootView after a push - @marcshilling

Discussion around how to avoid rendering delays when using multiple RCTRootViews inside of a hybrid vanilla iOS / React Native app.

@nicklockwood also points out a new feature that we can look forward to seeing in a release very soon: RCTContentDidAppearNotification

Automatic cookies
Automatic cookies

"Please feel free to correct me.I've tried to use the fetch api to login against a service which sets a cookie in case of success.The session cookie gets correctly set and subsequent requests to the same service pass authentication.."

Little known fact: cookies are actually set with fetch in React Native. There is no built in support for managing these cookies, but @joeferraro wrote react-native-cookies to fill that gap.

Can't pass in initial arguments to instantiate native view in RCTViewManager
Can't pass in initial arguments to instantiate native view in RCTViewManager

This is a common problem when creating custom components: you need certain props for initialization, but you can't have access to those in the init function, and you need more than one of them to be set before you can perform the initialization. Check out this thread for a solution.

"Unknown" component names in Chrome devtools got you down?
"Unknown" component names in Chrome devtools got you down?

Well @spicyj has the cure for your blues, this PR fixes the issue so that now all of your components will be appropriately named in the 'React' tab of Chrome devtools.

Fixed crash in RCTText due to NSTextContainer/NSLayoutManager
Fixed crash in RCTText due to NSTextContainer/NSLayoutManager

I know this one has bit more than a handful of people in the issues, so you'll be relieved to hear that this should make it into a release very soon.

Replace jstransform with Babel
Replace jstransform with Babel

Last week we mentioned that it was coming soon, this week I share with you the commit that makes it happen.

Highlights from the community

ericvicenti/react-native-community
ericvicenti/react-native-community

react-native-community has been overhauled - it is no longer a place for component listings, but rather for articles, talks, apps, and other things that do not fit on react.parts. Please submit anything you come across there in the form of a PR!

alexissan/ReactNativeWorkshop
alexissan/ReactNativeWorkshop

The example project code and slides from a React Native workshop given by alexissan in Madrid.

naoufal/react-native-accordion
naoufal/react-native-accordion

Another useful component from @naoufal, check it out if you have a need for hiding/revealing information in a list based on touches.

brentvatne/react-native-device-clock-format
brentvatne/react-native-device-clock-format

Cultural sensitivity in the form of a React Native plugin

christopherdro/react-native-sudoku
christopherdro/react-native-sudoku

Seemingly as a sort of meta-puzzle game, @christopherdro's puzzle was to create a Sudoku puzzle game in React Native. Spoiler: he solved it.

oblador/react-native-keychain
oblador/react-native-keychain

"Keychain Access for React Native

Currently functionality is limited to just storing internet and generic passwords. Wider exposure of the underlying API coming."

Shuangzuan/RCTRefreshControl
Shuangzuan/RCTRefreshControl

Wraps the iOS ODRefreshControl library to give you pleasant pull-to-refresh to your ListViews and ScrollViews.

dancormier/react-native-swipeout
dancormier/react-native-swipeout

"iOS-style swipeout buttons that appear from behind a component"

Well done @dancormier!

turley/react-native-asciimage
turley/react-native-asciimage

Drawing is hard, why can't we just use ASCII art and have a computer make it look nice for us? If you didn't figure it out by now, that was a rhetorical question and this is exactly what this library does by leveraging the ASCIIMage library, which also has a desktop app that gives you an instant preview of your beautiful art (screenshot)

Friends of the newsletter

Appetize.io
Appetize.io

"Online web based iOS Simulators and Android Emulators. Stream mobile apps in the browser with html5 and javascript." - that's what their og:description meta tag says; it's true and they do a damned good job at it. They do a great service to the React Native community by hosting the simulators for rnplay.org, but we chose to reach out to them and get them involved because, simply put, they were the best solution we could find for the job.

Check out their embed page for example, their API gives you so much control and with very little effort. You can upload an app for 100 minutes free of simulator time, so why not give it a try?

I do to not receive any money whatsoever for sharing this information, I'm just happy to return their gracious favour to the community of hosting React Native Playground

Goodbits.io
Goodbits.io

"Newsletters should take minutes, not hours. Goodbits helps you quickly build email campaigns."

A local company run by some friends and a useful product that I use every week to make this newsletter. I'm hoping that by mentioning them here that they won't make me pay for this service. Guys? Yeah?

Check them out if you have a need for a tool that removes the incidental complexity of sending out a newsletter.

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!

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