Issue #28

Logo for React Native Newsletter

Hi folks! I am back from my unannounced holiday break! If anyone is interested in helping me out with this newsletter so that we don't have a month between issues ever again, please reach out to brent@exponentjs.com!

Assorted good things

ericvicenti/navigation-rfc
ericvicenti/navigation-rfc

Eric Vlad Vicenti. The man, the beard, the Navigator. The Navigator component that you know and (maybe) love from React Native was written by Eric, and since it was released both he and @hedgerwang have spent a lot of time thinking about it and learning from how the community and teams at FB used it and what was needed from it. This repo is Eric's attempt to take all of that data and create a new Navigator, a better, more customizable, modular, and flexible Navigator. Check this repo out and give him some feedback. It's looking great so far.

Let's write a mobile game with React Native (Blog post)
Let's write a mobile game with React Native (Blog post)

"This is the first part of a tutorial that will show you how to write a cross-platform mobile game with React Native. We're going to replicate my casual game "Alpha Reflex" which can be freely downloaded from the App Store and the Play Store. The game challenges players to find randomized letters in alphabetical order as fast as possible."

My biggest benefit of open source wasn’t what it was supposed to be (Blog post)
My biggest benefit of open source wasn’t what it was supposed to be (Blog post)

"The natural mindset of frameworks/libraries/tools that you use is that there are really smart people called contributors who work on the project. Only those contributors are capable of actually contributing to the project. Everyone else just uses it and files issues when they find them. This isn’t accurate and if that’s your paradigm, whether by design or by accident, your forgoing special learning opportunities."

Exponent React.js Conf Contest
Exponent React.js Conf Contest

The contest ends on January 20th! This could be your last chance to get a ticket for React.js Conf in February as the tickets are entirely sold out. Just make a fun little app in React Native and publish it to Exponent, ta-da. Maybe make a little game like Alpha Reflex, mentioned above!

How we updated our JS libraries for React Native (Blog post)
How we updated our JS libraries for React Native (Blog post)

"Our mission at Algolia is to make sure that every website or app has the best search experience possible. That's why we created several clients for iOS (in Swift and objective-C), Android, Windows/C# and JavaScript. But we’re always looking for new ways to help developers and are very interested in the possibilities introduced by React Native, Facebook’s latest initiative to change the way we build apps"

TaskRabbit React Native Launch (Blog post)
TaskRabbit React Native Launch (Blog post)

"This week, we launched our updated Tasker app to the community. This is not the app on the app store, but rather the one the Taskers use to get their work done. Functionally, not much has changed since the last release. But underneath, the app has been completely rewritten in React Native."

niftylettuce/frappe
niftylettuce/frappe

"Remotely shake your Android devices (including emulators) using a menubar applet and the hotkey ⌘+SHIFT+R"

If you're like me and often work from cafes, you feel silly every time you have to shake your phone to reveal the dev menu. Or if you use Genymotion for Android development you die a little bit inside everytime you have to move your mouse cursor around to press a button that opens up a menu to open up a menu to finally let you reload. Well this mac toolbar app solves this problem for you by binding ⌘+SHIFT+R to send the shake event to all of your connected devices (or a specific one, if you prefer). Open source too, so go ahead and make it work for iOS if you're so inclined!

How to write a codemod (Blog post)
How to write a codemod (Blog post)

"Codemods allow you to transform your code to make breaking changes but without breaking the code. Codemods take a JS file as input and turn them into Abstract Syntax Trees (AST) and apply transformations on this AST later converting them back to JS again"

I know I have pushed codemods a lot in recent issues but you know what, they are awesome.

React Native in an Existing iOS App. Delivered. (Blog post)
React Native in an Existing iOS App. Delivered. (Blog post)

"Two months ago, we at delivery.com released our new iOS app. With so many web-turned-mobile developers on the iOS team, we were incredibly excited about the possibility of building new views using JavaScript. One month ago, we released our first three React Native views into production. This guide can help you do the same."

Oauth 2 with React Native (Blog post)
Oauth 2 with React Native (Blog post)

In this post, "we’re going to be using React Native to make an iPhone app that can interact with a third party API secured by Oauth 2.0"

Getting Started with React Native from Packt (Book)
Getting Started with React Native from Packt (Book)

Ethan Holmes, who is from the same city and went to the same university as me but I have never in my life spoken with online or otherwise despite our mutual interest in React Native and Vancouver being a fairly small city, along with a fellow named Tom Bray have published the second book that I have seen for React Native so far (the other being Learning React Native). I have not read this new book but just so you know, it exists, so there you go, take that information and do what you like with it! It looks like it's $5 on the Packt store right now too.

A gentle introduction to React Motion (Blog post)
A gentle introduction to React Motion (Blog post)

"React is great, I am having a lot of fun playing around with it for the past few weeks. I decided to take a shot and try out React Motion. It was a little tricky in the beginning to wrap my head around the API, but eventually it all started to make sense, it took time though. Sadly there are no proper React Motion tutorials I could find online, so I decided to write this one up, as a resource for fellow devs and as a reference for myself."

CBS Sports Franchise Football (New app)
CBS Sports Franchise Football (New app)

"Compete in Challenges and Daily League Showdowns in the Ultimate Simulation."

If you like football and React Native, this might be for you! I like React Native but not football and I checked it out anyways!

Highlights from facebook/react-native

React Native 0.17 and 0.18-rc released!
React Native 0.17 and 0.18-rc released!

The big changes from 0.17 are the addition of WebView on Android, alert on Android, and onLoad support for images on Android.

