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
- Objective-C main thread rendering the UI and transferring user interactions to the bridge
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.