Senior development engineer at Imaginea technologies, tech enthusiast, open source contributor.
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.
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:
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:
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
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:
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
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:
Some of the unsupported React Native community modules and extensions are:
For information on how to enable support For React Native apps on the Windows platform, please refer to my other blog.