React Native is a 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). framework By default, React Native has built-in components and supportive packages, accessible through both the mobile native and Android platforms. To access the applications in the macOS platform, Microsoft developed a macOS extension to React Native. iOS For more information about the implementation, click . 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. macOS here Prerequisites Create a . React Native app Install , a packet management tool to manage the dependencies for iOS development. CocoaPods Make sure / is installed in your machine. It is the package manager for JavaScript and used for fast and reliable dependency management. npm yarn 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 or newer. version 0.61.5 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 , open macos\react_native_macos_support.xcworkspace and click the Run button: Using Xcode 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: react-native-video package, which is available in react-native-community. model component available in the React Native package. repeat and borderRadius properties of the Image component are not supported by the macOS platform. Some of the properties of the button are also not supported. 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.

Facebook

Microsoft

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

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

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

Cross-Platform vs Native: The 50 Shades of Mobile App Development

A Developer's Dilemma: Flutter vs. React Native

Building a Private Messaging Chat App with React-Native: An Essential Guide

Choosing the Right Development Strategy for Your Android and iOS Apps

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

Cross-Platform vs Native: The 50 Shades of Mobile App Development

A Developer's Dilemma: Flutter vs. React Native

Building a Private Messaging Chat App with React-Native: An Essential Guide

Choosing the Right Development Strategy for Your Android and iOS Apps

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps