Issue #13

Logo for React Native Newsletter

Top News

React Native v0.8.0 released
React Native v0.8.0 released

If you're the kind of person who is always on the bleeding edge and has no fear of rc's, this isn't particularly exciting as we have not added any commits on top of 0.8.0-rc.2, which proved to be a solid release. If you're more of the conservative early-adopter type, then this is great news for you! I can't wait to see what everyone does with the Animated API!

ReactEurope interviews by rangle.io (YouTube Videos)
ReactEurope interviews by rangle.io (YouTube Videos)

If you have already seen the talks themselves or just prefer the interview format, check these out for some interesting insights beyond what was discussed in the talks. Great stuff!

Develop Now with ClojureScript for React Native (Blog Post)
Develop Now with ClojureScript for React Native (Blog Post)

@mfikes is doing great work to unite React Native and Om/ClojureScript. While the full toolchain isn't ready yet so you will run into some rough edges, it is possible to do this today and the DX will only continue to get better.

React Native on Heroku (Blog Post)
React Native on Heroku (Blog Post)

"As a web developer doing iOS development with react native, I need a staging environment for the product manager to review changes to the app.

On the web, that means using Heroku, but with a react native app it is a bit more complicated."

I will admit it, it is Sunday morning and I didn't quite follow this article. But you are probably smarter and less groggy than me so you should be fine.

React Native Interface Builder (YouTube video)
React Native Interface Builder (YouTube video)

This video shows a proof of concept app for building React Native UIs with a drag and drop style interface. This isn't the first time that we've seen an effort like this, it's great to see that there are a bunch of people trying their hand.

React Native Hacknight - Jackson Devs Meetup
React Native Hacknight - Jackson Devs Meetup

"It's too bad I'm not going to be in Jackson, Mississippi this Tuesday evening" - things I never thought I would say to myself. Check it out if you are.

The React Native Feature No One's Talking About [the Chrome debugger] (Blog Post)
The React Native Feature No One's Talking About [the Chrome debugger] (Blog Post)

@hharnisc investigates how the Chrome debugger works, a good read that helps to demystify the process a bit. I'd like to see more articles written about some of the React Native internals :)

Going mobile with React Native (Blog Post)
Going mobile with React Native (Blog Post)

