Issue #25

Logo for React Native Newsletter

Assorted good things

Community Interview #5 - Ken Wheeler
Community Interview #5 - Ken Wheeler

Ken Wheeler (twitter) (github) works at Formidable / Walmart Labs who you might know for spectacle, slick, mcfly (thanks a lot for perpetuating the Back to the Future references Ken, really), or as the winner of our Reactive Conference contest. According to github-awards.com, his worldwide ranking on Github for JavaScript is 61 out of about 600,000 developers, and 22 in the United States -- based off of number of stars on his repositories. He is also the creator of a young human female.

A new home for React Native feature prioritization
A new home for React Native feature prioritization

An example of a "product pain": Github Issues - incredibly difficult to prioritize and sort through issues.

As of writing this, the React Native repo has 807 open issues and I challenge you to find the top 5 most important things for the core team to work on by sorting through those. It's tough, really tough.

So on ProductPains you should post feature requests like "Get Android to feature parity with iOS" or "Offload some animations from JS thread for better perf" and just use the issues for bug reports.

Reactive 2015 is done!
Reactive 2015 is done!

This isn't really news -- this was at the beginning of the month! But I've been away traveling since which is incidentally also why this newsletter has been so delayed.

The following talks focused on React Native:

"Under the hood of React Native" (slides here) by everyone's favourite Czech developer @mkonicek

"Work and play in the React Native Playground" by flamenco artist @jsierles

"From React web to native mobile" by annoying guy who talks too much and can't figure out how to use a microphone, me

Check out Alex Perry's summary for other highlights or nesch's post on Medium for a more complete list of talks.

Also -- the photo that you see for this story was hand autographed by @vjeux himself and is on its way to our contest winner @kenwheeler in New Jersey. Beautiful! The photo that is, not New Jersey.

Running by Gyroscope (Blog post)
Running by Gyroscope (Blog post)

If you're a regular reader of this newsletter you may remember Anand from a conversation I had with him several months ago, where he spoke about his experience building a then-private app using React Native.

Well the app is public now and I think it's one of the best React Native apps out there! If you're a runner, check the app out. If you're not a runner, consider becoming one because it's great fun. If you're not a runner and not interested in considering becoming a runner, then at the very least read this blog post or scrolling through and looking at the pretty pictures.

From Hackathon to React Native (Presentation video)
From Hackathon to React Native (Presentation video)

"Christopher Chedeau walks through the challenges involved in bringing the React JavaScript UI library to iOS. Some of these are technical, but there are also interesting people management challenges since, from an iOS developer perspective, React Native is a very bad looking proposition."

If you're tired of seeing amateurs such as myself give presentations, check out @vjeux's talk from QCon NYC some months ago.

React Native Radio by DevChat.tv (Podcast)
React Native Radio by DevChat.tv (Podcast)

A new podcast! About React Native! And there are 7 episodes already! I've listened to a couple of episodes already and I'm very impressed. And hey, now that you're a runner, you should know that podcasts are a great way to pass time while you're out getting fit.

How to create Twitter exploding hearts (Blog post)
How to create Twitter exploding hearts (Blog post)

Regardless of where you stand on the Twitter star vs. heart debate, you might be curious about how to implement the heart animation. In this blog post, @browniefed teaches you that. It's pretty. Click through to see the animation at least.

Crash Analytics and Feedback for React Native Apps (Blog post)
Crash Analytics and Feedback for React Native Apps (Blog post)

Parashuram describes in this blog post / screencast how to use the react-native-cordova-plugin to integrate with HockeyApp for feedback and crash reporting.

Townske - new React Native app featured on the App Store
Townske - new React Native app featured on the App Store

"Stunning City Guides Made By Locals & Travellers" - very pretty UI and it did a fine job of identifying hip cafes and points of interest around me.

Makerist Mediathek: Launch of our first React Native mobile app and how we got there
Makerist Mediathek: Launch of our first React Native mobile app and how we got there

"Our successfull, but also rocky, road into the new territory of React Native mobile apps."

"Profiling Android UI Performance" added to the docs
"Profiling Android UI Performance" added to the docs

A new section in the docs by @astreet takes a look at the tools available for profiling your app on Android to diagnose UI performance problems.

Easier Concurrent Programming in JavaScript with Async Functions (Blog post)
Easier Concurrent Programming in JavaScript with Async Functions (Blog post)

If you're not drinking the async/await kool aid yet, you have to read this. If you are, you have probably already read this. Great post by @amasad!

Why React Native might become the first multi-platform framework that actually works (Blog post)
Why React Native might become the first multi-platform framework that actually works (Blog post)

"Long story short: I think Facebook has a strong motivation, resources and domain expertise to build the first framework that will actually enable us to build apps for all platforms at once."

Highlights from facebook/react-native

Add support for async bridged methods to Android
Add support for async bridged methods to Android

Now that you have read @amasad's post about async functions, you can understand why I am happy about this commit.

Build nested navigation context based on the hierarchy of navigators
Build nested navigation context based on the hierarchy of navigators

