Issue #15

Logo for React Native Newsletter

Top News

New React Devtools Beta (Blog post)
New React Devtools Beta (Blog post)

In this beta release, you can now modify styles in of your app from the React Devtools. Also notice that as you select components with Inspect Element, your selection is updated in the devtools component tree. Similarly, as you hover over components in the devtools component tree, the box-model data is shown in the app. @jaredly, you sure know how to make me happy. Click for a gif of me using this

Community Interview #2 - Anand Sharma
Community Interview #2 - Anand Sharma

Anand Sharma* (twitter) (github), also known as aprilzero, is a designer, developer, traveler, runner and founder of Gyroscope. His post "I've been tracking everything about myself" exploded on HackerNews just over a year ago, followed by a pair of blog posts where he detailed the design process. He went on to generalize his personal dashboard into a platform that anyone can use and called it Gyroscope. He's now using React Native to bring his unique design aesthetic to mobile, so of course I had to catch up with him on this new thing called "the internet" (sp?) to share his story and experiences.

Integrating Parse and React Native for iOS (Article)
Integrating Parse and React Native for iOS (Article)

Facebook Developer Advocate Christine Abernathy teaches you "how to combine the power of a Parse backend and the flexibility of a React Native frontend in your iOS apps"

Editorial note: I've been involved in a large React Native project using ParseReact extensively and we ran into a few rough edges that I'd be happy to discuss if you are considering it. It is under active development still and always getting better, but just like any other tool you would use, make sure you check that it is a good fit for your specific use case!

Add React Native support (Issue on rackt/history)
Add React Native support (Issue on rackt/history)

It was really only a matter of time before this A-level React celeb's face made an appearance in this newsletter. In this issue, "Beginnings of support for React Native in rackt/history"

"history is a JavaScript library that lets you easily manage session history in browsers, testing environments, and (soon, via React Native) native devices. history abstracts away the differences in these different platforms and provides a minimal API that lets you manage the history stack, navigate, confirm navigation, and persist state between sessions. history is library-agnostic and may easily be included in any JavaScript project."

Docs preview for redux - a predictable state container for JavaScript apps
Docs preview for redux - a predictable state container for JavaScript apps

@gaearon's redux library is a new take on Flux, which you have probably already heard of, maybe even through his talk from ReactEurope. You might even be a patron to his reactdx Patreon project.

Regardless of what you know about it already, these docs are a fantastic read!

React Native Animations (Blog post)
React Native Animations (Blog post)

"John Huynh" or @huynh got in touch with me on the Reactiflux Slack to share his first React Native blog post - if you're new to the Animated library or perhaps having trouble grasping it, maybe this will help!

Highlights from facebook/react-native

What are the best practices around using InteractionManager?
What are the best practices around using InteractionManager?

@paramaggarwal, a smart fellow who knows things about React Native, could not find out how to properly InteractionManager.runAfterInteractions, so he opened this issue. Clearly the documentation is lacking (pull request welcome!), but I went ahead and explained one particularly good use case for it. I'd encourage you to play with this in your apps!

I also put together an example of using it to speed up transitions here: https://github.com/brentvatne/run-after-interactions-exp - check it out with the Exponent app, just click here if you're on your phone and have it installed

Prevent user from over-popping the routes in Navigator
Prevent user from over-popping the routes in Navigator

"If user taps the back button quickly, the app crashes becuase "pop"internally only checks this.state.presentedIndex which does not always update when transtion happens."

This commit fixes this issue! So you can stop wrapping your navigator.pop() calls in try/catch once this lands, probably in 0.10.0-rc.

Also check out Fix disabled scene height by @ericvicenti.

@hedgerwang and @ericvicenti are doing great work on Navigator, thanks guys!

Update to Flow v0.14.0
Update to Flow v0.14.0

Check out the changelog for more info. One update I'm happy about is "Disable by default munging of class property names that start with an underscore, with an option to enable it" - you might have seen this if you use ES6 classes and tried to define properties with underscores to indicate that they are private.

Add <Modal /> component
Add <Modal /> component

When this commit lands in a rc release, I will be deprecating my react-native-modal library. If anyone has a strong preference of that library for some reason and would like to take over maintenance, just let me know on twitter, @notbrent.

Adds`process.env.NODE_ENV polyfill
Adds`process.env.NODE_ENV polyfill

This should increase the number of libraries that React Native is compatible with - issue surfaced by @gaeron with respect to react-redux, fixed the same day!

Highlights from the community

yrezgui/meowth-ios
yrezgui/meowth-ios

'iOS app that transcribes your voice with IBM Watson Cloud'

Check out related articles Hybrid Development, a complete fail? and Dev with React Native, pat 1 from @yrezgui

alucic/react-native-cheat-sheet
alucic/react-native-cheat-sheet

A useful little list of tips and tricks with React Native, if you have anything to add then be sure to submit a pull request, @alucic would appreciate! I mean he didn't tell me that personally but I reckon.

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

I shared this project a while ago but since then @christopherdro has kept slugging away at it and it's really starting to shape up really well!

facebook/react-native-fbsdk
facebook/react-native-fbsdk

I can deprecate two of my repos in one week (the other being the Modal one mentioned above), fantastic! With this, the FacebookLoginManager from react-native-login is no longer needed. Check this library out if you need to integrate with the Facebook SDK at all - share, login, or graph queries!

threepointone/asyncstorage-mock
threepointone/asyncstorage-mock

"A mock for react-native's asyncstorage api. useful for testing." Good stuff - I wonder when we can expect version 3.1

devfd/react-native-geocoder
devfd/react-native-geocoder

Turn a lat/lon pair into an address and vice versa! Useful library, thanks @devfd!

Friends of the newsletter

Appetize.io
Appetize.io

I love these guys. They make rnplay.org possible and in doing so support the React Native community in a big way. I am not paid to advertise for them, I love 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!

Iodine
Iodine

Iodine is a startup full of insanely cool people doing important work. This New York Times article would do a much better job of explaining what they do than I. Oh, and they use React Native for an upcoming app, and their entire site is built in React! They are hiring a front-end engineer in San Francisco, shoot me an email at brentvatne@gmail.com if you're interested and I'll pass your information along! I'm not paid to do this, I just want to help some friends out!

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!

Goodbits

Collect and curate content easily for brilliant newsletters. Try Goodbits for free!

Unsubscribe