Issue #27

Logo for React Native Newsletter

Assorted good things

React Native Team AMA on Reddit, Tues Dec 15!
React Native Team AMA on Reddit, Tues Dec 15!

“The React Native team will be doing a Reddit AMA on Tuesday, December 15 from 8:00am - 10:00am PST, join in and ask us anything! ANYTHING! 😅”

React Native 0.16 released!
React Native 0.16 released!

The rc suffix has been dropped and a couple of nice fixes, including "Added PullToRefreshViewAndroid" and "Android view shadow" have been cherry picked in.

React.js Conf 2016 Diversity Scholarship and Talk Proposal deadlines are TODAY, Sunday December 13 at 23:59 PST!
React.js Conf 2016 Diversity Scholarship and Talk Proposal deadlines are TODAY, Sunday December 13 at 23:59 PST!

Re: Diversity Scholarship - "I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it's important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.

When we ran this program last year, we had over 200 people apply for only 10 tickets. There were so many people that we wanted to bring in but we couldn't. The results were still awesome, and we had bright individuals from around the world attending who would have otherwise been unable to. These attendees took part in discussions at the conference and brought perspectives that we might not have otherwise seen there.

This year we're excited to bring back the scholarship, but we've set aside 40 tickets because we really believe that it's important to do our best to make sure we have an even more diverse audience." - @zpao

React.js Conf 2016 Contest
React.js Conf 2016 Contest

Our first contest was a lot of fun, but we've upped the stakes this time -- we have two tickets up for grabs for React.js Conf.

"React.js Conf tickets will be very hard to get" said @sebmarkbage on Twitter. In the JavaScript Developer Survey Results also linked below, React came out on top in response to the question "What frameworks do you use?". After speakers / diversity tickets, organizers etc, there are fewer than 300 spaces at the conference. In a single block of SOMA there are probably at least 300 React users that would want to attend.

So here we have it: an opportunity to scratch an itch and work on a small hobby project with React Native, draw some attention to it (we will share all apps for voting), while at the same time increasing your odds of getting a ticket to the conference! Additional prizes include a recursive signed portrait of a yet-to-be-named React/React Native team member holding the portrait of @vjeux from our previous contest and an Exponent hoodie for the most viewed app.

Exponent - Android preview released!
Exponent - Android preview released!

Full disclosure: I work at Exponent.

We're really proud of what we've put together in this app but it's just the start. I can't think of a better way to spend five minutes than downloading this app, if you own an Android phone. You will see things that you did not think were possible.

"On the developer side, we are making it so that people can write just JavaScript -- and not worry about Xcode or Android Studio [or App Stores] -- and then have a React Native experience they can use and share much more quickly.

On the user side, we are trying to create an ecosystem of instant mobile apps that you can use just by tapping on them. For example, if you open up Exponent on Android, you can see a few examples there. If you tap on Floaty Plane, it downloads the game over the Internet and you can start playing it immediately. And if you tap on the Pomodoro timer, it will download that from the Internet and you can start using that, but you don't have to have either one "installed" or downloaded in advance before you use it. And if the developers of either of those change the software, you get the new version the next time you load it. "

With all of these "instant mobile apps" you can also add the icon to the home screen, just swipe down your notification drawer and click on the pin icon in the Exponent notification bar.

"How TextInput works" an article in React Native for curious people
"How TextInput works" an article in React Native for curious people

"React Native is powerful, so much so that it is can seem magical to the untrained eye. Call me boring if you like, but I do not like it when things are magical. I want to understand how and why they work, to be able to predict what happens when I do x and to be able to change that behaviour if I desire.

React Native for curious people is an ever-growing series of articles about React Native that are the antithesis of tutorials; we do not attempt to explain how to accomplish any specific task, but rather aim to teach how React Native does what it does. The slight-of-hand behind the magic, if you will."

These articles will only be available through the Exponent app on iOS or Android, because we make heavy use of inline-examples powered by React Native to demonstrate the concepts that we are explaining. You'll see it on the featured list as soon as you open the Exponent app, or you can click through here to check out the source on Github.

If you're reading this on your phone and already have Exponent, just click here to go directly to the articles.