"Adds support for propagating events through nested navigators using bubbling/capturing." - a nice addition to Navigator.

Replaced RCTSparseArray with NSDictionary
Replaced RCTSparseArray with NSDictionary

I asked @nicklockwood about this commit and he said: "we only added RCTSparseArray to make it clear these were mapped by NSNumber instead of string. Generics are better though."

Note that there might be breaking changes in your iOS native modules, if you use _bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) to act on your native view -- you will want to update that to the new signature with generics.

Implements `blurOnSubmit`
Implements `blurOnSubmit`

By default when you submit a TextInput it will be blurred (focus will be taken away, keyboard hidden), but if you want to do something like validate an error without hiding the keyboard, or automatically focus, you'll probably want to set blurOnSubmit to false, otherwise the keyboard will potentially slide in and out and make for an awkward experience.

Also check out this other PR from @dsibiki where he implements onKeyPress for TextInput

Allow developers to load JavaScript bundle from any source
Allow developers to load JavaScript bundle from any source

This commit by @arbesfeld of AppHub fame makes it possible for you to load your JS bundle from any filepath (not just app assets).

Add setPageWithoutAnimation to ViewPager
Add setPageWithoutAnimation to ViewPager

The most interesting thing here is that this diff is a simple example of how you can call functions directly on your underlying Android Views without going through props. This is the equivalent to React Native iOS's _bridge.uiManager addUIBlock pattern.

Initial checkin for Image within Text nodes
Initial checkin for Image within Text nodes

"This adds the basic support for embedding an image in a TextView" - support for this was recently added to iOS and now it's available for Android too! Expect to see more from @dmmiller in future newsletters! Please @dmmiller add a profile picture so I don't have to use this weird blocky thing 😅

Open source IntentAndroid
Open source IntentAndroid

One of the friendliest people you'll ever meet, @martinkonicek, is in the process of (among many other things, he's also a busy guy) open sourcing the missing native modules and views for Android, stay tuned for more.

'Update app properties in runtime' UIExplorer demo
'Update app properties in runtime' UIExplorer demo

Besides being a really cool example because there is a nested RCTRootView, this also shows how you can update your app properties (the props passed into the top level component) without reloading the entire root view, neat!

Custom fonts support added to Android
Custom fonts support added to Android

"It will first try to load typefaces inside the assets/fonts folder and if it doesn't find the right Typeface in that folder will fall back on the best matching system Typeface The supported custom fonts extensions are .ttf and .otf. For each font family the bold, italic and bold_italic variants are supported. Given a "family" font family the files in the assets/fonts folder need to be family.ttf(.otf) family_bold.ttf(.otf) family_italic.ttf(.otf) and family_bold_italic.ttf(.otf)" - awesome work @pasqualeanatriello

Implement android maxLength prop
Implement android maxLength prop

In order to implement a maximum length on TextInput and not experience a slight flicker (blog post coming soon on why this is the case), you need to use the maxLength prop so this restriction can be applied on the native side. Thanks @nucleartux!

Added rich text input support
Added rich text input support

"It is now possible to display and edit rich text inside a multiline <TextInput> by nesting a <Text> node inside it." Another commit brought to you by @nicklockwood, so busy coding that he has trained his daughter to feed him.

Related: fix text input spans, open sourced the onSelectionChange event.

Prevent destroying activity on runtime changes
Prevent destroying activity on runtime changes

You probably noticed that when you rotate your Android device it appears to restart the app if orientation lock is not enabled. This commit fixes that and some other changes. I like this @satya164 guy.

Use elevation to implement shadows on Android
Use elevation to implement shadows on Android

Shadows are essential to material design and an important missing piece from React Native Android right now. This pull request uses the elevation property of Android views implement shadows. This isn't cross-platform because there is no elevation property on iOS, so it's not ideal in the long-run, but it's certainly a welcome addition! Well played @corbt!

Enable minWidth /maxWidth /minHeight / maxHeight for iOS
Enable minWidth /maxWidth /minHeight / maxHeight for iOS

I've heard more than a few requests for this feature so it's great to see it land. I imagine it must not have been implemented in css-layout until recently. Let's get it on Android now! Brought to you by @rocman, who has taught his infant son to drive so he can keep coding. I must be doing life wrong because this seems to be a trend with developers.

Open sourced RCTPasteboard
Open sourced RCTPasteboard

"RCTPasteboard is a very basic API for writing strings to the pasteboard. Useful for implementing 'copy to clipboard' functionality."

Related PSA: recently I've seen the occasional rant on Facebook/Twitter about Facebook for iOS looking into your clipboard and asking if you want to share something that you had copied there. This is not FB being creepy, this is a public API and also used by apps like Instapaper. So no need for FUD around this one. As an exercise, dear reader, I encourage you to submit a PR to implement this in RCTPasteboard -- it's pretty easy. This message was not brought to you by Facebook

Initial implementation of adjustsFontSizeToFit
Initial implementation of adjustsFontSizeToFit

