Add ScrollView Indicator Overlay style

Libraries/Components/ScrollView/ScrollView.js

@@ -480,6 +480,12 @@ export type Props = $ReadOnly<{|
    * instead of vertically in a column. The default value is false.
    */
   horizontal?: ?boolean,
+  /**
+   * When true, the scroll view's indicator is shown in an overlay. // [macOS
+   * This does does not take up any content view space.
+   * https://developer.apple.com/documentation/appkit/nsscrollerstyle/nsscrollerstyleoverlay // macOS]
+   */
+  hasOverlayStyleIndicator?: ?boolean, // [macOS]
   /**
    * If sticky headers should stick at the bottom instead of the top of the
    * ScrollView. This is usually used with inverted ScrollViews.

Libraries/Components/ScrollView/ScrollViewViewConfig.js

@@ -46,6 +46,7 @@ const ScrollViewViewConfig = {
     fadingEdgeLength: true,
     indicatorStyle: true,
     inverted: true,
+    hasOverlayStyleIndicator: true,
     keyboardDismissMode: true,
     maintainVisibleContentPosition: true,
     maximumZoomScale: true,

React/Views/ScrollView/RCTScrollView.h

@@ -55,6 +55,7 @@
 @property (nonatomic, assign) BOOL snapToEnd;
 @property (nonatomic, copy) NSString *snapToAlignment;
 @property (nonatomic, assign) BOOL inverted;
+@property (nonatomic, assign) BOOL hasOverlayStyleIndicator; // [macOS]
 
 // NOTE: currently these event props are only declared so we can export the
 // event names to JS - we don't call the blocks directly because scroll events

React/Views/ScrollView/RCTScrollView.m

@@ -541,6 +541,15 @@ - (void)setInverted:(BOOL)inverted
     _onInvertedDidChange(@{});
   }
 }
+
+- (void)setHasOverlayStyleIndicator:(BOOL)hasOverlayStyle
+{
+  if (hasOverlayStyle == true) {
+    self.scrollView.scrollerStyle = NSScrollerStyleOverlay;
+  } else {
+    self.scrollView.scrollerStyle = NSScrollerStyleLegacy;
+  }
+}
 #endif // macOS]
 
 RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)

React/Views/ScrollView/RCTScrollViewManager.m

@@ -102,6 +102,7 @@ - (RCTPlatformView *)view // [macOS]
 RCT_EXPORT_OSX_VIEW_PROPERTY(onInvertedDidChange, RCTDirectEventBlock) // [macOS]
 RCT_EXPORT_OSX_VIEW_PROPERTY(onPreferredScrollerStyleDidChange, RCTDirectEventBlock) // [macOS]
 RCT_EXPORT_VIEW_PROPERTY(inverted, BOOL)
+RCT_EXPORT_OSX_VIEW_PROPERTY(hasOverlayStyleIndicator, BOOL)
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 /* __IPHONE_13_0 */
 RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustsScrollIndicatorInsets, BOOL)
 #endif

packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js

@@ -493,14 +493,24 @@ exports.examples = examples;
 
 // [macOS
 if (Platform.OS === 'macos') {
-  examples.push({
-    title: '<ScrollView> (inverted = true/false)\n',
-    description:
-      "You can display <ScrollView>'s child components in inverted order",
-    render: function (): React.Node {
-      return <InvertedContentExample />;
+  examples.push(
+    {
+      title: '<ScrollView> (inverted = true/false)\n',
+      description:
+        "You can display <ScrollView>'s child components in inverted order",
+      render: function (): React.Node {
+        return <InvertedContentExample />;
+      },
     },
-  });
+    {
+      title: '<ScrollView> (hasOverlayStyleIndicator = true/false)\n',
+      description:
+        "You can display <ScrollView>'s indicator using overlay style",
+      render: function (): React.Node {
+        return <ScrollIndicatorOverlayExample />;
+      },
+    },
+  );
 }
 
 const InvertedContentExample = () => {
@@ -531,6 +541,27 @@ const InvertedContentExample = () => {
     </>
   );
 };
+
+const ScrollIndicatorOverlayExample = () => {
+  const [hasOverlayStyleIndicator, setHasOverlayStyleIndicator] =
+    useState(true);
+  return (
+    <View>
+      <ScrollView
+        style={[styles.scrollView, {height: 200}]}
+        hasOverlayStyleIndicator={hasOverlayStyleIndicator}
+        nestedScrollEnabled>
+        {ITEMS.map(createItemRow)}
+      </ScrollView>
+      <Button
+        label={
+          'showsOverlayStyleIndicator: ' + hasOverlayStyleIndicator.toString()
+        }
+        onPress={() => setHasOverlayStyleIndicator(!hasOverlayStyleIndicator)}
+      />
+    </View>
+  );
+};
 // macOS]
 
 const AndroidScrollBarOptions = () => {