Issue #7

Logo for React Native Newsletter

Okay here's the deal: the new delivery day for this newsletter is anywhere between Friday morning and Sunday evening Pacific Time. Anyhow, here it is, enjoy!

Top News

React Native 0.6.0-rc and 0.5.0 released!
React Native 0.6.0-rc and 0.5.0 released!

Click through for the release notes on 0.6.0-rc, which includes some incredible updates such as a component style inspector thanks to @frantic and @jaredly, who joined the React Native team at Facebook just a week ago and is already making his mark. The release includes a slew of other features, fixes and performance improvements, I'd highly recommend checking it out.

0.5.0 is what you've come to expect from 0.5.0-rc so far, but with bug-fixes that have come from Facebook battle testing it within their apps for the past two weeks.

React Podcast - Webpack vs. Browserify
React Podcast - Webpack vs. Browserify

Pete Hunt and Michael Jackson (of React Router fame, not Thriller) sit with the React Podcast folks to discuss Webpack and Browserify. Worth a listen if you want some clarification on the differences and pros/cons of these two tools.

marty-native
marty-native

I despise the naming of Flux libraries as much as the next person, and for some reason marty seems like the worst of all names. That said, name doesn't really matter when it comes to JS libraries because you can always just import it under whatever name you choose.

The React Native specific version of their library was released this week and integrates with their awesome Chrome developer tools; it's definitely worth checking out while rocking out to Johnny B. Goode (please don't).

React Native with Angular 2?
React Native with Angular 2?

“@hashtagserg And Scott is experimenting with ReactNative as a path to build native iOS apps with Angular 2.”

React Native Playground is open source
React Native Playground is open source

We're always looking for contributors on both the web and iOS side, join us in #rnplay on the Reactflux Slack group!

We're planning on submitting the iOS app to the App Store early this week, which means it should be available by this time next year**, exciting!

**sarcasm, maybe in 8-10 days.

Highlights from Issues and Pull Requests

brentvatne/react-native-issues
brentvatne/react-native-issues

You might have noticed that I've started tagging every issue and pull request with a [ComponentName] prefix. Aside from making this easier to visually parse, there are other benefits.

Looking at a list of issues doesn't do much to give you the big picture for what needs work on a repository. So I put together a little app that pulls the issues from Github, parses out the tags and provides a few graphs & data tables to help us better understand the current state of affairs.

The first graphs just sum up the occurrences of tags across issues. The last data table uses number of unique commenters on an issue as a proxy to determine its importance to the community.

If you have any ideas for how we can change this to get more insight, ping me @notbrent on Twitter or create an issue on this repo.

Check it out live, if divshot isn't down for some reason

Directly wrap UITableView with a TableViewIOS component
Directly wrap UITableView with a TableViewIOS component

This is something that the React Native team has tried to do on several occasions but never found a satisfactory solution. Some issues with ListView:

  • It doesn't have re-ordering functionality
  • It doesn't de-allocate/re-use views intelligently, so memory usage grows as you scroll through a large list.

If there are problems that you are interested in solving, your efforts would be much appreciated by the community. This is not something that will be solved by the team at Facebook in the near future, they have other priorities, so this will need to be a community driven effort. Jump into this issue to discuss!

Stop traversing the whole view hierarchy every frame
Stop traversing the whole view hierarchy every frame

This was highlighted in this the 0.6.0-rc release notes and for good reason, @tadeuzagallo commented that "On ~10k views it went from ~20ms to ~0.05ms" - big optimization!

Launch screen white flash
Launch screen white flash

More follow up on this thread by @nicklockwood - expect an official solution to this soon, for now he provides a temporary workaround that allows you to customize the transition from Launch Screen > Intermediate Screen while loading React Native > Your React Native App.

@rxb's take on ScrollView paging
@rxb's take on ScrollView paging

"This is an enhancement for ScrollView that adds the ability to paginate based on a width other than the width of the ScrollView itself. This is a fairly common pattern used on apps like Facebook, App Store, and Twitter to scroll through a horizontal set of cards or icons"