I can't wait to see this make it in! It's one of the things that you can't really do on the web that mobile makes possible. Great effort @MattFoley

Is there a way to keep the keyboard open even when input loses focus/prevent blur
Is there a way to keep the keyboard open even when input loses focus/prevent blur

"I am trying to achieve the same effect as in the native 'notes' app. Basically, I have a text input which covers 95% of the screen and I have a small button at the button. I need to tap once in order to hide the keyboard and then only my second tap actually triggers the button's on press event."

Adds stetho interceptor to the OSS react native networking module
Adds stetho interceptor to the OSS react native networking module

Facebook's Stetho is a "debug bridge for Android applications" - this small commit adds it to the networking module so you can easily debug your network requests using Chrome inspector

UIRefreshControl added to ScrollView
UIRefreshControl added to ScrollView

Adds a onRefreshStart prop - a function that is provided with a endRefreshing function as its only argument, to be called once you are done performing whatever refreshing work you need to do.

Highlights from the community

ptmt/react-native-desktop
ptmt/react-native-desktop

This is a huge and impressive effort by @ptmt to port React Native to OSX (one of the most request features on ProductPains). He is currently also writing a Discord client with it, looking forward to trying that out!

exponentjs/react-native-image-picker-android
exponentjs/react-native-image-picker-android

"A camera and gallery image picker native module for Android, giving a subset of the API of https://github.com/marcshilling/react-native-image-picker"

Also, say hello to @nikki93 - you'll be seeing more of him in the future as he is working with us at Exponent!

benoitvallon/react-native-nw-react-calculator
benoitvallon/react-native-nw-react-calculator

This has to be the most starred React Native app on Github so it's probably not news to any of you, but I haven't mentioned it here before so I feel obliged. It's cross-platform natively on iOS/Android through React Native, on the desktop using the DOM "the tool formerly known as node-webkit" (NW.js) and same for the browser minus the NW.js bit.

ohanhi/elm-native
ohanhi/elm-native

"Experimental support for writing React Native powered mobile applications in the Elm language."

Elm has some really neat ideas. @rtfeldman spoke about Elm at Reactive Conf and I'd recommend checking that out too.

taskrabbit/react-native-parsed-text
taskrabbit/react-native-parsed-text

It's very common to need to highlight certain expressions from plaintext, such as @mentions and #hashtags, then make your app take some action when they are pressed. This component brought to you by the @taskrabbit team is one way you might approach the problem.

fraserxu/soundredux-native
fraserxu/soundredux-native

This is an Android client for SoundCloud build in React Native "in an effort to try react-native along with redux." Great job @fraserxu!

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

Some good looking progress indicators made by a good looking guy. Not yet available on Android because they depend on ReactNativeART.

auth0/react-native-lock-ios
auth0/react-native-lock-ios

"Auth0 is an authentication broker that supports social identity providers as well as enterprise identity providers such as Active Directory, LDAP, Google Apps and Salesforce."

I've tried Auth0 in the past and it seems like the easiest way to quickly drop authentication into your app -- and hey it's free up to 7,000 active users. It even supports passwordless login via sms, email, or touch id. Neato

tinycreative/react-native-dropbox-chooser
tinycreative/react-native-dropbox-chooser

"The Chooser is the fastest way to get files from Dropbox into your iOS app. It's a small framework that enables your app to access files from Dropbox without having to worry about the complexities of implementing a file browser, OAuth, or managing uploads and storage."

FaridSafi/react-native-gifted-messenger
FaridSafi/react-native-gifted-messenger

Nice looking chat interface built in React Native. I'm not convinced by the API - a bit more imperative than I like: I'd rather pass in some list of messages and have the component do the right thing than call appendMessages, but that's a style preference and it's a new project and maybe @FaridSafi has some plans for it :)

sospartan/react-native-console-panel
sospartan/react-native-console-panel

A neat little library that lets you see the console output in a view within your app, check out the repo for a gif.

ptmt/npm-native
ptmt/npm-native

A second mention for @ptmt in the newsletter! This tool makes it possible for you to easily install a native iOS dependencies with npm-native --install path_to_lib.xcodeproj and uninstall with npm-native --uninstall path_to_lib.xcodeproj

luggg/react-native-android-snackbar
luggg/react-native-android-snackbar

"Snackbar provides a lightweight feedback to users about an operation, such as saving a form or deleting a message. They are similar to Toasts, but are a bit more prominent and customizable." - nice one @pedro!

Friends of the newsletter

Appetize.io
Appetize.io

I love these folks. They make rnplay.org possible and in doing so support the React Native community in a big way. They are also allowing us to use their simulators within the React Native docs! I am not paid to advertise for them, I'm happy 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.io
Goodbits.io

"Newsletters should take minutes, not hours. Goodbits helps you quickly build email campaigns." That's their thing. True story, I once wore a Goodbits tshirt while cycling across the Golden Gate bridge. If you've read this far, you should probably at least try out Goodbits, because clearly you have time on your hands.

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!