Add support for macOS legacy scroller system setting.

[tom-un]

Please select one of the following

• I am removing an existing difference between facebook/react-native and microsoft/react-native 👍
• I am cherry-picking a change from Facebook's react-native into microsoft/react-native 👍
• I am making a fix / change for the macOS implementation of react-native
• I am making a change required for Microsoft usage of react-native

macOS scroll views are usually like iOS scroll views in that the scroll indicators only appear when scrolling and they overlay the content view. But in System Preferences > General, the user may choose 'Show scroll bars: Always' in which case the content view shrinks and a horizontal and/or vertical scroll indicator appears to the right and/or below the content view. In these cases the react-native content area was still being laid out as if the content view was the same size as the scroll view which would could cause the vertical scroll indicator to appear because the content was too wide.

This fix involves a change to the RCTScrollContentView reactSetFrame: method. When the react frame is being set, the method checks if the scrollerStyle property on the NSScrollView is NSScrollerStyleLegacy. If so it gets the width and height of the scrollers if visible and adjusts the frame size.

When the user changes the setting in System Preferences a NSPreferredScrollerStyleDidChangeNotification notification is sent. When this notification is sent, a react native event is fired to the onPreferredScrollerStyleDidChange prop of <ScrollView>. The javascript implementation of ScrollView handles the event and forces a re-render.

Focus areas to test

The RNTester app was used to validate the change with attention to the Scroll and List examples.

Microsoft Reviewers: Open in CodeFlow