Issue #14

View in your browser

Logo for React Native Newsletter

Top News

React Native 0.9.0-rc released
React Native 0.9.0-rc released

"React Native 0.9.0-rc has been released! Just like Windows 10, it is a free upgrade!" says the tweet. Gosh I'm so clever.

Hero of this release is @sahrens for his efforts to overhaul the TextInput component, which was desperately in need of some affection. Click through for the full changelog and be sure to at the very least read over breaking changes and deprecations.

brentvatne/hard-react-native-problems
brentvatne/hard-react-native-problems

Are you having a hard time re-implementing a piece of UI that you have seen implemented in another app? Submit a pull request or issue on this repository for us to discuss it. Ideally, include a screen recording of what you're trying to achieve. (This is really easy to do now with iOS8).

Problems listed here can serve as real-world examples that will help guide API design. If you don't have a problem, then try pitching in a solution! So far there's only one listed in the repository, but surely you folks must have run into more walls than that!

Community Interview #1 - Chirag Jain
Community Interview #1 - Chirag Jain

This is the first in what I hope to be a weekly or bi-weekly section of the newsletter, where I interview people from the React Native community that are doing exciting things!

Chirag Jain (twitter) (github) is the cofounder of Lrn, a React Native iOS app released to the app store on July 28th that jumped to the top of ProductHunt in the same day. It was also reported on by creator and tnw. Some of his notable contributons to the React Native community include commits to add rotateX, rotateY, rotateZ and perspective to the style transform property (check it out here), an open source library for creating custom tooltips called react-native-tooltip and another for handling in-app purchases called react-native-in-app-utils. Click through for the interview transcript!

React Podcast Episode 4: React Europe Conference Recap & CSS vs Inline Styles
React Podcast Episode 4: React Europe Conference Recap & CSS vs Inline Styles

I'm indirectly a participant in this episode because I'm the guy who bought Michael Chan's ticket for React Rally, hahaa. There are actually tickets still available though and you should totally check it out, there will be a bunch of us React Native folks there, buy tickets for it here and come join us in Salt Lake City, which I've sometimes heard myself sarcastically refer to as "the new Vegas." What happens in Salt Lake City stays in Salt Lake City, because your significant other(s) probably do(es) not want to hear at all about what you learn about React from the conference. If they do then I guess that saying doesn't apply, but it probably does.

Disclaimer: I am just an attendee and in no way affiliated with React Rally - in fact, they even rejected my talk proposals, so really we're almost even enemies.

Also yeah this podcast, check it out! Oops.

Updated Playground app released to App Store
Updated Playground app released to App Store

Features React Native 0.8.0, more native modules and enabled development menu. As a sidenote, we have temporarily put a feature freeze on the app and website to focus on stability and another very related project - you should be seeing some of the improvements already as @jsierles enabled some more aggressive caching of app bundles.

Animated API Basic Example (Blog Post)
Animated API Basic Example (Blog Post)

Also check out @browniefed's follow up post, Animated ScrollView Row Swipe Actions.

Hacking React Native - Build A Native IOS Imgur Browser in JavaScript by dabit3 (Slides, for beginners)
Hacking React Native - Build A Native IOS Imgur Browser in JavaScript by dabit3 (Slides, for beginners)

"A short tutorial on building a React Native app using Imgur's free api." Demo app source code here.

Beginner's Tutorial to React Native (Article, for beginners)
Beginner's Tutorial to React Native (Article, for beginners)

I think the title says it all.

Highlights from facebook/react-native

API design: components over a handful of props configuration options
API design: components over a handful of props configuration options

@sahrens: "what do you think about making the callouts react components? Then we could support arbitrary callouts instead of just images and buttons." (full comment redacted for brevity, click through to read)

@vjeux: "I'm also with the opinion of @sahrens, at this point we're adding a lot more configurations to the popup and instead of hardcoding all those, it would be better to let the user render an arbitrary React component inside. This way we don't need to add a lot of complexity to that component that's not going to match all the use cases and instead provide a generic way to extend it."

Limitations of the gif implementation
Limitations of the gif implementation

"Gif is a compressed format, and can't be displayed on screen directly without decompressing it. When we load a gif, we decompress all the frames and create a keyframe animation. That's why the memory consumption is so huge - every decompressed frame of the gif will take up width x height x 4 bytes, regardless of it's compressed size, so if it has a lot of frames it will be huge.

What you really want here is something like a streaming gif implementation, where frames are only decompressed as they are about to be played, rather than all in advance.

If possible, you'd be better off using a video instead of a gif for a long animation like this."

Support relinquishing focus from multiple views via container
Support relinquishing focus from multiple views via container

"This adds the ability to call this.refs.parentView.blur() and blur any active text fields inside the view. It will first try to blur the field (already supported) and if the field is not found as an "active" text field, it will transverse the view and resignFirstResponder for each of them."

Well done @josebalius!

Implements `onKeyPress` for TextInput
Implements `onKeyPress` for TextInput

Awesome pull request by @dsibiski to add onKeyPress to TextInput - not yet merged but I'm looking forward to it!

Highlights from the community

rt2zz/react-native-drawer
rt2zz/react-native-drawer

The first commit on this library was on April 30th and @rt2zz has continued working hard on it since. Sure that isn't a long time compared to, say, the universe, but it is most of the open source life of React Native! I want to give him a shoutout for his sustained effort - I know all too well how easy it is to release a library and then change focus to something else. Your dog looks cute too, but to be honest I can't really say that with much confidence because the photo is quite small.

timfpark/react-native-location
timfpark/react-native-location

This library gives you more fine-grained control over GPS location than React Native's built-in Geolocation API (which mirrors the MDN specification for the browser). Check it out if you, like most modern governments, are interested in tracking everyone's location data - but preferably if you have more benevolent intentions such as displaying someone's running route on a map and letting them know how many donuts they can eat based off of the calories burned, calculated by distance traveled.

ArnaudRinquin/sk-react-native
ArnaudRinquin/sk-react-native

Nice t-shirt, Arnaud! This demo app has a fantastic README as well, check it out!

dsibiski/cerebral-react-native-ios-demo
dsibiski/cerebral-react-native-ios-demo

@dsibiski went ahead and integrated cerebral, "a state controller with its own debugger" with React Native. Click through for the demo gif at the very least! Nice brain, @dsibiski.

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!

*|LIST:ADDRESS|*

Unsubscribe