React Native Under the Hood: MessageQueue & JS Thread

Yesterday I spent all day on the React Native Bridge digging deep into what gets sent over. This talk by Rotem Mizrachi-Meidan nicely details why one would want to do that. Next to the basic MessageQueue.spy(), I also used the aforementioned rn-snoopy to get some aggregated stats. A write-up of this video is also available.

Working with symlinked packages in React Native

For an RN app I’m co-developing we have several repos that work together. One of the repos acts a library for other repos to use. During development, in order to test a few things out, we sometimes need to have the local dev version of the library repo work with one of the other repos […]

Dribble Inspired Todo Empty State Transition implemented in React Native

Ooh this is nice. Uses a simple Animated.Value which is animated from 0 to 1. Said value is only defined once – in a wrapping component – and is passed on to the various children as a prop. react-native-todo-empty-state-transition →

React Native and iPhone X: <SafeAreaView />

One of the elements that shipped with React 0.50 is <SafeAreaView />. It’s a component which you can use to prevent your content from creeping below The Notch and Home Indicator on iPhone X. import { // … SafeAreaView } from 'react-native'; class Main extends React.Component { render() { return ( <SafeAreaView style={styles.safeArea}> <App /> […]

React Native Snoopy, a profiling tool for React Native

The React Native bridge is the hub where communication between the Javascript and the Native world happen. Optimizing and catching unexpected (bad) communications can make or break your performance. Being that central and sensitive place, it made sense to have tooling built around it. Snoopy is a profiling tool for React Native, that lets you […]

Implementing Instagram Filters and Image Editing in React Native

William Candillon recreated some parts of Instagram’s editing process (namely the filter, rotate, and crop steps) in React Native. The filters are implemented with GL-React: Gl-react offers a really efficient paradigm for integrating React and OpenGL together. The library enables you to easily build scenes using React composability. For instance, consider an image with two […]

FastImage, performant React Native image component

React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built in caching behavior you’d have in a browser. Even so many people have noticed: Flickering. Cache misses. Low performance loading from cache. Low performance […]

Launch a React Native app with “Debug JS Remotely” enabled by default

I had a bug in a React Native app which only occurred on the very first launch of the app, right after install. The bug was situated in a complex Redux Saga which bootstraps the application and populates the Redux store with things like an (anonymous) API token, (remote) config settings, etc. The bug didn’t […]

Better Cross-Platform React Native Components

Good article by Nick Wientge on correctly creating Cross-Platform React Native Components: In this post we’ll look at some tools and techniques we can use to make our components look right at home on both iOS and Android — without sacrificing code reuse. The article revolves around building a button, but with respect for how each platform […]