React Native

A Quick Guide to Get Started with React Native on macOS for iOS

When you think about creating a native mobile app that can run on both iOS and Android, it has to be written in native code either in Swift for iOS or in Java for Android. 

But it’s hard to get started when you’re new to mobile development.

Now, you have a better choice that allows you to just write one codebase app and it can run on cross platforms. That’s React Native.

What is React Native?

React Native is a Javascript framework for building native mobile apps for Android and iOS. The name itself indicates that it uses React, a JavaScript library for building user interfaces for the web, in combination with native development. 

Basically, you code your application once in Javascript and then your code will be compiled to native code for iOS and Android environments where your application accesses native platform components, APIs, and other features. Thus, your React Native application is a native app and it does not run in the device’s integrated mobile browser (WebView). It needs to run on a simulator or your actual physical iOS or Android device. 

Prerequisite Knowledge

You should have at least JavaScript and React concepts to get started with React Native. Additionally, even better you might have to know HTML and CSS as well. This is because when you will work completely on the front end part in React Native development. Having all front-end related knowledge definitely enables you to quickly understand and build your first React Native app.

Set Up the React Native Development Environment

You can set up a development environment in different ways depending on your operating systems such as Window, Linux, and macOS. 

Here I’m going to set up on macOS and run the React Native app on iOS.

Firstly, I need to install dependencies like Node, Watchman, the React Native command line interface, and Xcode. 

Of course, you may think about why we need Xcode since we won’t write native code. The main reason is that it works as necessary tooling to help you develop your React Native app for iOS.

Install Node

I will use Homebrew to install Node & Watchman. If you’ve not installed Homebrew on your macOS, make sure you install it.

Install Homebrew using the below command in Terminal.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

After Homebrew, install Node using the command.

brew install node

Make sure that the Node version is 10 or newer.

Install Watchman

Watchman is a tool for watching changes in the file system. It’s mainly used to speed up the compilation process so that it helps boost performance for your development. What you’ve changed in the file will reflect faster on the app.

Run this command in your terminal: 

brew install watchman

Install Xcode

In your macOS you simply open the App Store, search Xcode and install it. Also, you have to ensure it is a newer version in order to be able to run your React Native app via iOS simulator shipped with Xcode.

Install Command Line Tools in Xcode

You also have to install Xcode Command Line Tools. 

Open Xcode > “Preferences…” from the Xcode menu and then select the Locations panel. At Command Line Tools, choose to install the latest version.

Install an iOS Simulator in Xcode

Open Xcode > “Preferences…”  and select the Components tab. You see various simulators but it’s recommended to install the latest version one. 

CocoaPods

CocoaPods manages library dependencies for Xcode projects. CocoaPods creates a single text file called Podfile where all dependencies are stored. It will resolve dependencies between libraries, fetch the resulting source code, and then link it together in an Xcode workspace to build your project.

Since CocoaPods is built with Ruby, it’s pretty simple to install it on macOS (or you can do it using Ruby Version manager (RVM). But, let’s keep the installation simple with standard Ruby available on macOS.

In your terminal run the command.

sudo gem install cocoapods

Command Line Interface (CLI) for React Native

You will perform common actions for your React Native project by using React Native’s built-in command line interface like initiating and starting the project. 

As I’ve already installed Node, I would like to use the current version that has been shipped with Node. The command begins with npx react-native <command>.

Create a React Native Project

I will create a React Native project with Command Line Interface (CLI). Let’s get started with our popular “Hello World” project.

npx react-native init MyFirstApp

Run your React Native Application

Open your terminal and follow the steps:

Step 1: Navigate to your React Native project folder and run the command

npx react-native start

Step 2: Open a new terminal tab and navigate to your React Native project, then run

npx react-native run-ios

You will see your app running in the iOS simulator.

Then, you can modify the file named App.js inside your React Native project folder.

Replace default codes with the following codes.

import React from 'react';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default App;

After you’ve saved the file, go back to see your app in the simulator. You’ll see “Hello World” instead. Because you have Watchman installed your app corresponds to the changes in the files quickly.

Here you see your “Hello World” app is running.

That’s it!

I think it’s pretty much it to play around React Native for the first time. What I’ve laid out aiming to help you go through as quickly as possible; especially on macOS for iOS. 

I hope you’ve got some feelings and thoughts about it and consider diving deeply into React Native to build a native app for iOS and Android in the future.

Please comment below on how you’ve started your React Native app or share opinions you’re welcome!   

Sinal Meas

Sinal is a co-founder of Zenapp Studio. He's a software developer, internet marketer, and startup entrepreneur. When he's not in front of the computer, he is on Aikido mats. He is Cambodian and currently lives in Siem Reap, Cambodia.

Popular Posts

Leave a Reply

Your email address will not be published. Required fields are marked *