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 …

react-native-maps-directions – Directions/Routing component for react-native-maps

One of the things I found missing in the aforementioned react-native-maps was the ability to route between to coordinates. Combining the feedback from the related issues on GitHub (#52, #778, and #929) I’ve created a standalone component that does exactly that. The MapViewDirections component can route between an origin and destination coordinate. As routing is …

NativeBase – Cross-Platform UI Components for React Native

NativeBase is UI component library for React Native, which comes with a great list of Components for easy use. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface. NativeBase includes components such as anatomy …

react-native-maps – React Native Mapview component for iOS + Android

On a React Native project I’m currently working on, I’m implementing native (vector) mapviews. Gladly there’s react-native-maps by AirBnB to handle it all. import React, { Component } from ‘react’; import MapView from ‘react-native-maps’; class MapViewExample extends Component { constructor(props) { super(props); this.state = { region: { latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, …

How to make an ARKit app in 5 minutes using React Native

Apple has made ARKit very easy to use, but it still requires quite a lot of efforts to properly set it up and run the first demo, especially for those who are not very familiar with 3D programming. What we are going to show you in this article is, with the help of React Native …

Detox: E2E Testing in React Native

High velocity native mobile development requires us to adopt continuous integration workflows, which means our reliance on manual QA has to drop significantly. Detox tests your mobile app while it’s running in a real device/simulator, interacting with it just like a real user. Here’s a sample test for a login screen: describe(‘Login flow’, () => …

Update React Native apps in production with AppHub Deploy

Use git push to instantly update React Native apps in production. Your JS Bundle gets store on the AppHub servers. Upon launch AppHub’s iOS library detects updates and swaps in new code and images. [AppHub setApplicationId:@"APPLICATION_ID"]; NSBundle *bundle = [AppHub buildManager].currentBuild.bundle; NSURL *jsCodeLocation = [bundle URLForResource:@"main" withExtension:@"jsbundle"]; AppHub Deploy →

Expo – Easily build apps with React Native

From time to time I’ve seen good things about Expo fly by on the Twitters, which piqued my interest: Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript. Expo apps are React Native apps which contain the Expo SDK. The SDK is a …

Using react-devtools with React Native

The “React Developer Tools” is a very handy browser extension which lets inspect and manipulate the React component hierarchy along with their props and state. There’s also a standalone version, to be used with React Native. To use it, install it as a project dependency: npm install –save-dev react-devtools And then adjust the scripts section …