Comparing React and React Native
Some of the differences I’ve found while working with React Native
In March of 2013, the team at Facebook released React: a JavaScript library with a heavy emphasis on efficiency and flexibility through the use of reusable components that manage their own state.
In 2015, the Facebook team took React and its concepts a step further by venturing into the territory of mobile development with the announcement of React Native. This new version of React would offer developers the ability to build out native mobile applications in a way more closely resembling development for the web.
After spending some time using both React and React Native on projects for Helpful Human, I’ve come to discover a few of the differences between them. Both React and React Native use JavaScript to render your application’s content, but while they may share the same concepts, a couple areas of execution, as well as the final output, operate differently.
These are some of the differences I’ve found while working with React Native.
Setting up
Starting a new project with React Native, you’ll realize quickly that setup is a bit easier than with React. The majority of setup is handled with a simple command in the command line `npm install -g react-native-cli`.
With a single command, you’re handed almost everything you need to start on the development of your project. One thing you will still need to install is the IDE. That’s where Xcode and Android Studio come into play.
Xcode
For app development on iOS devices on Mac, you’ll be using Xcode. Xcode includes a litany of useful tools and features, but you’ll use a couple of them more than most. For example, the simulator will be the main method of viewing the UI work on your app. You’ll also be using Xcode to deploy to physical devices for testing and the app store for distribution.
Android Studio
For app development on Android devices, you’ll be using Android Studios. Much of what you’ll find in Xcode, you’ll find in Android Studio. Like Xcode, Android Studio includes many useful features and like Xcode, you’ll use a couple of them more than others. The simulator included with Android Studio supports a number of Android versions and a wider range of devices than Xcode given Apple’s ecosystem. Android Studio will also be used for testing, but unlike deployment on iOS, Android Studio isn’t used in the step of deploying to the Google Play Store.
DOM (without the browser)
On its own, React works by processing one or more components to create a representation of a desired view state. This representation is an object that is referred to as the “Virtual DOM”. The Virtual DOM acts as an interchange format that can be given to a renderer to paint something to the screen.
Note: DOM in this context is not necessarily the same as a DOM in a browser.
When using React on the web, the renderer is the DOM and the interchange format is converted to HTML elements. React Native differs by converting the contents of the Virtual DOM description into native UI elements. This offers the advantage of being able to use the native features and components available on the platform(s).
Components
At first, developing without HTML feels strange and different. React Native includes a number of prebuilt components for a variety of purposes and, luckily, some of these React Native components work as capable replacements to HTML elements you don’t have access to.
Some of the components you’ll find similar:
Text
The text component is used for — you guessed it — displaying text and replaces span, heading, and paragraph tags.
TextInput
The TextInput is used for capturing a user’s input and replaces both input and textarea tags.
View
The View component is used as a standard containing block, similar to a <div> element.
Of course, there are some components unique to React Native that are geared to improve performance and user experience. The ListView component is one such component.
ListView
The ListView component is used for displaying list items. This component does not have an obvious analog to HTML. For web, the browser automatically splits the view into tiles and renders each tile based on what’s currently in, or immediately outside of, the viewport window. Not all native platforms do this with their UI objects.
List view is a special component that helps enforce this behavior as an optimization.
It’s important to keep in mind while developing for multiple platforms that even though most components will work with both iOS and Android (with the exception of some having slight visual differences), some components are platform specific in order to provide that platform’s native functionality.
An example would be the discrepancies between the iOS and Android toolbars. For Android, you would opt to use the ToolbarAndroid component, which wraps the Android Toolbar Widget and allows you to display a logo, menu icon, title, and a number of actions.
Styling
React and React Native each have their own ways of styling components and views. Since React renders HTML elements to a virtual DOM, styling is often done using the same standard as the web: CSS.
The output from React matches that of a traditional HTML webpage, allowing you to use the standard methods of styling when it comes to making your site pretty.
With React Native, you don’t have the same freedom. Since React Native outputs a native application, there isn’t a DOM with HTML elements that can be styled using the usual methods like CSS.
Styling in React Native is instead handled with Javascript objects that modify the properties of the underlying native components. It does not use CSS, though several properties feel similar.
Below is an example of a component with JavaScript styling below:
Flexbox
Positioning elements in React Native is handled with Flexbox and, well… Flexbox. So, you’ll want to become familiar with how to use it, given the lack of alternatives. Once past the initial difficulty of learning how to position elements just the way you want though, it’s not bad to work with at all.
Animations
CSS being gone also means that the accompanying animations are absent as well. There is, however, a replacement library called Animated baked right in. The Animated library is configurable in order to provide developers the freedom to create the exact animation they need.
Platform specific styles and appearance
Another important note when it comes to developing for multiple platforms is that some elements will have differing appearances and styles. A good example of this is the Picker component. You can use the Picker component with both platforms, but the way it displays will be different. These differences can be seen in the image below with the iOS version on the left and the Android version on the right.
Development Menu
React Native comes packaged with its own set of development tools that should cover most of your debugging needs. To open the development menu on an iOS simulator, you can use the shortcut Command⌘ + D. For the Android simulator, the shortcut is Command⌘ + M. A few of the tools I use most frequently:
Debug JS Remotely
Uses the development tools in Chrome to help with debugging JavaScript.
Live Reloading
Reloads the entire app whenever you make a change to your code.
Inspector
Not unlike a web browser inspector. This allows you to click through individual elements of a view similar.
Hot Reloading
Updates and reloads the specific files changed in your code without losing any of the current state of your application.
Conclusion
React Native provides a unique alternative to building native mobile applications with other languages such as Objective C (iOS) or Java (Android). Having the option of using a more familiar language like JavaScript is much more appealing to the average web developer trying to build for mobile platforms.
There are discrepancies between React and React Native, but, ultimately, there’s enough in common to assuage some of the challenges in transitioning from vanilla to native. When transitioning from React to React Native (or React Native to React), you’ll realize just how much of the same logic and processes are shared between the two and how the bigger difference lies in the components and how React Native renders them.
