This video is available to students only

Creating a new app

Requirements#

To finish this first module, we are going to make sure you have everything ready to start developing your app and we'll do that by creating a clean React-Native-macOS app.

First you will need some tools installed in your machine:

  • Install Homebrew, which will allow you to install a lot of native packages in a straightforward manner. You can install it by using the one-liner provided in their website.

  • XCode which you can download from the app store. Download it, open it and accept whatever terms of use you need to accept.

  • NodeJS - I recommend you install Volta or NVM to simplify installing and managing different versions. Once you have Volta installed you can install Node by simply running volta install [email protected] on your terminal or nvm install v14. (M1 macs seem to have extra trouble when picking up the node binary and other tools like Ruby, I would recommend you go with nvm if you are using one).

  • You will need to make sure you have a working Ruby installation. This comes with macOS by default - run ruby --version on your terminal to check if it's installed already. If it's missing or you have any problems with it, try to (re)install with Homebrew by running brew install ruby.

  • You will need an editor for your code. Native developers may be used to using XCode itself, but XCode is a poor tool for development in general so I recommend what has become the standard in the JavaScript world by now: VSCode, which you can easily install via Homebrew: brew install --cask visual-studio-code.

If you have installed node via volta or NVM, Xcode might have some trouble picking up your node binary you will need to add $VOLTA_HOME/bin to your systems $PATH variable.

M1 macs also seem to have some trouble with ruby/cocoapods, you might want to re-install ruby via homebrew and then re-install cocoapods, that might solve your issue. Another possible solution is running CocoaPods in emulation mode; instead of running pod install you should run arch x86_64 pod install. This will download/install Rosetta in your mac and run the installation process as if on a Intel based machine.

Extra dependencies#

Once you have all of the above installed, we still a few more components to compile a react-native app:

  • Yarn is the package manager we will use for our JavaScript dependencies. Install it with Volta by typing volta install yarn in your terminal. You can add a dependency via the yarn add [library name] command from your terminal.

  • CocoaPods is the package manager we will use for our native macOS dependencies (we'll also use Swift Packages but we'll cover that in a later lesson). Install it by running sudo gem install cocoapods.

  • Watchman is a file system that React Native depends upon. Install it by running brew install watchman

Initializing a new app#

We are now set to go, but let me just remind you to always check the official site for React-Native-macOS and Windows. With time the installation process might have changed, so always check for the latest instructions.

  1. Start by creating a blank react-native app

It is important that the react-native version matches the react-native-macos version you are using, otherwise things might not work as expected. As of this writing the latest version is 0.63.4.

  1. Navigate into the directory:

  1. Run the react-native-macos installer command. This may take a while to complete as the script downloads all the dependencies and Cocoapods downloads the native dependencies:

  1. After that has finished you should be able to run the project. This may also take some time as it needs to compile all the native code necessary to run your app:

Running app

  1. Did it run?! Awesome! You can now open your folder and modify the App.js file in the root directory. If you save the file, React Native should immediately detect the change and update your app. MIND = BLOWN 🤯 right? Who knew developing native apps was so easy?! A quick note: besides your app, you should have seen a new terminal window open. This window contains Metro, the JavaScript packager that React Native uses. Don't close it, or your app will stop functioning. In case you want to close the app you can do so via keyboard shortcut (Cmd + Q).

Going a step further#

So, we could call it a day here and just jump to our next module, but the objective is to provide you with a real-world tool set, so we are going to set up a few useful commands and libraries to make developing your app a breeze.

  1. We will start by adding some convenience commands to automate short tasks common for developing React Native apps. In your package.json file add the following lines to the scripts section:

 

This page is a preview of Building React Native Apps for Mac

Start a new discussion. All notification go to the author.