Evolving Complex Systems Incrementally (Presentation video)
Evolving Complex Systems Incrementally (Presentation video)

jscodeshift parses your JavaScript source files into an AST which you can then manipulate similar to how one manipulates the DOM, and then print the source out again. This is useful for making API changes throughout your codebase that would be difficult and error-prone using just regular expressions.

I learned about jscodeshift watching this talk by @cpojer earlier in the week and I was an immediate convert. The next day I wrote my first "codemod" using @fkling's incredible AST explorer. This codemod converts require calls to import, check it out here -- click the transform toggle at the top to enable it if you don't see 4 panes.

On the road to Calypso by Matías Ventura (Blog post)
On the road to Calypso by Matías Ventura (Blog post)

"About eighteen months ago my team at Automattic set upon building an extravagant experiment for the WordPress.com interface. It was to become the most important, demanding, and rewarding project I’ve worked on at Automattic. Two weeks ago, we were finally able to unveil it to the world, and open sourced the project."

Writing a 'trampoline' in assembly for profiling (Blog post)
Writing a 'trampoline' in assembly for profiling (Blog post)

Get some insight into some of the low-level performance work that @tadeuzagallo has been working on these days! Well worth a read, you'll definitely learn something

JavaScript Developer Survey Results
JavaScript Developer Survey Results

Worth a gander to get a feel for the current state of the JavaScript ecosystem.

Ionic Framework vs React Native (Blog post)
Ionic Framework vs React Native (Blog post)

A nice comparison of building the same app in Ionic and React Native. One factual inaccuracy -- the Ionic app did not include Crosswalk, which would have made the file size larger and improved performance / smoothed out browser inconsistency on 4.x devices. Overall worth the read though!

TrackPacer - A Nerdy Overview (Blog post)
TrackPacer - A Nerdy Overview (Blog post)

"Trackpacer is a digital rabbit, a pacing system for track and cross country athletes. 400 meters of LEDs laid along the inside of a track, and controlled from an iOS app that allows you to set distance, pace, and color of multiple "pacers" simultaneously."

React Custom Renderer using Web Workers (Blog post)
React Custom Renderer using Web Workers (Blog post)

"TL;DR; A custom renderer for ReactJS that uses Web Workers to run the expensive Virtual DOM diffing calculations"

Highlights from facebook/react-native

Animated.multiply and Animated.add to combine animated values
Animated.multiply and Animated.add to combine animated values

"The .interpolate() API of Animated values is quite effective to accomplish transformations based on a single animated value, but currently there is a class of animations that is impossible: animations being driven by more than one value."

var scale = Animated.add(panY, offset).interpolate({
  inputRange: [...],
  outputRange: [...],
});

add: "Creates a new Animated value composed from two Animated values added together"

multiply: "Creates a new Animated value composed from two Animated values multiplied together"

Improve Text perf
Improve Text perf

"Most apps create tons of text components but they are actually quite heavy because of the the Touchable mixin which requires binding tons of functions for every instance created.

This diff makes the binding lazy, so that the main handlers are only bound if there is a valid touch action configured (e.g. onPress), and the Touchable mixin functions are only bound the first time the node is actually touched and becomes the responder.

ScanLab testing shows 5-10% win on render time and memory for various products."

Use lazy getters to reduce `require('react-native')` overhead
Use lazy getters to reduce `require('react-native')` overhead

"This diff switches the properties of the ReactNative object to lazy getter functions, which defers the require until the module is actually requested.

This doesn't prevent unused modules from being included in the JS bundle, but it will prevent them from being initialized unless/until they are used."

Add Clipboard module for iOS and Android
Add Clipboard module for iOS and Android

Pasteboard for iOS becomes Clipboard, and support for it has been added to Android.

import Clipboard from 'react-native'

Clipboard.get(content => {
  console.log(content);
});

Clipboard.set('new contents);
Add loadingIndicatorSrc to Image on Android
Add loadingIndicatorSrc to Image on Android

"Similarly to source, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network."

Add rotateX and rotateY transforms to Android Views
Add rotateX and rotateY transforms to Android Views

Not much to say here. Inching us that much closer to platform parity! Oops! It looks like I included this link last week, my bad!

precomputeStyle usage: Sometimes I'm dumb
precomputeStyle usage: Sometimes I'm dumb

Read this if you have ever used precomputeStyle, probably because of my docs on setNativeProps. tl;dr: you don't need to use it.

Open source the Android NetInfo module
Open source the Android NetInfo module

Yet another step towards platform parity, this time by @bestander, who recently joined the React Native team in London!

LayoutAnimation support for Android RN
LayoutAnimation support for Android RN

It's back, and this time to stay!

Initial FlatUIImplemenatation
Initial FlatUIImplemenatation

"This patch adds an alternative UIImplementation based on an idea of creating UI hierarchy off-the-main-thread (everything but Views), flattening ReactShadowNode hierarchy and displaying it within a single View when possible. While NativeViewHierarchyOptimizer allows removing layout-only RCTViews, this allows removing RCTView, RCTText and RCTImage.

This is an initial bare-bones implementation that doesn't really draw anything, only lays out the shadow nodes. Followup diffs will add missing features."

Moved React Native Android unit tests to open source
Moved React Native Android unit tests to open source

@bestander is on a roll -- this commit opened the door to collaborators outside of FB running the "shipit" command, meaning that there are now a handful more people who can land PR's, which should hopefully improve the time to merge!

Avoid interrupting scrolling in nested scrollviews
Avoid interrupting scrolling in nested scrollviews

ProductPains seems to be working for us! We didn't realize how big of an issue this was for the community until we moved it over to ProductPains and saw the flurry of upvotes. In 0.17 this will be fixed! (See the ProductPains discussion here)

Highlights from the community

Eat or Not
Eat or Not

Curious how long you need to spend doing certain activities to burn a given amount of calories? This React Native app helps you with that calculation. Neat idea and solid execution!

Accio - On-demand Delivery
Accio - On-demand Delivery

"Accio delivers anything you want, from anywhere you want, to anyone in Victoria [BC, Canada]. On-demand." Special shout out to these folks who are just a short ferry ride away from my home of Vancouver! Give this app a download and swipe around it -- they're off to a very solid start!

TAGGR
TAGGR

"TAGGR will change the way you shop, forever..." - well they're certainly ambitious! Check out this React Native app.

Mobabuild
Mobabuild

"Mobabuild is your new League of Legends companion! You can browse builds and guides with your mobile device." another new React Native app.

exponentjs/fluxpybird
exponentjs/fluxpybird

@nikki93 built a game he calls "Floaty Plane", which you will immediately recognize as being inspired by "Flappy Bird", but there's a twist: each tick of the game loop is an action dispatched through Redux, and consequently he was able to easily implement rewinding. So when your plane crashes, just hold down on the screen and all of your actions will be rewinded until you release the touch.

To make it even more interesting, @nikki93 also built a repl that you can connect to and change game configuration variables and dispatch actions.

Try it out here on Exponent if you have the app installed, or click through to see the repo.

exponentjs/react-native-loading-container
exponentjs/react-native-loading-container

"A container component that takes care of loading/catching timeouts/retrying"

Check out the example that's included in the repo -- it demonstrates integrating LoadingContainer into your app by making a basic /r/reactnative client. Or try it on Exponent here, if you have Exponent installed on your phone.

niftylettuce/frisbee
niftylettuce/frisbee

An "API wrapper for ES6's fetch method. Easily make HTTP requests to your API."

bartonhammond/snowflake
bartonhammond/snowflake

"A React-Native Android iOS Starter with single code base using Redux, Parse.com, Jest"

Neson/react-native-system-notification
Neson/react-native-system-notification

"Android system notifications for React Native."

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. They are also allowing us to use their simulators within the React Native docs! 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!

Exponent
Exponent

With Exponent you can create a new React Native project in one click and deploy it with a second click, making it available to anyone else who has the Exponent app (available on the App Store and Play Store). On Android, each of the apps opens in a new activity in the multi-tasker and can be saved to the home screen, like any other app. Over the next few months we will be rolling out other exciting features like dead-simple push notifications and support for popular native modules. Did I mention Exponent enough yet in this issue? No? Exponent. Exponent.

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!