Dev with React Native
Introduction to React Native
In my previous article, I pointed out the different problems of creating a hybrid app using web technologies. I’m not against them. I’m a big supporter. The web is the only open platform where everyone can create freely, easily while being accessible on any kind of connected devices without the monopoly of any companies. The history of it is quite crazy because no one thought of its current use nowadays, yet a website made in 1995 is still retro compatible with modern browsers. Which technology can say the same ?
As a Front End developer, my main focus is to make the best experience for the people using the tools that I create. This doesn’t need to make systematically a native mobile app. Maybe you just need a website like the Financial Times did. An interesting poll realised in 2014 in the USA, shows that more than 65% of smartphone users didn’t download apps for the last three months.
Or maybe an HTML5 mobile one is enough. Many apps are using the flexibility of web technologies to deliver new experience quicker instead of passing by a dedicated update: Twitter, Instagram, Uber, Line (the Japanese WhatsApp, used by + 100 million Android devices), etc. And you don’t need to be a huge company to make a great UX. You can check Osper, a mobile banking app for young people, made with Cordova and Backbone
Fancy animations aren’t mandatory to have a great user experience. You should read the article from Sophie Paxton on “Stop Gratuitous UI Animation”.
Now let’s get back to our business. React Native is a project created by Facebook engineers to create mobile applications (iOS only for now, Android is coming soon) nearly in the same way they have written web apps. It’s using JavaScriptCore framework, an Objective-C wrapper around WebKit’s JavaScript engine. It’s not a web view but a JavaScript engine, like inside Node.js. So basically, React Native is a bridge between:
- JavaScript thread returning a dictionary of UI elements
- Objective-C main thread rendering the UI and transferring user interactions to the bridge
Your logic code should stay in the JavaScript thread most of the time, but you might need heavy performance (background worker) or accessing to a native API which is not accessible in JavaScript. In that case, you will have to write some Objective-C code.
I discovered recently IBM Watson Cloud, which is in short, an artificial intelligence as a service (article about it coming soon!) providing APIs related to machine learning, tone analyser, semantic text analysis and voice recognition. It’s the last one that caught my attention and I wanted to give a try. Basically through this tutorial, we will create an app that transcript your voice into text. Fairly simple but the interesting part is writing our own React Native plugins to call native APIs from the JavaScript side. This first part will just be an introduction while the others will connect to the microphone, Bluemix APIs, etc.
Firstly, you need to create a Bluemix account which is the cloud services brand of IBM. After login, you need to enable Speech to Text API for your project. Finally, you’ll get credentials which look like that:
I’m assuming that you have Xcode and Homebrew in your Mac OS X. You should have io.js (ES6 compatible Node.js) installed too. If you don’t have the last one, grab NVM to switch easily between Node.js versions. Now run these commands:
Open the generated xcodeproj file in the folder and run the app:
In terms of Developer Experience, React Native feels like home for Front End devs. There are a built-in hot-loader which refresh the app by just pressing Cmd+R (no need to rebuild the project) and a debugger using Chrome DevTools.
As an introduction, we will just display an alert when we touch that button so let’s add it after the instructions. The button element in React Native is called TouchableHighlight. Replace the content of the method render in your main React component:
You’ll get a nice red page saying it “Can’t find variable: TouchableHighlight”. This is due to the missed require on top of the file:
We want to handle the press event:
The message is displayed on Xcode console. Instead of logging, we want to show an alert. We need to require and call AlertIOS and here we are!
As certainly iOS users, you certainly want to try on your device. If you want to run it in development mode (dev options like live reloading are available by shaking the device), you’ll need to modify one line in the file AppDelegate.m and select your connected device in Xcode.
In case you want to release your app for production (no dev server on your Mac), you have to change one line in the file AppDelegate.m, run this command and rebuild the build in Xcode. Enjoy :)
If you can’t wait the next part (it’s coming, don’t worry) and want to look for the final app, check the sources here and the screenshots below.
Come to see me doing live coding session at the React London meetup next week !
