microsoft/react-native-macos

A framework for building native macOS apps with React.

React Native for macOS

Build native macOS apps with React.

See the official React Native website for an introduction to React Native.

React Native is a framework developed by Facebook that enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere.

• Declarative. React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
• Component-Based. Build encapsulated components that manage their state, then compose them to make complex UIs.
• Developer Velocity. See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
• Portability. Reuse code across iOS, Android, and other platforms.

React Native is developed and supported by many companies and individual core contributors. Find out more in our ecosystem overview.

This repository is a working fork of facebook/react-native that adds support for the official React Native for macOS implementation from Microsoft.

You can read more about the macOS implementation in our website - React Native for Windows + macOS. You can read about how we manage this fork in our docs folder.

Contents

• Requirements
• Building your first React Native app
• Documentation
• How to Contribute
• Code of Conduct
• License

📋 Requirements

React Native apps may target iOS 13.4 and Android 5.0 (API 21) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like Expo can be used to work around this.

🎉 Building your first React Native app

Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:

• Trying out React Native
• Creating a New Application
• Adding React Native to an Existing Application

Requirements

You can run React Native for macOS apps on Mac devices with versions Catalina (10.15) or newer.

For a full and detailed list of the system requirements and how to set up your development platform, see our System Requirements documentation on our website.

Getting Started

See the Getting Started Guide on our React Native for Windows + macOS website to build your first React Native for macOS app.

Logging Issues

Search the existing issues and try to make sure your problem doesn’t already exist before opening a new issue. If your issue doesn't exist yet, try to make sure you provide as much information as possible to us so we can help you sooner. It’s helpful if you include information like:

• The version of macOS, React Native, React Native macOS extension where you ran into the issue.
• A stack trace and reduced repro case when possible.
• Ensure the appropriate template is used when filing your issue(s).

Contributing

See Contributing guidelines for how to set up your fork of the repo and start a PR to contribute to React Native for macOS.

Good First Issue and help wanted are great starting points for PRs.

Documentation

The full documentation for React Native can be found on the documentation website. The React Native documentation discusses components, APIs, and topics that are specific to React Native. For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.

The source for the React Native documentation and website is hosted on a separate repo, @facebook/react-native-website.

React Native for Windows + macOS has its own separate documentation site where Windows and macOS specific information, like API docs and blog updates live. We are still working on the documentation for macOS, contributions are welcome!

If you're looking for sample code, just browse the RNTester folder for examples

Git flow and syncing with upstream

For more details on how this fork handles keeping up with upstream, and how the general git flow works, check out this dedicated document.

License

The React Native for macOS extension, including modifications to the original Facebook source code, and all newly contributed code is provided under the MIT License. Portions of the React Native for macOS extension derived from React Native are copyright Facebook.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

🚀 Upgrading

Upgrading to new versions of React Native may give you access to more APIs, views, developer tools, and other goodies. See the Upgrading Guide for instructions.

React Native releases are discussed in this discussion repo.

👏 How to Contribute

The main purpose of this repository is to continue evolving React Native core. We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bug fixes and improvements. Read below to learn how you can take part in improving React Native.

Code of Conduct

Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our Contributing Guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.

Open Source Roadmap

You can learn more about our vision for React Native in the Roadmap.

Good First Issues

We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

Discussions

Larger discussions and proposals are discussed in @react-native-community/discussions-and-proposals.

📄 License

React Native is MIT licensed, as found in the LICENSE file.

React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.

react-native-macos's Issues

Create `rnpm-plugin-macos` package