Video of it in action: https://vid.me/aoby

I personally love this PR because I ran into issues with the default pagination and this proposal gives us a lot more control over it!

Maintaining aspect ratio on network images
Maintaining aspect ratio on network images

An interesting proposal from @paramaggarwal to take a network images specified dimensions into account and take those into account when calculating width/height based on flex attributes in order to maintain the aspect ratio. Feel free to chime in with your thoughts!

Highlights from the community

naoufal/react-native-touch-id
naoufal/react-native-touch-id

It really can't get any easier than this to interface with the native touch id api. @naoufal strikes again with his third module in as many weeks - maybe I should make a "naoufal's module of the week" section for this newsletter :p

Automating iOS App Icon Creation
Automating iOS App Icon Creation

Death, taxes, and iOS app icon creation - you can't avoid them. "Automate creation of iOS App Icons using SVG multi-rasterization to PNG with Inkscape and shell scripting."

gilbox/react-native-masked-view
gilbox/react-native-masked-view

View masking can at times be incredibly useful - think for a moment how you might build a semi-transparent overlay with a circle cut out to shine a spotlight on a part of the underlying interface - this type of thing is common in app intro tours. Check this library out for a way to do this type of thing in React Native.

React Native components that you want to see
React Native components that you want to see

I started a discussion thread on discuss.reactjs.org where people can share their component ideas, join in and share your ideas!

chendesheng/ReagentNativeDemo
chendesheng/ReagentNativeDemo

@chendesheng demos integrating the elegant ClojureScript React-based library Reagent with React Native in this repo.

Main source file here
Discuss it on reddit here

jeanregisser/react-native-popover
jeanregisser/react-native-popover

Popovers are great, and @jeanregisser has done the hard work so all you need to do is include his lib and you get them for free. Neato.

bh5-pods/react-native-gcm
bh5-pods/react-native-gcm

I don't claim to have any idea what Google Cloud Messaging is**, but if you care about it and you're reading this newsletter then there is a good chance you will find this module useful.

** Apparently Cyber Criminals (aka criminals) used to use it though, so that's cool.

skevy/react-native-gsap-demo
skevy/react-native-gsap-demo

A follow-up to the mention of using GSAP and React Native a few weeks ago, skevy created an example app that uses Timeline to co-ordinate tweens, very neat!

adamjmcgrath/react-native-simple-auth
adamjmcgrath/react-native-simple-auth

Easily add authentication to your app via Facebook, Twitter, Github, etc. The downside: this uses an in-app browser for authentication, so for apps like Facebook and Twitter where you probably have them installed on your phone already, this library will not use those apps and users will have to re-enter their credentials.

facebook/react-native-applinks
facebook/react-native-applinks

The first external library for React Native that has been released outside of the main repo - it helps you handle incoming and outgoing deep links between native apps. I'll admit I don't totally grok it, so if you want to put together a blog post explaining it and how to use it, that would be fantastic and I will include it in an upcoming newsletter!

CSS-Layout and React ART
CSS-Layout and React ART

In this blog post, @browniefed demos how you might use React ART with css-layout, React Native's layout engine.

lmorchard/react-multiplatform
lmorchard/react-multiplatform

"An experiment to build a React-based app on multiple platforms" - web and native

"Weekend project messing with maps and #reactnative "
"Weekend project messing with maps and #reactnative "

@bsudekum - MapBox employee and the author of react-native-mapbox-gl, put together a neat little weekend project using his library. See the demo here

TouchableBounce
TouchableBounce

One of the lesser known Touchable* components is TouchableBounce - it transforms its children's scaleXY property to create a bounce effect when you tap on it. Click through this link to see the example on rnplay.org

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?

Goodbits.io
Goodbits.io

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

The company is based in Vancouver, Canada and is run by some friends. But more importantly, it's a useful product that I use every week to make this newsletter.

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!