Wiktor Mociun, as far as I know, has two things on his mind: pizza and justice. Enter React Native. Suddenly a tool is available that will allow him to combine his greatest passions and produce an app that will enable pizza eaters everywhere to fairly slice up their pizza so that each person gets their exact fair share. Read this blog post for more information. (It's a tutorial about getting started with React Native, pretty much).

Build a streaming audio app with React Native (Slides)
Build a streaming audio app with React Native (Slides)

"This will cover creating a simple React Native app to stream audio over the web from start to app store submission. The stack we’ll cover includes React Native, Reflux, Xcode, Babel and Webpack. At the outset you should have enough information and confidence to start building your own app with React Native." A fantastic slide deck by @jhabdas for his open source Lumpen Radio app.

Highlights from facebook/react-native

TextInput bug fixes and features by @sahrens
TextInput bug fixes and features by @sahrens

"This introduces event counts to make sure JS doesn't set out of date values on native text inputs, which can cause dropped characters and can mess with autocomplete, and obviates the need for the input buffering which added lag and complexity to the component. Made sure to test simulated super-slow JS text event processing to make sure characters aren't dropped, as well as typing obviously correctable words and making sure autocomplete works as expected. TextInput is now a controlled input by default without causing any issues for most cases, so I removed the controlled prop."

Also removed: bufferDelay prop. Added: a maxLength prop!

Breaking Changes: Convert <TouchableOpacity> to Animated by @vjeux
Breaking Changes: Convert <TouchableOpacity> to Animated by @vjeux

"... The other solution is to stop using cloneElement and instead wrap the children inside of an <Animated.View>. This has many advantages:

  • We no longer use cloneElement so we're no longer messing up with elements that are not our own.
  • Refs are now working correctly for children elements
  • No longer need to enforce that there's only one child and that this child is a native element

The downside is that we're introducing a <View> into the hierarchy. Sadly with CSS there is no way to have a View that doesn't affect layout. What we need to do is to remove the inner <View> and transfer all the styles to the TouchableOpacity. It is annoying but fortunately a pretty mechanical process."

Click through for the diff and full commit message.

Re-layout on orientation change
Re-layout on orientation change

Nothing new here, but in case you were curious about how this works: "if the root view is resized (e.g by an orientation change) then it triggers a re-layout of the react view tree." from @nicklockwood

Triggering a separate animation after a threshold with the Animated API
Triggering a separate animation after a threshold with the Animated API

An interesting exchange between @dubert and @sahrens about how to implement a pleasant swipe animation with the Animated API.

@vjeux's API design comment on "Definable distance pagination for ScrollView"
@vjeux's API design comment on "Definable distance pagination for ScrollView"

"The guideline is to first try to design the best API based on what exists on iOS, Android, web... Then once we found one, if it is close enough to the web one, it's preferable to use it. If the web one doesn't make sense, we shouldn't tie ourself to it"

Add support for tintColor to remote images
Add support for tintColor to remote images

A nifty commit by @ide that makes the tintColor prop work as you would expect, regardless of the Image source type.

Bugfix: reloading with profiling enabled sends null selector to modules upon deallocation
Bugfix: reloading with profiling enabled sends null selector to modules upon deallocation

Thank you @tadeuzagallo for taking care of this! As @ide points out, "[reloading with profiling enabled is] mostly useful for profiling how long the first render() takes, if you wanted to improve TTI for example."

Highlights from the community

oblador/react-native-image-progress
oblador/react-native-image-progress

Now that loading hooks have been added to the Image component, it's possible to build tools like this which automatically show loading indicators for any network images, very cool!

I would have used a screenshot of it in action but this oblador guy is pretty handsome so let's just slot his photo in there instead.

jeanregisser/react-native-slider
jeanregisser/react-native-slider

SliderIOS but implemented entirely in JavaScript. What is the benefit of this, you might ask? Well, any component that is implemented purely in JavaScript in React Native, that only leverages cross-platform primitives such as PanResponder and View, can be re-used on Android as well (this is still not released, but yes). It also makes it much more customizable without forcing you to dive into any Objective-C, so you can keep your precious fast iteration cycle and styles. Well done Jean!

yamill/react-native-orientation
yamill/react-native-orientation

In response to #2031, @yamill released a useful little library to help you respond to changes in orientation and even lock orientation as you see fit.

maxs15/react-native-modalbox
maxs15/react-native-modalbox

Modals are fun, we all need to make a modal library one day, this is @maxs15's time, it will soon be your time. Check out the source for another example of the Animated api in action!

Night Light on the App Store
Night Light on the App Store

"I built this app with #ReactNative. Actual coding time 3h, time spent dealing with Apple related stuff 10+ days." via @tnyuan

Being a parent of a newborn, I've heard, is an absolute joy. As a parent, you frequently wake up in the middle of the night to go sit beside your sleeping child as they dream of making you proud one day. You feel warm and rested and congratulate yourself on making so many of the right choices in life. This app helps to add to that wonderful experience by providing the perfect soft ambient lighting to accompany the quiet breathing and cute baby noises that inspired the smooth jazz genre.

** I don't have any children, but I'm basing this description on the fact that people keep having them so it must be great.

Using AlertIOS.prompt in React Native (Blog Post)
Using AlertIOS.prompt in React Native (Blog Post)

A short and sweet description of how you can get input from users through AlertIOS.prompt, thanks Richard!

Be sure to check out his project product-hunt-react-native as well! Screenshot 1, Screenshot 2, Screenshot 3

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. They recently added api access to device logs so you can now see all log messages at the bottom of the editor on rnplay.org! 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!

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!

Goodbits

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