Up and Going with React Native
We love coffee at Codecademy, so about a year ago I made an app for our office to help everyone make perfect coffee. It teaches you how to use a variety of brew methods, and the recipes are customizable. Fittingly, it’s named Coffeecademy.
In the past year, we’ve used Coffeecademy to brew hundreds of Chemexs and pour overs, so I thought this app might be fun for friends and family to use at home. At the office, this app runs in a web browser in full screen on a mounted iPad, but wouldn’t it be nice if this app worked on a phone?
This post will explain how I used React Native to turn the Coffeecademy web app into a native iOS app. In the process, I’ll introduce you to the main differences between React and React Native. By the end you’ll have the knowledge and tools you need to get started developing native apps.
Getting to React Native
Over the summer, I began learning Swift and Xcode in my free time to start making a Coffeecademy iOS app that I would eventually call Single Origin. While Apple’s developer tools are great, learning a new typed language as a side project is hard. It takes consistent practice and my free time was not consistent enough for the syntax and concepts to stick. I was able to make basic apps with Swift, but managing state and data was another level that I never quite grasped.
On the recommendation of a friend, I took a look at React Native, although I must admit I am wary of web app to native app technologies.
In the past, there have been technologies which promise to take web applications and convert them into mobile apps. They accomplished this by wrapping a web application in a mobile browser component and making an app which displays a full-screen browser. The user experience of these apps is always sub-par. Animations are laggy, buttons did not feel like real buttons, and worst of all, there isn’t much you can do as a developer to make them better.
I was pleasantly surprised by React Native. It’s vastly different from other technologies, as it doesn’t wrap your app in a mobile browser. Instead, it uses the device’s native elements to create apps indistinguishable from real native apps. After using browser wrapper technologies years ago, React Native blew me away.
What is React Native?
React Native lets React code target native devices and platforms instead of forcing your React app to target a web browser.
To achieve this, React Native requires you to use specialized JSX components and styles so it can do the work of hooking into the platform’s native APIs. You can access the real animation engine, toggles, navigation and much more.
React’s lifecycle methods, libraries, and React patterns behave the same. Want to make an app with Redux? It will work the same as a standard React app. Here’s a side-by-side comparison of a regular ol’ React component and its equivalent React Native component, with the differences highlighted:
The main differences to understand before diving in are React Native’s elements and styles.
Element comparison
React Native utilizes specialized components that utilize a device’s native code. These components are not platform specific; they are designed to target any platform (iOS and Android currently). Think of these components like a universal set of HTML components.
Taking a look through all the React Native components is incredibly helpful. You can find them in the official React Native documentation.
Styles comparison
React Native also needs a specialized style sheet written as a JavaScript object. The styles React Native supports are like cousins to CSS. They lack CSS shorthand, but they support the power of JavaScript to change styles based on your app’s state.
Here’s a comparison of CSS versus React Native Styles:
In addition to having different syntax and camelCased property names, React Native lacks many CSS properties (like text-transform). Instead of supporting browser-specific properties, like CSS must, React Native supports a limited subset of CSS properties.
Knowing which properties are supported and how to define them is not apparent throughout the official documentation. Luckily, there’s a helpful styling cheat sheet, which I found to be incredibly helpful.
Getting started
The fastest way to get started is with Expo. Expo will create a React Native project for you and run it locally. Running your app locally will let you interact with it live on a device, and you’ll be able to see any logs as you tap through your app on Expo.
Expo also provides many helpful components that let you do more with React Native, like playing sounds and saving to a device’s local storage. I found that other react native libraries require you to interact with Xcode, making your app specific to one platform. Expo provides the most useful of these components, with no additional setup.
One other huge advantage of using Expo is that it builds your app in such a way that you can deliver bug fixes and improvements to the app over the air once it’s in the wild. This way, you can update your app’s code, and users will get the update without having to do a full app update.
To get started, follow the steps on Expo’s website. Once you’re up and running, check out their documentation.
From Coffeecademy to Single Origin
After two weeks, I rebuilt the coffee brewing app I built for the office into an iOS app named Single Origin. I was able to reuse a lot of the logic in the original React web app and many of the libraries (like Lodash, Moment, and Mustache) in the React Native app.
The main hurdles were learning React Native’s specialized components. First, there are many of them and some of them produce specific behavior. Second, the supported style properties within React Native are close enough to real CSS properties to make them confusing. Reading over documentation and searching for what you’re trying to accomplish early and often is a must.
The final hurdle for my development was getting the app set up in the first place. After struggling to get create-react-native-app to work as expected, I found Expo. With Expo, you can go from nothing to a working app in no time. It will create an initial repo, run a server, and aid in publishing your app to the App Stores.
Try out the app I built with React Native and brew some coffee. It’s named Single Origin and it’s available on the Apple App Store and the Google Play Store.
Interested in working for Codecademy? Check out our jobs page!