(internal https://office.visualstudio.com/APEX/_workitems/edit/3480076)

Make macOS apps work using CocoaPods

Supersedes #57

• Get RNTester for iOS to work again using CocoaPods #209
• Get RNTester to work using CocoaPods #211
• Create macOS example app using CocoaPods

Update Podfile.lock as part of CD setup

Currently CD cuts new builds when changes are made, but that means the next time somebody runs cd RNTester && pod install the lockfile will get updated to encode the new version numbers.

Simply replacing the numbers in the lockfile won’t work, because the lockfile has a checksum that would be out-of-sync.

Layout Animations

Not working: just snaps to final state.

Contribute RCTSwapInstanceMethods/RCT_motionEnded swizzle fix upstream.

(internal https://office.visualstudio.com/APEX/_workitems/edit/3236806)

ReactNativeRenderer mutates Errors that are thrown, making it very difficult to get the actual Message and Stack

🐛 Bug Report

Errors are mutated between when they are thrown in a component, and caught in an ErrorBoundary. ReactNativeErrorRenderer-dev.js "helpfully" mutates the Error.message to include the Name and ComponentStack, assumedly to provide a more readable error to display to the user. The problem is that this makes the original message very difficult to access (for Telemetry, for example), requiring some very hacky and unreliable string parsing. I have also noticed the Stack getting mutated occasionally but I haven't been able to nail down where/when that's happening, and it's not a 100% repro.

Code is here:
https://github.com/microsoft/react-native/blob/58e28996ec8cf6913e0e627b8d25e450c99a59ee/Libraries/Renderer/oss/ReactNativeRenderer-dev.js#L14644

To Reproduce

Wrap a component in an ErrorBoundary, and display the Error.message and Error.stack in its renderError callback. Throw a new Error("message") in the component's render function. Notice that the message has been mutated from when it was thrown, to when it was caught.

Expected Behavior

The Error should not be mutated between being thrown in the component and caught in the ErrorBoundary. The Name, Message, and Stack should all be easily accessed. If I want to display a different error message, I can do that string concatenation myself.

Code Example

https://snack.expo.io/Skd7-bGmH

Environment

React Native Environment Info:
System:
OS: Windows 10
CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v4 @ 3.60GHz
Memory: 16.99 GB / 31.92 GB
Binaries:
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD

CocoaPods generates duplicate UUIDs when adding macOS target

Having both an iOS and a macOS target leads to duplicate UUIDs, requiring:

install! 'cocoapods', :deterministic_uuids => false

Ideally this would not happen when we do generate deterministic UUIDs.

Contribute RCTTextInput textInputShouldHandleDeleteBackward, ignoresTextAttributes, predictedText upstream

RCTTextInput textInputShouldHandleDeleteBackward, ignoresTextAttributes, predictedText were added to the fork to support subclasses of RCTTextInput and allowing the subclass to control specific text input behavior. This is used by Microsoft subclasses of RCTTextInput but would be useful to anyone subclassing.
(internal https://office.visualstudio.com/APEX/_workitems/edit/3237349)

Slider

setThumbTintColor: unrecognized selector: missing on RCTSlider.
Regression post .60 merge.
Ejected to RNC.

RCTTouchHandler assert

Some NSControls are causing a "Touch is already recorded. This is a critical bug." assert in RCTTouchHandler. Probably need to make all NSControls with target/selector props set go through the same code path as NSText isSelectable which synthesizes a mouseUp: event.

Remove MSVC Specific Patch in YGStyle.h

This patch was meant to force a preprocessor definition when MSVC is used. This can be removed once RNW is off the microsoft/react-native fork.

Contribute RCTBridge+Cxx.h/mm upstream

The categories created in RCTBridge+Cxx.h RCTBridge+Cxx.mm are need for implementations of react native subclasses used internal at Microsoft but would be useful to anyone subclassing some core native components.

(internal https://office.visualstudio.com/APEX/_workitems/edit/2710739)

Transforms

Rotations are broken – NOP.

[Android] Various focus management fixes (tab, arrow keys with hardware keyboard) in ScrollViews

[Android] Office ReactNativeHost integration changes

Make modern autolinking work for macOS

https://github.com/react-native-community/cli/blob/master/packages/platform-ios/native_modules.rb

RTLExample

RCTImageView setOnClick: unrecognized selector.
Regression post .60 merge.

Contribute RCTScrollView cached _body, use contentView prop instead of ivar upstream

Bug fix that needs to be contributed upstream
(internal https://office.visualstudio.com/APEX/_workitems/edit/3237370)

Nesting ScrollView scrolling behavior

Issue on macOS with ScrollView nested in ScrollView.
Inner scroll view preventing outer Scrollview from scrolling if scrollwheel event happens in inner ScrollView.
Manfiests in RNTester FlatList and SectionList.
Regression.

macos should be included in the default list of platforms for metro

Accessibility props for macOS need to be normalized with core

Need to normalize mac accessibility props per Facebook refactoring.

• accessibilityState
• reconcile accessibilityRole / accessibilityTraits
• reconcile onMagicTap / onAccessiblityTap

[Android] Buid time native module annotation processing

We do process all the react native module annotations (ReactModule, ReactMethod, ReadProp etc.) and generate static classes at build time to avoid runtime reflection when native module calls are dispatched first time. This has saved a few hundred milliseconds on boot latency.

[Android] Custom font loading in text controls

Layout Issues

Too many layout events fired create a feedback loop that can cause flashing and drop events resulting in incorrect final layout. This occurs when resizing a windows, like RNTester window.

Box Shadow

Broken in macOS – NOP

Alert

Need to consolidate AlertMacOS + AlertIOS to the new Alert common API.

Screen Scale issues

React-native ios has a global screen scale cached. React-native macOS tried to make scale a state passed around, but its broken in some cases: the biggest being that there is no event if a RCTView hosted in an NSWindow moves from one NSScreen to another with a different scale.
BUG 316335

[Android] Javascript engine integration (V8 vs Hermes)

RNTester e2e tests

The macOS and iOS e2e tests need to at least click on each RNTester test.

Investigate Removing V8Executor

@hansenyy didn't believe this is still in use. We seem to still be building it on Android. We should investigate removing it.

Contribute TextInput.js: getTextViewHandle upstream

The fork has modified TextInput.js to include a getTextViewHandle() method used when subclassing TextInput as is done in internal components within Microsoft. The accessor would be useful to anyone sublclassing TextInput.
(internal https://office.visualstudio.com/APEX/_workitems/edit/3237340)

Linux support

Similar to macOS, would love to see support for react native apps being able to target Linux as well.

ActionSheetIOS Share is offset

Share sheet needs same fix as regular action sheet for target offset issue.
Ejected to RNC.

RNTester omissions

• RCTRootView test missing.
• Shapshot / Screenshot test missing.
• TurboModule test missing.
• XMLHttpRequest test missing.

mac OSX support

• [ x] Review the documentation: https://facebook.github.io/react-native
• [ x] Search for existing issues: https://github.com/facebook/react-native/issues
• [ x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (4) x64 Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz
Memory: 3.68 GB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.1.0 - ~/.nvm/versions/node/v11.1.0/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v11.1.0/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 26, 28
Build Tools: 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.7.0 => 16.7.0
react-native: Microsoft/react-native#master => 0.58.6-microsoft.31
npmGlobalPackages:
react-native-cli: 2.0.1

Description

Hello, I'm trying to integrate this react-native into an existing empty macOs app using cocoapods. I'm receiving the following error:

"[!] The platform of the target my-react-xp-app (macOS 10.14) is not compatible with React/Core (0.58.6-microsoft.31), which does not support osx."

Is macos supported on the current master branch? thanks.

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

Remove need to change package.json version in repo

Upstream is always set to v1000, whereas ours is updated for each version/build.

[Android] Consolidate security fixes in the Microsoft fork

The fixes are make to replace the usage of "vsnprintf" with safer "vsnprintf_s" equivalents. This was required to satisfy office devmain security audits when we used to build copy and build react-native in office.

There are fixes in react-native, fbjni and ygjni libraries.

These changes are no longer necessary as we don't build react-native in office environment anymore.

Also, the risk on using "vsnprintf" is not well accepted. All the potential risks of the API are when the formatting string is a dynamic string
taken as an argument, instead of a literal string. All our usages of vsnprintf are with literal format strings. Hence, one option is to revert the changes in the repo.

Clean up merges: onAccessibilityTap, accessibilityHint, accessibilityRole and accessibilityStates

onAccessibilityTap and accessibilityHint were back ported or separately implemented in our fork. Facebook also made implementations that we've merged, but there are some artifacts of our implementation that need to be cleaned up.
accessibilityRole and accessibilityStates to replace depreciated accessibilityTraits.

(internal https://office.visualstudio.com/APEX/_workitems/edit/3236817)

Move macOS CocoaPods additions upstream

Contribute RCTUIKit upstream

To port react-native iOS to macOS, we created a RCTUIKit.h simple abstraction layer. It creates some common constructs, like RCTPlatformView which on iOS is just a UIView and on macOS is an NSView subclass with iOS-like methods and properties added.

These changes make up the vast majority of our differences when diffing this fork and facebook react-native. By contributing the RCTUIKit changes upstream it will be much easier to manage merges from facebook and could ultimately allow us to stop being a fork at a future point.

(internal https://office.visualstudio.com/APEX/_workitems/edit/2323670)

[Android] Consolidate third party library (Folly, Boost, Glog, Double-conversion) dependencies

Facebook open source repo downloads these dependencies at build time (from various project archives in github) .. This was not acceptible when building react-native within office. Hence, we had fixed the gradle scripts to consume static pre-downloaded copies of these dependencies.

Do we need to continue doing this ? Is it safe to follow what FB open source repo does ?

Focus events

• macOS bubbling issue as described in BUG 3719618.
• Also focus/blur and onFocus/onBlue events on non-TextInput need to be contributed upstream.
• Office depends on it for all platforms (android, ios, macos, windows).

[Android] Push DialogModule fix to support non-FragmentActivity host, upstream.

DialogModule in FB open source repo assumes that react native root view is hosted in a FragmentActivity. The office apps' host activity is not a FragrmentActivity. We had to fix the DialogModule to avoid the assumption.

DatePickerMacOS

DatePickerIOS ejected and renamed DatePicker.
Should consolidate DatePickerMacOS to DatePicker when contributed.
Ejected to RNC.

Contribute focus/blur changes upstream

(internal https://office.visualstudio.com/DefaultCollection/APEX/_workitems/edit/3917401)

Update README.md to be react-native-macos

(internal https://office.visualstudio.com/APEX/_backlogs/backlog/Canvas%20UX/Features/?workitem=3480082)

Consume `rnpm-plugin-macos` in react-native-macos

(internal https://office.visualstudio.com/APEX/_workitems/edit/3480080)

ScrollView scroll indicators set to always on are not adjusting layout

If ScrollView scroll indicators are set to always be shown (System Preferences > General > Show scroll bars: Always) layout is happening as if the view port is the size of the ScrollView if no scroll indicators are present which results in the scroll indicators always showing something outside of the viewport.

(internal https://office.visualstudio.com/DefaultCollection/APEX/_workitems/edit/3972121)

Picker

PickerIOS.macos.js is incorrectly mapped to Unimplemented View.
Regression post .60 merge.
Dropdown has same offset issues as ActionSheetIOS which was just fixed.
Ejected to RNC.

Contribute isDevModeEnabled in Release upstream

This fork of react-native has refactored such that the compile time #if RCT_DEV constructs are now a runtime settings via [[bridge devSettings] isDevModeEnabled].

This allows a product to allow debugging of react-native in Release builds of the native app.

(internal https://office.visualstudio.com/APEX/_workitems/edit/3237395)