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

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

Now that we have seen a bit of the internals of React Native and how to manipulate the root container, our next step is to expose native functionality to our JavaScript code. A good case to learn this with is adding persistence to our app. 

React Native has some built-in persistence mechanisms, but we will take it a step further by storing our app's data in the macOS keychain, to ensure that no other app can access it.

This and the following lessons will be the most detailed in the course, and a lot of the functionality we will add into our app will pivot on this knowledge, so pay attention!

We've briefly mentioned the React Native bridge before, but it's now time to expand on this. The bridge allows our JavaScript code to communicate with native code. We will create our very own private API to call native functionality from our JavaScript. React Native provides certain macros that auto-generate code and will create JavaScript-callable bindings.

We will start by adding a native dependency to write data to the macOS keychain. We will modify our project's 

 as a dependency to allow us to write and read from the keychain. A quick look at the README should give you an idea of how to use its API.

target 'buildingApps-macOS' do
  platform :macos, '10.13'
  use_native_modules!
  use_react_native!(
    :path => '../node_modules/react-native-macos',
    
    # To use Hermes, install the `hermes-engine-darwin` npm package, e.g.:
    #   $ yarn add 'hermes-engine-darwin@~0.5.3'
    #
    # Then enable this option:
    #   :hermes_enabled => true
  )

  # Pods specifically for macOS target
  pod 'KeychainAccess'
end

 and you will see CocoaPods installing our new native dependency.

We will create a new Obj-C file (in XCode, file explorer -> right click -> new file). Give it the same name as our project, with a "native" suffix 

 to make it clear it is our own native code module we are running, e.g. 

---
title: Securely storing data on the macOS keychain
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/x9kcyrw1wa
---

Now that we have seen a bit of the internals of React Native and how to manipulate the root container, our next step is to expose native functionality to our JavaScript code. A good case to learn this with is adding persistence to our app. 

React Native has some built-in persistence mechanisms, but we will take it a step further by storing our app's data in the macOS keychain, to ensure that no other app can access it.

This and the following lessons will be the most detailed in the course, and a lot of the functionality we will add into our app will pivot on this knowledge, so pay attention!

### About the React Native bridge

We've briefly mentioned the React Native bridge before, but it's now time to expand on this. The bridge allows our JavaScript code to communicate with native code. We will create our very own private API to call native functionality from our JavaScript. React Native provides certain macros that auto-generate code and will create JavaScript-callable bindings.

### Adding keychain framework

We will start by adding a native dependency to write data to the macOS keychain. We will modify our project's `Podfile`, by adding [Keychain Access](https://github.com/kishikawakatsumi/KeychainAccess) as a dependency to allow us to write and read from the keychain. A quick look at the README should give you an idea of how to use its API.

```ruby { actualFilename=./protected/macos/Podfile endLine=19 startLine=4 statedFilename=macos/Podfile url=https&#x3A;//gitlab.com/fullstackio/books/building-react-native-apps-for-mac/module_04/lesson_01.01/protected/macos/Podfile#L4 }
target 'buildingApps-macOS' do
  platform :macos, '10.13'
  use_native_modules!
  use_react_native!(
    :path => '../node_modules/react-native-macos',
    
    # To use Hermes, install the `hermes-engine-darwin` npm package, e.g.:
    #   $ yarn add 'hermes-engine-darwin@~0.5.3'
    #
    # Then enable this option:
    #   :hermes_enabled => true
  )

  # Pods specifically for macOS target
  pod 'KeychainAccess'
end
```

Add the `pod 'KeychainAccess'` line, then in your terminal run `yarn macos:install` and you will see CocoaPods installing our new native dependency.

### Creating the bridging code

We will create a new Obj-C file (in XCode, file explorer -> right click -> new file). Give it the same name as our project, with a "native" suffix `.m` to make it clear it is our own native code module we are running, e.g. `buildingAppsNative.m`. Add the following content:

```objective-c { actualFilename=./protected/macos/buildingApps-macOS/BuildingAppsNative.m endChar=384 endLine=10 startChar=0 startLine=1 statedFilename=macos/buildingApps-macOS/BuildingAppsNative.m url=https&#x3A;//gitlab.com/fullstackio/books/building-react-native-apps-for-mac/module_04/lesson_01.01/protected/macos/buildingApps-macOS/BuildingAppsNative.m }
#import "React/RCTBridgeModule.h"

I think it should be NSString *  because it is a pointer to the object. RCEXTERNMETHOD(keychainWrite: (NSString)key payload:(NSString ) payload resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)Like in the RN docs https://reactnative.dev/docs/native-modules-ios#exporting-swift

Dima Portenko

The macro accepts both. As you can see in the video the app still compiles and runs, so it's not an issue.

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

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

Lesson 2:

Links and further reading