Issue #10

Logo for React Native Newsletter

Hey folks, short and sweet one one this week! React Europe talks start on Thursday and I can't say I've ever been more excited for a conference that I am not attending. Next week I'll do my best to summarize any news from the conference that I can possibly glean from my perch in Vancouver, Canada. Have a great week!

Top News

React Native 0.7.0-rc, 0.7.0-rc.2 and 0.6.0 released!
React Native 0.7.0-rc, 0.7.0-rc.2 and 0.6.0 released!

Click through for a full list of changes. I would recommend skipping 0.7.0-rc entirely and jump straight to 0.7.0-rc.2, as rc.2 includes an important bugfix with ListView (thanks @ide!). Aside from a bunch of small improvements and fixes, the main feature in the 0.7.0-rc release is the improved Profiler, which allows you to profile your JS and ObjC in one place! I highly recommend checking it out.

Because this was behind schedule, you can expect another smaller release this coming Friday to get the two-week release schedule back on track.

React Native Playground is live on the App Store
React Native Playground is live on the App Store

Now you can run examples from rnplay.org with your iPhone, without having to build to your device!

"Run, test and share React Native applications directly on an iOS device Build an app in the browser on http://rnplay.org and share it with anyone! Explore the site via popular apps, staff packs or search. Sign in to test your own apps."

Gesture detection in React Native
Gesture detection in React Native

@johanneslumpe explains how to build a higher order component for adding a panning gesture to another component, using the proposed ES7 decorator syntax. Also check out his followed up post, Gesture detection in React Native – fixing unexpected panning!

Responding to the keyboard with React Native by @grabbou
Responding to the keyboard with React Native by @grabbou

"Creating dynamic layouts that adapt to the on-screen keyboard." This blog post explains how to use LayoutAnimation and react-native-keyboardevents to animate a change in layout to accommodate for the keyboard, useful stuff. This can be updated soon to include the LayoutAnimation Keyboard type that was just merged into master on Friday.

Highlights from Issues and Pull Requests

React Web: let React Native code run on the Web by @baofen14787
React Web: let React Native code run on the Web by @baofen14787

This article is written in "Chinese (Simplified)" according to Chrome, but it translates quite well using the built in Google Translate.

See the original comment in the issues here - scroll down a bit further to see some follow up.

Remove layout-only nodes by @a2
Remove layout-only nodes by @a2

This commit was later reverted, but I believe this is something that we can hope to see land in a future release soon. It will be a nice, free optimization when it lands!

Enable async/await and update UIExplorer and tests
Enable async/await and update UIExplorer and tests

"Enables async/await in .babelrc and transformer.jsAdds regenerator to package.json." - check out the diff here for some examples of async/await in action with React Native! Great work @ide

Add support for annotation callouts, annotation press, callout presses and pin animation to MapView by @dvcrn
Add support for annotation callouts, annotation press, callout presses and pin animation to MapView by @dvcrn

Great work by @dvcrn to push this through, check out a screenshot of it in action!

LayoutAnimation brevity by @sahrens
LayoutAnimation brevity by @sahrens

Simplifies the API for LayoutAnimatioon so you can use LayoutAnimation.easeInOut rather than having to remember LayoutAnimation.Presets.easeInEaseOut

Simplify ListView.DataSource API by @brentvatne
Simplify ListView.DataSource API by @brentvatne

Provide initial data via a rows property in the constructor and also a default rowHasChanged function. This is a WIP and feedback is welcome!

@ericvicenti plugs away on Navigator
@ericvicenti plugs away on Navigator

The click-through for this goes to a diff for "Revamp Navigator scene cache strategy", also check out Navigator improved willFocus logic.

Highlights from the community

TylerLH/react-native-timeago
TylerLH/react-native-timeago

Last week I saw on a friend's Facebook profile that they had accidentally put their new relationship status as having began in July - the result was that 'John and Jane have been in a relationship in one month' - beautiful.

This library helps you to do that kind of thing - turn a timestamp into a "how long ago" stamp, with the help of moment.js.

naoufal/react-native-safari-view
naoufal/react-native-safari-view

@naoufal strikes yet again, this time wrapping an extremely common bit of functionality: opening a Safari view on top of your app.

brentvatne/github-pulse-ios
brentvatne/github-pulse-ios

To practice with ES6 syntax, bridging with Swift modules, async/await and also try my hand at creating a chart with ReactNativeART I started to port @tadeuzagallo's awesome GithubPulse desktop app to iOS. It's functional now and I'll move on to adding the polish next. Watch the project to follow along with my progress!

apolkingg8/React-Native-Touchable-Ripple
apolkingg8/React-Native-Touchable-Ripple

Did you happen to drop your Nexus 5 this week and crack the screen in a desperate hunt for caffeine after running a half marathon? Missing the Android L material ripple effect? Well I did and am, so this library couldn't have been more timely.

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
Goodbits

"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!