Creating a new app
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.
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 --versionon 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.
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.
Once you have all of the above installed, we still a few more components to compile a react-native app:
volta install yarnin 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.
Start by creating a blank react-native app
npx react-native init [YOUR PROJECT NAME GOES HERE] --version 0.63.4
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.
Navigate into the directory:
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:
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:
npx react-native run-macos
Did it run?! Awesome! You can now open your folder and modify the
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.
We will start by adding some convenience commands to automate short tasks common for developing React Native apps. In your
package.jsonfile add the following lines to the
"macos": "react-native-macos run-macos",
"macos:install": "cd macos && pod install",
"nuke": "watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && yarn && yarn start --reset-cache",