The big changes from 0.18-rc "use React from NPM" (this was the most upvoted issue on ProductPains) and open sourced ART for Android.

Click through on each of those links for the complete release notes!

Hot Module Replacement (HMR) on the way
Hot Module Replacement (HMR) on the way

I've tried it out on master and it still hasn't all landed but hopefully soon we'll have hot module replacement built in to React Native out of the box! Check out Dan Abramov's hot reloading talk from ReactEurope here to see why this is very exciting! Thanks @martinbigio!

IncrementalPreview
IncrementalPreview

"The problem addressed here is expensive components that can tie up the JS thread during render, making the app unresponsive to taps, the canonical example being scroll loading of expensive rows. The approach is to slice up the rendering into separate chunks of work separated by setTimeout calls.

Everything wrapped in <Incremental> is rendered sequentially via InteractionManager. The onDone callback is called when all descendent incremental components have finished rendering, used by <IncrementalPresenter> to make the story visible all at once instead of the parts popping in randomly."

Very cool work here by @sahrens, check out the YouTube video he links to in the PR for a demo.

Open-source ART for Android
Open-source ART for Android

"This is already open-source on iOS, albeit badly documented. Now Android too!" - awesome stuff, now we have access to these lower-level drawing primitives on Android :) Very useful for charts -- ART is used for the charts that you see in Facebook Ads Manager on iOS and Android. An open source example of a chart in ART is github-pulse-ios, an incomplete project I started a while ago to re-create @tadeuzagallo's fantastic Mac desktop app. Feel free to finish it up and release for iOS and Android!

Add <Text> shadow support
Add <Text> shadow support

"Add three new TextStylePropTypes for <Text>

  • textShadowOffset
  • textShadowRadius
  • textShadowColor"

Kudos to you @Kudo! Ugh that was bad even for me.

Add support for global alert() on Android
Add support for global alert() on Android

You can remove your alert polyfills now (mine used ToastAndroid) and just use alert('lol wut') on Android now. Thanks @mkonicek :)

Fixed border smearing issue
Fixed border smearing issue

"The iOS border rendering code did not follow the CSS spec in cases where the sum of adjacent border radii was greater than the width of the view, resulting in drawing glitches such as pixel smear and borders appearing stretched or squashed.

This diff brings our implementation closer to spec-compliance in these cases. I also fixed a longstanding issue with ghostly diagonal lines appearing at the corners due to antialiasing rounding errors!"

You know already that @nicklockwood is responsible for this fix.

Implement Android's dispatchViewManagerCommand interface on iOS
Implement Android's dispatchViewManagerCommand interface on iOS

"Android implement ViewManager methods via a dispatch method on UIManager, whereas iOS implements them by exposing the methods on the view manager modules directly.

This diff polyfills Android's implementation on top of the iOS implementation, allowing the same JS API to be used for both."

Nice to see these unifying on a single interface! @nicklockwood, obviously.

Added getImageSize method
Added getImageSize method

"This diff adds a getSize() method to Image to retrieve the width and height of an image prior to displaying it. This is useful when working with images from uncontrolled sources, and has been a much-requested feature.

In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data.

A fully supported way to preload images will be provided in a future diff."

Guess who?

Maintain cursor position when TextInput value is changed programmatically
Maintain cursor position when TextInput value is changed programmatically

If you've read my article "How TextInput works" in React Native for Curious People you'll be familiar with this issue, so glad to see it resolved on iOS! (it already worked on Android)

"This is useful for applying input masks in the onChange handler that you then need to propagate down to the native component. In our case, we add commas as the user enters a price. Without this change, the cursor will end up in the wrong place when the text is transformed in our onChange handler." Great job @cava23, and impressive core strength.

StyleSheet.hairlineWidth
StyleSheet.hairlineWidth

Originally this was proposed as PixelRatio.pixel() but became StyleSheet.hairlineWidth after some discussion. Essentially this is a better version of the 1 / PixelRatio.get() pattern. Thanks @corbt for this nice little API improvement, fantastic follow through from issue to PR to responding to feedback.

Load assets from same folder as JSbundle (Android)
Load assets from same folder as JSbundle (Android)

"If the JSBundle was loaded from the assets folder, this will load images from the built-in resources. Else, load the image from the same folder as the JS bundle." Awesome stuff!

Highlights from the community

zmxv/react-native-sound
zmxv/react-native-sound

"React Native module for playing sound clips" - if I had an email module for playing sound then you would hear me clapping right now.

artemyarulin/om-next-cross-platform-template
artemyarulin/om-next-cross-platform-template

A template "for writing cross platform Om-Next components for the browser and for mobile devices using React Native" - I started off with React via Om / ClojureScript, so I just had to mention this :)

react-native-material-design
react-native-material-design

"React Native UI Components for Material Design"

AlbertBrand/react-native-android-tablayout
AlbertBrand/react-native-android-tablayout

Finally someone wrapped this! Well played @AlbertBrand.

wwayne/react-native-nba-app
wwayne/react-native-nba-app

I'll admit that I am unable to sit down and watch an entire sports game these days (although, as a Canadian, I did watch hockey growing up) but they do produce a lot of interesting data for charts, photos, videos, and logos, so there are lots of neat UIs that you can build around them! Check out this open NBA app, it's quite pretty! Nice one @wwwayne! (I like the three w's better because it's like world wide web wayne)

jrans/react-native-smart-scroll-view
jrans/react-native-smart-scroll-view

Interesting approach to handle jumping between different TextInput fields in a ScrollView! I would personally prefer to see tabIndex implemented so we're closer to the browser in that regard, but this could be useful for you if you need this today :)

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.

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!