React DevTools 4.0

Version 4 of the React DevTools have been released, with a lot of improvements. At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects. The release notes hold a detailed list of changes, with example gifs. …

Hermes, a JavaScript engine optimized for running React Native on Android

Interesting announcement from Facebook: Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage and smaller app size. At this time Hermes is an opt-in React Native feature, and this guide explains how to enable it. …

React Native Gesture Handler

React Native Gesture Handler is a declarative API exposing platform native touch and gesture system to React Native. React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native. With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked …

Upgrading from React Native 0.53.x to 0.57.4 (and to Xcode 10 and Gradle 4 along with that), a journey

Back in November, after 6 months of working on other projects, I picked up development for the EV-Point Mobile App again. The app is built using React Native and is available on both iOS and Android. As Xcode got a new major release (from Xcode 9 to Xcode 10) since my last time working on …

Fixing common performance problems in React Navigation

If you’re using React Navigation in your app(s) you might have noticed these two issues the folks over at November Five have written about: On a few screens – specifically those with lots of components – we started noticing a few things… Right off the bat, there is a substantial delay between the user pressing …

Would Airbnb Have Fared Better With NativeScript Instead of React Native?

Interesting blog post by TJ Vantoll, who works on NativeScript: In this article we’ll walk through Airbnb’s complaints in detail, and talk about how some of those same problems could’ve been handled in NativeScript. We’ll start with things that NativeScript does well (this is the NativeScript blog after all), and then move on to things …

React Native at Airbnb

Gabriel Peal, Android developer at Airbnb: In 2016, we took a big bet on React Native. Two years later, we’re ready to share our experience with the world and show what’s next. The result is a 5-part series of posts: Part 1: React Native at Airbnb Part 2: The Technology Part 3: Building a Cross-Platform …

Responsive UIs in React Native

On the web it is – by now – obvious that you make your website responsive (*). Using a listener listening to the change event of the Dimensions API, it’s also possible to implement this kind of behaviour in React Native. import {Component} from "react"; import {Dimensions} from "react-native"; export default class LogDimensionChanges extends Component …

Tips for improving performance of React Native apps

While researching a performance issue in a React Native app by doing a deep dive into the bridge, I stumbled upon this nice list of tips by jamsch. The list – which touches react-navigation, the types of lists one can use, etc. – was originally posted as a comment on a Github Issue, but deserves …

React Native Parallax Scroll Header with Tabs

Nice writeup on how to create a typical screen where there’s a header image that fades out and disappears as you start scrolling. Essentially, everything but the header is put into a scrollview. In order to keep elements ‘fixed’ (i.e. the tab bar), I use the transform property with a translateY that is set to …