Welcome to Building React Native Apps for Mac

Introduction

Walkthrough

What is React Native? The Mac and Mobile Web App Framework

React Native Pros and Cons for Building macOS Apps

How to Setup a New React Native Mac App

Getting started

State Management in React Native for Mac With MobX Library

How to Solve JavaScript Module Resolution with File Structure

How to Fetch Data From a REST API in a React Native Mac App

How to Create an API Store in React Native with Axios

How to Add Tailwind CSS to a React Native Mac App

How to Use and Customize Tailwind CSS in React Native

Behavior Encapsulation and React Native Reusable Components

Add React Native Navigation on macOS with React Navigation

Building bones of the application

Add Conditional Styles to React Native With Classnames

Optimize React Native with FlatLists and Native Webview

How to Write Unit Tests with Jest React Native Testing Library

Advanced JavaScript topics

How React and macOS Communicate with React Native Bridge

How to Add React Native Vector Icons and Custom Fonts

How to Build a macOS Menu Bar App With React Native

How to Store Data on macOS Keychain with React Native Bridge

How to Expose macOS Native Modules to React JavaScript

How to Quit a React Native App on macOS

How to Add Hover and Focus States to a React Native Mac App

Limitations of Building Mac Apps With React Native

Build and Publish a React Native App on the Mac App Store

MacOS specific functionality

Advanced macOS functionality

How to Support Multiple Windows in React Native

Auto Launch a React Native Mac App With Swift Dependencies

How to Send macOS Notifications From a React Native App

Add macOS Drag and Drop Support to a React Native App

How to Handle Events in a React Native Mac App

Advanced topics

Good bye

Links and further reading

Links and references

react-native

node.js

typescript

tailwind-rn

In this course we will explore react-native as a framework for building macOS applications. Unlike web based tools, react-native offers a lot of benefits when it comes to performance and the ability to leverage native functionality.

React-native is not without its difficulties and the jump to a desktop environment requires not only novel technical solutions but also a different way of dealing with APIs and UI patterns.

In 30 lessons we cover setting up a scalable application architecture, connecting with native macOS APIs and exploring some workarounds. The course comes with a lot of new techniques, code samples and detailed instructions to develop React Native apps that are truly equal to native alternatives.

Taught by Oscar Franco, who has worked in several companies as team lead and CTO, released a bunch of React Native apps and has contributed many of the newest latest techniques for react-native-macos.

In this course we will learn how to create modern macOS applications using react-native, take advantage of all the goodies react-native provides on the mac.

Building React Native Apps for Mac

How to set up a scalable architecture for your application

How to leverage native APIs with JavaScript

How to create great desktop native experiences

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:

If you have installed node via volta or NVM, Xcode might have some trouble picking up your node binary you will need to add 

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 

. 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:

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.

npx react-native init [YOUR PROJECT NAME GOES HERE] --version 0.63.4

 version you are using, otherwise things might not work as expected. As of this writing the latest version is 0.63.4.

---
title: How to Setup a New React Native Mac App
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/fuu54a38u8
---

### 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**](https://brew.sh), 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**](https://volta.sh) or [**NVM**](https://github.com/nvm-sh/nvm) to simplify installing and managing different versions. Once you have Volta installed you can install Node by simply running `volta install node@14` 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**](https://code.visualstudio.com), which you can easily install via Homebrew: `brew install --cask visual-studio-code`.

:::important
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.
:::

:::important
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](https://microsoft.github.io/react-native-windows/docs/0.62/rnm-getting-started). With time the installation process might have changed, so always check for the latest instructions.

1.  Start by creating a blank react-native app

```bash
npx react-native init [YOUR PROJECT NAME GOES HERE] --version 0.63.4
```

:::important
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.
:::

2.  Navigate into the directory:

```bash
cd projectName
```

3.  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:

```bash
npx react-native-macos-init
```

4.  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:

```bash
npx react-native run-macos
```

![Running app](https://d2uusema5elisf.cloudfront.net/courses/building-react-native-apps-for-mac/module_01/lesson_02.01/public/workingApp.png)

5.  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:

```json
"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",
```

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Building React Native Apps for Mac

Module 1: Introduction

Introduction:

Start Here

Introduction: (0:58)

Welcome to Building React Native Apps for Mac

Module 2: Getting started

Lesson 1: (1:25)

Walkthrough

Lesson 2:

What is React Native? The Mac and Mobile Web App Framework

Lesson 3: (2:36)

React Native Pros and Cons for Building macOS Apps

Lesson 4: (11:18)

How to Setup a New React Native Mac App

Module 3: Building bones of the application

Lesson 1: (16:15)

State Management in React Native for Mac With MobX Library

Lesson 2: (7:57)

How to Solve JavaScript Module Resolution with File Structure

Lesson 3: (4:53)

How to Fetch Data From a REST API in a React Native Mac App

Lesson 4: (16:39)

How to Create an API Store in React Native with Axios

Lesson 5: (7:17)

How to Add Tailwind CSS to a React Native Mac App

Lesson 6: (10:43)

How to Use and Customize Tailwind CSS in React Native

Lesson 7: (10:18)

Behavior Encapsulation and React Native Reusable Components

Lesson 8: (14:56)

Add React Native Navigation on macOS with React Navigation

Module 4: Advanced JavaScript topics

Lesson 1: (6:56)

Add Conditional Styles to React Native With Classnames

Lesson 2: (9:40)

Optimize React Native with FlatLists and Native Webview

Lesson 3: (11:06)

How to Write Unit Tests with Jest React Native Testing Library

Module 5: MacOS specific functionality

Lesson 1:

How React and macOS Communicate with React Native Bridge

Lesson 2: (7:31)

How to Add React Native Vector Icons and Custom Fonts

Lesson 3: (18:35)

How to Build a macOS Menu Bar App With React Native

Lesson 4: (10:35)

How to Store Data on macOS Keychain with React Native Bridge

Lesson 5: (13:25)

How to Expose macOS Native Modules to React JavaScript

Lesson 6: (7:44)

How to Quit a React Native App on macOS

Lesson 7: (7:23)

How to Add Hover and Focus States to a React Native Mac App

Lesson 8:

Limitations of Building Mac Apps With React Native

Lesson 9: (5:00)

Build and Publish a React Native App on the Mac App Store

Module 2: Advanced topics

Lesson 1:

Advanced macOS functionality

Lesson 2: (15:45)

How to Support Multiple Windows in React Native

Lesson 3: (13:29)

Auto Launch a React Native Mac App With Swift Dependencies

Lesson 4: (11:58)

How to Send macOS Notifications From a React Native App

Lesson 5: (23:58)

Add macOS Drag and Drop Support to a React Native App

Lesson 6: (15:37)

How to Handle Events in a React Native Mac App

Module 6: Links and references

Lesson 1: (0:34)

Good bye