Issue #5

Logo for React Native Newsletter

Top News

@jordwalke signals towards what is coming for animations
@jordwalke signals towards what is coming for animations

“JavaScriptCore amazes me. Subtract the DOM, and you can animate huge amounts of UI without dropping frames on an old device. #reactnative”

Slides from @nicklockwood's React Native workshop
Slides from @nicklockwood's React Native workshop

Well worth a read, @nicklockwood knows React Native as well as anyone and does a fine job of distilling the key information into this slide deck.

React Podcast by Zach Silveira
React Podcast by Zach Silveira

The first episode of the React Podcast, titled "We're not Flux Experts", has been released. Subscribe in iTunes or whatever podcast app you use (I prefer player.fm for web/Android).

Audio channels are a bit off in this episode but should be fixed in any upcoming episodes!

A universal iOS app with React Native
A universal iOS app with React Native

An article about creating a universal iPhone and iPad app with different layouts, using React Native of course.

React Native Intro by @notbrent (me)
React Native Intro by @notbrent (me)

Video and slides from my presentation are available here! I tried to give an overview of why React, why React Native, and a bit of information about how React Native works. Personally I can't stomach listening to my own voice, but if you can then feel free to give it a watch/listen! It was my first time recording a talk, so go easy on me folks.

Highlights from Issues and Pull Requests

Send functions from JS to ObjC land
Send functions from JS to ObjC land

A discussion between @bsudekum and myself about how to call functions directly on native components from JavaScript.

@tadeuzagallo adds a FPS monitor the Dev Menu
@tadeuzagallo adds a FPS monitor the Dev Menu

Open the Dev Menu with cmd+D, and select Show FPS Monitor

Screenshot in dev menu
Screenshot in action

Add magic tap accessibility gesture by @a2
Add magic tap accessibility gesture by @a2

"The purpose of the Magic Tap gesture is to quickly perform an often-used or most-intended action. For example, in the Phone app, it picks up or hangs up a phone call. In the Clock app, it starts and stops the stopwatch. If you want an action to fire from a gesture regardless of the view the VoiceOver cursor is on, you should implement the accessibilityPerformMagicTap method in your view controller." iOS Developer Library. You can use this with the onMagicTap prop - but you'll have to install from 0.5-stable as this hasn't yet landed in a release.

onAccessibilityTap prop was also added, by Georgiy Kassabli. You'll have to use 0.5-stable for this one as well.

React Native Playground Updates
React Native Playground Updates
  • iOS app supports two-finger swipe up to exit the currently selected play and return to the main screen
  • Live reload now works! When you save your changes, updates will be reflected as soon as the packager reloads, without restarting the app
  • Not yet live: Progress made on streaming logs so you will be able to see any console.log output or errors within the browser! video
  • Not yet live: Progress made on multiple file editing, video
0.5-stable branch created
0.5-stable branch created

Not yet released, but you can use it today by changing the react-native dependency in your package.json to: "react-native": "facebook/react-native#0.5-stable". You might need to delete the existing install within node_modules for this to work: rm -rf node_modules/react-native

Thoughts on Animation by @chenglou
Thoughts on Animation by @chenglou

@chenglou, the author of react-tween-state and "React core member. Currently working on animation-related problems" shares his thoughts on animation in this blog-as-a-gist.

Problem with Chrome Debugger when using spread operator
Problem with Chrome Debugger when using spread operator

@sahrens points out that this will be fixed when React Native switches to Babel for transpiling and @amasad follows up by saying he will be pushing the switch to Babel soon.

Highlights from the community

Essence Native
Essence Native

Check out the "Getting Started Native" section and give it a try! I haven't had a chance so if you do, send me a tweet with your experience @notbrent, curious to hear how it goes!

chirag04/react-native-dashed-border
chirag04/react-native-dashed-border

A customizable <DashedBorder /> component, worth checking out if you're in the market for such a thing! Also a good simple example of a custom view component.

hzdg/gsap-react-plugin · GitHub
hzdg/gsap-react-plugin · GitHub

You can use this in conjunction with skevy's fork of GreenSock-JS and have access to the GSAP api within your React Native app!

christopherdro/react-native-calendar
christopherdro/react-native-calendar

A customizable, swipeable calendar component made by @cdro, works well! He is looking for a hand in optimizing the swipe transitions.

chirag04/react-native-tooltip
chirag04/react-native-tooltip

react-native-tooltip - A react-native wrapper for showing tooltips

naoufal/react-native-progress-hud
naoufal/react-native-progress-hud

A wrapper around SVProgressHud - "It is a clean and easy-to-use HUD meant to display the progress of an ongoing task"

dsibiski/react-native-userdefaults-ios
dsibiski/react-native-userdefaults-ios

A Bridge Module that lets you read and update NSUserDefaults.

@SG creates his first React Native app
@SG creates his first React Native app

Screenshots of his Dribbble app, maybe if we bug him he will upload the source to Github soon ;) If I didn't know any better I would say that Dribbble apps seem to be the TodoMVC of React Native - @mironcatalin also had a crack at one this week.

@jhabdas builds a streaming audio app for Lumpen Radio
@jhabdas builds a streaming audio app for Lumpen Radio

Check out the demo video at the link. He will be speaking about it at CHIHTML5 Lightning Talks on Thursday, July 9th. Check it out if you're in the area!

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!