Yesterday we had a hackday on React Native. The goal was to find out how it feels to develop native iOS apps with Javascript and how much we have to learn to get started. Germain, Pedro and Adrian (myself) participated. Our combined knowledge of Javascript frameworks listed projects like Angular JS, Backbone, Exosjs, Ember, ReactJS and jQuery. Germain did a bit of Swift but basically we are web developers without iOS experience.
We started with setting up the sample app from the tutorial and played a bit with changing content and reloading the app. Live reloading worked for all three of us only for a few changes before it stopped reloading, we have to investigate further what the cause of that is. After setting up Apple Developer accounts we deployed the sample app on our phones which worked well. We liked how easy it was to get started thanks to the react-native-cli tool.
Since I already hacked on an example project with React Native before, I gave a short introduction of React, JSX and StyleSheets. We all got the UIExplorer example running which is great to see what React Native can do and to use as a reference when creating own applications. The examples felt great and well… native.
A hackday wouldn't be called a hackday without hacking so we thought of something we could work on. We wanted to try to get a sliding menu and maybe hack a bit on the Guess the Liiper sample app. When sharing the Guess the Liiper code we had some issues with setting up the .gitignore file correctly for an XCode project and updating the react-library to the latest version. Pedro and Germain investigated the sliding menu and how to add images while I fixed the Guess the Liiper app to be actually usable. We found the react-native-slide-menu, integrated it into the sample app and used a background image for the content. When requiring the image we had some issues but that seems to be known. We ended up with a working app, see the source code. We went through the source code of Guess the Liiper and thought of how to create a circular progress bar like this. React-native-svg might be useful to create this.
Findings
Working with React Native is… reactive! It felt like developing for the web and we didn't have to spend much time getting into it. With the tutorial, UIExplorer app and the sample app it was easy to get started. The Chrome Debugger and tooling like the great Chrome React extension was for us the usual way to debug javascript apps. When thinking about what to implement we found that many components already exist – mostly in a beta stage but the community is very active.
We had to get used to Xcode, digging into the native tools is necessary of course but finding things in Xcode wasn't the most intuitive experience for us. With our existing knowledge we think we can get quite far to develop apps, especially for quickly prototyping. Probably it needs more iOS and Swift knowledge for specific functionality like applying filters to images, microphone and camera access etc.
When working on styling we noticed that it would be great to have live editing like in Chrome Developer Tools which we are used to. Since we don't have any iOS development experience we can't compare this to the normal way iOS apps are developed. But being able to immediately see style changes made in the Dev Tools would be awesome.
We think that the development experience with React Native is great for web developers. The project is very young and it is too early to tell how disruptive it will be. Many components are being developed and there is definitely traction in the community. We are especially looking forward to the Android version.