How to Provide Support for React Native Apps on the macOS Platform

React Native is a framework developed by Facebook that is used to build the application on native platforms. It is preferred by most developers, due to its speed, agility, and ability to build hybrid applications in multiple platforms with an interactive user interface (UI). 

By default, React Native has built-in components and supportive packages, accessible through both the mobile native iOS and Android platforms. To access the applications in the macOS platform, Microsoft developed a macOS extension to React Native. 

For more information about the macOS implementation, click here. As exhaustive as this resource may be, many React native developers have a tough time understanding it. So, here is a step-by-step guide on how to set up a React Native application on the macOS platform.

Prerequisites

1. Create a React Native app.
2. Install CocoaPods, a packet management tool to manage the dependencies for iOS development.
3. Make sure npm/yarn is installed in your machine. It is the package manager for JavaScript and used for fast and reliable dependency management.
4. Make sure the Mac devices are preinstalled with versions Mojave (10.14.6) or newer. 

Extending support for React Native apps on macOS

1. Create a react-native app with version 0.61.5 or newer. 

2. To support react-native-windows also, migrate the react-native-windows for the version (0.61.5) or newer.

3. Open the macOS terminal and navigate to the React Native project path and execute the following command to install React Native for macOS:

npx react-native-macos-init

4. The above command will create a macOS folder in the project:

5. Navigate to the newly created macos folder and execute the following command to install the pods:

pod install

After the above command is executed successfully, the following message is displayed:

6. Go to the root of the reactnative folder in the macOS terminal and execute the following command to run the React Native app on the macOS platform:

npx react-native run-macos

or

Using Xcode, open macos\react_native_macos_support.xcworkspace and click the Run button:

7. The build could fail due to certain modules not being supported by the macOS platform. In such cases, you have to remove the unsupported community modules and extensions from the package.

For example, the community modules and extensions, such as react-native-video, modal component from the React Native package, and so on.

If you experience such issues, refer to steps 8 and 9.

8. Remove the node modules folder completely and also delete the derived data using Xcode. Then, open the macOS terminal and navigate to the React Native project path and execute either of the following commands to install all the dependencies:

npm install

or

yarn install

9. Navigate to the newly created ios folder and remove the pod completely and reinstall the pods by using the following commands:

pod cache clean -all

pod deintegrate || rm -rf Pods

pod install

10. Also, make sure that the moduleName mentioned in AppDelegate is the same as the app name.

After the installation is successful, the macOS will load as follows:

Unsupported community modules and extensions

Some of the unsupported React Native community modules and extensions are:

1. react-native-video package, which is available in react-native-community.
2. model component available in the React Native package.
3. repeat and borderRadius properties of the Image component are not supported by the macOS platform.
4. Some of the properties of the button are also not supported.
5. DatePickerAndroid and DatePickerIOS components are available in the React Native package.

Sample Code Repository Detail:

https://github.com/IbrahimSulai/react_native_macos_support

For information on how to enable support For React Native apps on the Windows platform, please refer to my other blog.