Hotwire Tech Blog

Scribes from Hotwire Engineering

Goal

Currently at Hotwire, when developing new mobile features, the business logic and UI is written separately for the Android and iOS app. This is especially time-consuming when developing features that have a lot of overlap. Not only does this take more development time, but also both platforms end up having their own bugs. We felt that it was an interesting time to try out a cross-development tool to build features in a more unified way. One of the promising tools we decided to try out is React Native, a mobile, JavaScript Framework. In this post, I will be discussing the basics and advantages of React Native. In Part 2, I will be going into more detail regarding integrating React Native with our existing app.

Compilation

What separates React Native from other mobile frameworks is that React Native can create a truly native app experience. First, a node server loads the JavaScript Bundle, which is parsed to define the components. Then, these components that one defines in JavaScript are compiled down to platform-specific widgets to maintain proper native design.

React Paradigm

React Native is based on the React paradigm, which allows one to create components and define its state to handle different actions. For example, rather than writing unnecessary if-else conditions with button click-handlers, one can simply modify a component’s state and therefore the way it is rendered as so:

<Text style={ this.state.pressStatus? 
styles.buttonTextPress : styles.buttonText }>
Sign in
</Text>

 

UI Design

Android and iOS can maintain the same design or they can be separated into different files with their own styles. Customizing these views is very easy, as each rendered component can map to a style, which is defined in a familiar css-like style. The biggest advantage with UI changes when developing is that one no longer has to recompile and rerun the entire app to see changes. By turning on hot reloading or simply clicking ⌘ r, viewing changes is quick as reloading a webpage.

buttonText: {
 fontSize: 17,
 color: 'rgb(0, 188, 242)',
 alignSelf: 'center',
 fontFamily: 'Lato-Semibold'
 }

 

Leveraging Native Modules

Possibly the biggest advantage in React Native is that one is still able to make calls to Android/iOS specific functions and create modules that would be complicated, require multithreaded code or call a corresponding Native Module that React Native has not abstracted yet. For example, displaying a native popup to log the user in the iOS app and sending a dictionary back to the JavaScript side:

NativeLoginModule.showLoginPopup((err,response) => {
this.setState({
 userLoggedIn: true,
 });
return response;
 });

 

Here, showLoginPopup() calls a native module and can handle any responses/error on the Javascript side. For more details, check out Part 2.

Conclusion

React Native definitely looks promising and handles mobile development in a convenient way while still abiding to native principles. Check out the next post to learn more about how to integrate React Native with your existing native app.