From bd1516e4adf1e4f2463f8231ba5dfeb6971f80da Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 12 Jan 2023 16:20:36 -0800
Subject: [PATCH 01/11] Don't compute additional horizontal padding for
 indicator if the content view is empty

This was causing default padding when height was 0
---
 React/Views/ScrollView/RCTScrollContentView.m | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/React/Views/ScrollView/RCTScrollContentView.m b/React/Views/ScrollView/RCTScrollContentView.m
index 1e2d25658fab09..0ef8a23f802729 100644
--- a/React/Views/ScrollView/RCTScrollContentView.m
+++ b/React/Views/ScrollView/RCTScrollContentView.m
@@ -51,7 +51,8 @@ - (void)reactSetFrame:(CGRect)frame
   // the contents will overflow causing the scroll indicators to appear unnecessarily.
   NSScrollView *platformScrollView = [scrollView scrollView];
   if ([platformScrollView scrollerStyle] == NSScrollerStyleLegacy) {
-    CGFloat horizontalScrollerHeight = [platformScrollView hasHorizontalScroller] ? NSHeight([[platformScrollView horizontalScroller] frame]) : 0;
+    BOOL hasHorizontalScrollerAndNotEmpty = [platformScrollView hasHorizontalScroller] && platformScrollView.documentView.frame.size.height > 0;
+    CGFloat horizontalScrollerHeight = hasHorizontalScrollerAndNotEmpty ? NSHeight([[platformScrollView horizontalScroller] frame]) : 0;
     CGFloat verticalScrollerWidth = [platformScrollView hasVerticalScroller] ? NSWidth([[platformScrollView verticalScroller] frame]) : 0;
 
     RCTScrollContentLocalData *localData =

From 1669e39e3626e0cdb19ca31f6a1bec271263fa36 Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 12 Jan 2023 16:24:49 -0800
Subject: [PATCH 02/11] Switch the horizontal/vertical scroller size

These were both returning the same value so masked the bug
---
 React/Views/ScrollView/RCTScrollContentView.m | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/React/Views/ScrollView/RCTScrollContentView.m b/React/Views/ScrollView/RCTScrollContentView.m
index 0ef8a23f802729..3080b42d5de15d 100644
--- a/React/Views/ScrollView/RCTScrollContentView.m
+++ b/React/Views/ScrollView/RCTScrollContentView.m
@@ -55,10 +55,8 @@ - (void)reactSetFrame:(CGRect)frame
     CGFloat horizontalScrollerHeight = hasHorizontalScrollerAndNotEmpty ? NSHeight([[platformScrollView horizontalScroller] frame]) : 0;
     CGFloat verticalScrollerWidth = [platformScrollView hasVerticalScroller] ? NSWidth([[platformScrollView verticalScroller] frame]) : 0;
 
-    RCTScrollContentLocalData *localData =
-      [[RCTScrollContentLocalData alloc]
-      initWithVerticalScrollerWidth:horizontalScrollerHeight
-           horizontalScrollerHeight:verticalScrollerWidth];
+    RCTScrollContentLocalData *localData = [[RCTScrollContentLocalData alloc] initWithVerticalScrollerWidth:verticalScrollerWidth horizontalScrollerHeight:horizontalScrollerHeight];
+
     [[[scrollView bridge] uiManager] setLocalData:localData forView:self];
   }
 

From 176a118d4b1f90622ecb870833bd76c9bd9c06ae Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 12 Jan 2023 16:31:25 -0800
Subject: [PATCH 03/11] Split up inset examples to be vertical/horizontal

---
 .../examples/ScrollView/ScrollViewExample.js  | 72 +++++++++++++++----
 1 file changed, 57 insertions(+), 15 deletions(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 6077bd8540fb88..3a243a02cfaf7a 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -253,10 +253,17 @@ const examples = ([
     },
   },
   {
-    title: '<ScrollView> Scroll Indicator\n',
-    description: 'Adjust properties of the scroll indicator.',
+    title: '<ScrollView> Vertical Scroll Indicator\n',
+    description: 'Adjust properties of the vertical scroll indicator.',
     render: function (): React.Node {
-      return <ScrollIndicatorExample />;
+      return <ScrollIndicatorVerticalExample />;
+    },
+  },
+  {
+    title: '<ScrollView> Horizontal Scroll Indicator\n',
+    description: 'Adjust properties of the horizontal scroll indicator.',
+    render: function (): React.Node {
+      return <ScrollIndicatorHorizontalExample />;
     },
   },
   {
@@ -700,7 +707,7 @@ const ScrollToOptions = () => {
   );
 };
 
-const ScrollIndicatorExample = () => {
+const ScrollIndicatorVerticalExample = () => {
   const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
   const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
     useState(true);
@@ -712,7 +719,6 @@ const ScrollIndicatorExample = () => {
         style={[styles.scrollView, {height: 200}]}
         contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
         scrollIndicatorInsets={scrollIndicatorInsets}
-        showsHorizontalScrollIndicator={showsHorizontalScrollIndic}
         showsVerticalScrollIndicator={showsVerticallScrollIndic}
         nestedScrollEnabled>
         {ITEMS.map(createItemRow)}
@@ -726,29 +732,65 @@ const ScrollIndicatorExample = () => {
         onPress={() =>
           scrollIndicatorInsets == null
             ? setScrollIndicatorInsets({
-                top: 10,
-                left: 10,
-                bottom: 10,
-                right: 10,
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
               })
             : setScrollIndicatorInsets(null)
         }
       />
       <Button
         label={
-          'showsHorizontalScrollIndicator: ' +
-          showsHorizontalScrollIndic.toString()
+          'showsVerticalScrollIndicator: ' +
+          showsVerticallScrollIndic.toString()
+        }
+        onPress={() => setShowsVerticalScrollIndic(!showsVerticallScrollIndic)}
+      />
+    </View>
+  );
+};
+
+const ScrollIndicatorHorizontalExample = () => {
+  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
+  const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
+    useState(true);
+  return (
+    <View>
+      <ScrollView
+        horizontal
+        style={[styles.scrollView, {height: 100}]}
+        contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
+        scrollIndicatorInsets={scrollIndicatorInsets}
+        showsHorizontalScrollIndicator={showsHorizontalScrollIndic}
+        nestedScrollEnabled>
+        {ITEMS.map(createItemRow)}
+      </ScrollView>
+      <Button
+        label={
+          scrollIndicatorInsets == null
+            ? 'setScrollIndicatorInsets'
+            : 'Reset scrollIndicatorInsets'
         }
         onPress={() =>
-          setShowsHorizontalScrollIndic(!showsHorizontalScrollIndic)
+          scrollIndicatorInsets == null
+            ? setScrollIndicatorInsets({
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+              })
+            : setScrollIndicatorInsets(null)
         }
       />
       <Button
         label={
-          'showsVerticalScrollIndicator: ' +
-          showsVerticallScrollIndic.toString()
+          'showsHorizontalScrollIndicator: ' +
+          showsHorizontalScrollIndic.toString()
+        }
+        onPress={() =>
+          setShowsHorizontalScrollIndic(!showsHorizontalScrollIndic)
         }
-        onPress={() => setShowsVerticalScrollIndic(!showsVerticallScrollIndic)}
       />
     </View>
   );

From 5824500c61a767854fd2c4e87264e5fe74da7239 Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 12 Jan 2023 22:23:00 -0800
Subject: [PATCH 04/11] Refactor scroll indicator examples into macOS specific
 examples

---
 .../examples/ScrollView/ScrollViewExample.js  | 209 +++++++++++-------
 1 file changed, 135 insertions(+), 74 deletions(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 3a243a02cfaf7a..6746b1563be245 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -253,24 +253,10 @@ const examples = ([
     },
   },
   {
-    title: '<ScrollView> Vertical Scroll Indicator\n',
-    description: 'Adjust properties of the vertical scroll indicator.',
+    title: '<ScrollView> Scroll Indicator\n',
+    description: 'Adjust properties of the scroll indicator.',
     render: function (): React.Node {
-      return <ScrollIndicatorVerticalExample />;
-    },
-  },
-  {
-    title: '<ScrollView> Horizontal Scroll Indicator\n',
-    description: 'Adjust properties of the horizontal scroll indicator.',
-    render: function (): React.Node {
-      return <ScrollIndicatorHorizontalExample />;
-    },
-  },
-  {
-    title: '<ScrollView> SnapTo Options\n',
-    description: 'Adjust properties of snapping to the scroll view.',
-    render: function (): React.Node {
-      return <SnapToOptions />;
+      return <ScrollIndicatorExample />;
     },
   },
 ]: Array<RNTesterModuleExample>);
@@ -500,14 +486,30 @@ 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> Vertical Scroll Indicator\n',
+      description: 'Adjust properties of the vertical scroll indicator.',
+      render: function (): React.Node {
+        return <ScrollIndicatorVerticalExample />;
+      },
+    },
+    {
+      title: '<ScrollView> Horizontal Scroll Indicator\n',
+      description: 'Adjust properties of the horizontal scroll indicator.',
+      render: function (): React.Node {
+        return <ScrollIndicatorHorizontalExample />;
+      },
+    },
+  );
 }
 
 const InvertedContentExample = () => {
@@ -538,6 +540,96 @@ const InvertedContentExample = () => {
     </>
   );
 };
+
+const ScrollIndicatorVerticalExample = () => {
+  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
+  const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
+    useState(true);
+  const [showsVerticallScrollIndic, setShowsVerticalScrollIndic] =
+    useState(true);
+  return (
+    <View>
+      <ScrollView
+        style={[styles.scrollView, {height: 200}]}
+        contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
+        scrollIndicatorInsets={scrollIndicatorInsets}
+        showsVerticalScrollIndicator={showsVerticallScrollIndic}
+        nestedScrollEnabled>
+        {ITEMS.map(createItemRow)}
+      </ScrollView>
+      <Button
+        label={
+          scrollIndicatorInsets == null
+            ? 'setScrollIndicatorInsets'
+            : 'Reset scrollIndicatorInsets'
+        }
+        onPress={() =>
+          scrollIndicatorInsets == null
+            ? setScrollIndicatorInsets({
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+              })
+            : setScrollIndicatorInsets(null)
+        }
+      />
+      <Button
+        label={
+          'showsVerticalScrollIndicator: ' +
+          showsVerticallScrollIndic.toString()
+        }
+        onPress={() => setShowsVerticalScrollIndic(!showsVerticallScrollIndic)}
+      />
+    </View>
+  );
+};
+
+const ScrollIndicatorHorizontalExample = () => {
+  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
+  const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
+    useState(true);
+  return (
+    <View>
+      <ScrollView
+        horizontal
+        style={[styles.scrollView, {height: 100}]}
+        contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
+        scrollIndicatorInsets={scrollIndicatorInsets}
+        showsHorizontalScrollIndicator={showsHorizontalScrollIndic}
+        nestedScrollEnabled>
+        {ITEMS.map(createItemRow)}
+      </ScrollView>
+      <Button
+        label={
+          scrollIndicatorInsets == null
+            ? 'setScrollIndicatorInsets'
+            : 'Reset scrollIndicatorInsets'
+        }
+        onPress={() =>
+          scrollIndicatorInsets == null
+            ? setScrollIndicatorInsets({
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+              })
+            : setScrollIndicatorInsets(null)
+        }
+      />
+      <Button
+        label={
+          'showsHorizontalScrollIndicator: ' +
+          showsHorizontalScrollIndic.toString()
+        }
+        onPress={() =>
+          setShowsHorizontalScrollIndic(!showsHorizontalScrollIndic)
+        }
+      />
+    </View>
+  );
+};
+
 // macOS]
 
 const AndroidScrollBarOptions = () => {
@@ -707,11 +799,16 @@ const ScrollToOptions = () => {
   );
 };
 
-const ScrollIndicatorVerticalExample = () => {
-  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
+const ScrollIndicatorExample = () => {
+  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState<null | {
+    bottom: number,
+    left: number,
+    right: number,
+    top: number,
+  }>(null);
   const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
     useState(true);
-  const [showsVerticallScrollIndic, setShowsVerticalScrollIndic] =
+  const [showsVerticalScrollIndic, setShowsVerticalScrollIndic] =
     useState(true);
   return (
     <View>
@@ -719,50 +816,8 @@ const ScrollIndicatorVerticalExample = () => {
         style={[styles.scrollView, {height: 200}]}
         contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
         scrollIndicatorInsets={scrollIndicatorInsets}
-        showsVerticalScrollIndicator={showsVerticallScrollIndic}
-        nestedScrollEnabled>
-        {ITEMS.map(createItemRow)}
-      </ScrollView>
-      <Button
-        label={
-          scrollIndicatorInsets == null
-            ? 'setScrollIndicatorInsets'
-            : 'Reset scrollIndicatorInsets'
-        }
-        onPress={() =>
-          scrollIndicatorInsets == null
-            ? setScrollIndicatorInsets({
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-              })
-            : setScrollIndicatorInsets(null)
-        }
-      />
-      <Button
-        label={
-          'showsVerticalScrollIndicator: ' +
-          showsVerticallScrollIndic.toString()
-        }
-        onPress={() => setShowsVerticalScrollIndic(!showsVerticallScrollIndic)}
-      />
-    </View>
-  );
-};
-
-const ScrollIndicatorHorizontalExample = () => {
-  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
-  const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
-    useState(true);
-  return (
-    <View>
-      <ScrollView
-        horizontal
-        style={[styles.scrollView, {height: 100}]}
-        contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
-        scrollIndicatorInsets={scrollIndicatorInsets}
         showsHorizontalScrollIndicator={showsHorizontalScrollIndic}
+        showsVerticalScrollIndicator={showsVerticalScrollIndic}
         nestedScrollEnabled>
         {ITEMS.map(createItemRow)}
       </ScrollView>
@@ -775,10 +830,10 @@ const ScrollIndicatorHorizontalExample = () => {
         onPress={() =>
           scrollIndicatorInsets == null
             ? setScrollIndicatorInsets({
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
+                top: 10,
+                left: 10,
+                bottom: 10,
+                right: 10,
               })
             : setScrollIndicatorInsets(null)
         }
@@ -792,6 +847,12 @@ const ScrollIndicatorHorizontalExample = () => {
           setShowsHorizontalScrollIndic(!showsHorizontalScrollIndic)
         }
       />
+      <Button
+        label={
+          'showsVerticalScrollIndicator: ' + showsVerticalScrollIndic.toString()
+        }
+        onPress={() => setShowsVerticalScrollIndic(!showsVerticalScrollIndic)}
+      />
     </View>
   );
 };

From e84a5b63490ebcfcc16970de26b327098af64301 Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 12 Jan 2023 22:32:04 -0800
Subject: [PATCH 05/11] Add back deleted example

---
 .../rn-tester/js/examples/ScrollView/ScrollViewExample.js  | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 6746b1563be245..99e8b89e44d5ff 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -259,6 +259,13 @@ const examples = ([
       return <ScrollIndicatorExample />;
     },
   },
+  {
+    title: '<ScrollView> SnapTo Options\n',
+    description: 'Adjust properties of snapping to the scroll view.',
+    render: function (): React.Node {
+      return <SnapToOptions />;
+    },
+  },
 ]: Array<RNTesterModuleExample>);
 
 if (Platform.OS === 'ios') {

From 345c73061bb0732e29f8bc0cf645b717b10d4b1f Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 12 Jan 2023 22:46:35 -0800
Subject: [PATCH 06/11] Use ContentSize to measure scrollview content height

---
 React/Views/ScrollView/RCTScrollContentView.m | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/React/Views/ScrollView/RCTScrollContentView.m b/React/Views/ScrollView/RCTScrollContentView.m
index 3080b42d5de15d..134d7217f47450 100644
--- a/React/Views/ScrollView/RCTScrollContentView.m
+++ b/React/Views/ScrollView/RCTScrollContentView.m
@@ -51,8 +51,8 @@ - (void)reactSetFrame:(CGRect)frame
   // the contents will overflow causing the scroll indicators to appear unnecessarily.
   NSScrollView *platformScrollView = [scrollView scrollView];
   if ([platformScrollView scrollerStyle] == NSScrollerStyleLegacy) {
-    BOOL hasHorizontalScrollerAndNotEmpty = [platformScrollView hasHorizontalScroller] && platformScrollView.documentView.frame.size.height > 0;
-    CGFloat horizontalScrollerHeight = hasHorizontalScrollerAndNotEmpty ? NSHeight([[platformScrollView horizontalScroller] frame]) : 0;
+    BOOL contentHasHeight = platformScrollView.contentSize.height > 0;
+    CGFloat horizontalScrollerHeight = ([platformScrollView hasHorizontalScroller] && contentHasHeight) ? NSHeight([[platformScrollView horizontalScroller] frame]) : 0;
     CGFloat verticalScrollerWidth = [platformScrollView hasVerticalScroller] ? NSWidth([[platformScrollView verticalScroller] frame]) : 0;
 
     RCTScrollContentLocalData *localData = [[RCTScrollContentLocalData alloc] initWithVerticalScrollerWidth:verticalScrollerWidth horizontalScrollerHeight:horizontalScrollerHeight];

From 6dcbeae17b5f35a66857a32bd784885d43aa4f16 Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 12 Jan 2023 22:48:23 -0800
Subject: [PATCH 07/11] Remove unused var

---
 packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 99e8b89e44d5ff..35bcc15b61a77f 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -550,7 +550,6 @@ const InvertedContentExample = () => {
 
 const ScrollIndicatorVerticalExample = () => {
   const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
-  const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
     useState(true);
   const [showsVerticallScrollIndic, setShowsVerticalScrollIndic] =
     useState(true);

From 813d18cd74a50240a88e7d6ab2fd17fb8bd5d18c Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 12 Jan 2023 23:01:05 -0800
Subject: [PATCH 08/11] Fix lint

---
 packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 35bcc15b61a77f..9214f1877a4804 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -550,7 +550,6 @@ const InvertedContentExample = () => {
 
 const ScrollIndicatorVerticalExample = () => {
   const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
-    useState(true);
   const [showsVerticallScrollIndic, setShowsVerticalScrollIndic] =
     useState(true);
   return (

From ab4881925934eff079a45b5b7b3ecd3da61c5589 Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Tue, 17 Jan 2023 10:11:54 -0800
Subject: [PATCH 09/11] Remove ios ScrollIndicatorExample from rn tester

---
 .../examples/ScrollView/ScrollViewExample.js  | 65 -------------------
 1 file changed, 65 deletions(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 9214f1877a4804..12397d60e33660 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -252,13 +252,6 @@ const examples = ([
       return <RemoveClippedSubviews />;
     },
   },
-  {
-    title: '<ScrollView> Scroll Indicator\n',
-    description: 'Adjust properties of the scroll indicator.',
-    render: function (): React.Node {
-      return <ScrollIndicatorExample />;
-    },
-  },
   {
     title: '<ScrollView> SnapTo Options\n',
     description: 'Adjust properties of snapping to the scroll view.',
@@ -804,64 +797,6 @@ const ScrollToOptions = () => {
   );
 };
 
-const ScrollIndicatorExample = () => {
-  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState<null | {
-    bottom: number,
-    left: number,
-    right: number,
-    top: number,
-  }>(null);
-  const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
-    useState(true);
-  const [showsVerticalScrollIndic, setShowsVerticalScrollIndic] =
-    useState(true);
-  return (
-    <View>
-      <ScrollView
-        style={[styles.scrollView, {height: 200}]}
-        contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
-        scrollIndicatorInsets={scrollIndicatorInsets}
-        showsHorizontalScrollIndicator={showsHorizontalScrollIndic}
-        showsVerticalScrollIndicator={showsVerticalScrollIndic}
-        nestedScrollEnabled>
-        {ITEMS.map(createItemRow)}
-      </ScrollView>
-      <Button
-        label={
-          scrollIndicatorInsets == null
-            ? 'setScrollIndicatorInsets'
-            : 'Reset scrollIndicatorInsets'
-        }
-        onPress={() =>
-          scrollIndicatorInsets == null
-            ? setScrollIndicatorInsets({
-                top: 10,
-                left: 10,
-                bottom: 10,
-                right: 10,
-              })
-            : setScrollIndicatorInsets(null)
-        }
-      />
-      <Button
-        label={
-          'showsHorizontalScrollIndicator: ' +
-          showsHorizontalScrollIndic.toString()
-        }
-        onPress={() =>
-          setShowsHorizontalScrollIndic(!showsHorizontalScrollIndic)
-        }
-      />
-      <Button
-        label={
-          'showsVerticalScrollIndicator: ' + showsVerticalScrollIndic.toString()
-        }
-        onPress={() => setShowsVerticalScrollIndic(!showsVerticalScrollIndic)}
-      />
-    </View>
-  );
-};
-
 const RemoveClippedSubviews = () => {
   const [removeClippedSubviews, setRemoveClippedSubviews] = useState(false);
   return (

From 7c7927b076354b9e1192090695161bde6c3f3811 Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Tue, 17 Jan 2023 14:34:52 -0800
Subject: [PATCH 10/11] Revert broken out scroll indicator changes to
 `ScrollViewExample.js`

Try to upstream these to RN core instead
---
 .../examples/ScrollView/ScrollViewExample.js  | 183 +++++++-----------
 1 file changed, 70 insertions(+), 113 deletions(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 12397d60e33660..3b5a2ce9eda5ab 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -252,6 +252,13 @@ const examples = ([
       return <RemoveClippedSubviews />;
     },
   },
+  {
+    title: '<ScrollView> Scroll Indicator\n',
+    description: 'Adjust properties of the scroll indicator.',
+    render: function (): React.Node {
+      return <ScrollIndicatorExample />;
+    },
+  },
   {
     title: '<ScrollView> SnapTo Options\n',
     description: 'Adjust properties of snapping to the scroll view.',
@@ -484,32 +491,16 @@ if (Platform.OS === 'ios') {
 }
 exports.examples = examples;
 
-// [macOS
+// TODO [(macOS GH#774)
 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 />;
-      },
-    },
-    {
-      title: '<ScrollView> Vertical Scroll Indicator\n',
-      description: 'Adjust properties of the vertical scroll indicator.',
-      render: function (): React.Node {
-        return <ScrollIndicatorVerticalExample />;
-      },
-    },
-    {
-      title: '<ScrollView> Horizontal Scroll Indicator\n',
-      description: 'Adjust properties of the horizontal scroll indicator.',
-      render: function (): React.Node {
-        return <ScrollIndicatorHorizontalExample />;
-      },
+  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 />;
     },
-  );
+  });
 }
 
 const InvertedContentExample = () => {
@@ -540,95 +531,7 @@ const InvertedContentExample = () => {
     </>
   );
 };
-
-const ScrollIndicatorVerticalExample = () => {
-  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
-  const [showsVerticallScrollIndic, setShowsVerticalScrollIndic] =
-    useState(true);
-  return (
-    <View>
-      <ScrollView
-        style={[styles.scrollView, {height: 200}]}
-        contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
-        scrollIndicatorInsets={scrollIndicatorInsets}
-        showsVerticalScrollIndicator={showsVerticallScrollIndic}
-        nestedScrollEnabled>
-        {ITEMS.map(createItemRow)}
-      </ScrollView>
-      <Button
-        label={
-          scrollIndicatorInsets == null
-            ? 'setScrollIndicatorInsets'
-            : 'Reset scrollIndicatorInsets'
-        }
-        onPress={() =>
-          scrollIndicatorInsets == null
-            ? setScrollIndicatorInsets({
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-              })
-            : setScrollIndicatorInsets(null)
-        }
-      />
-      <Button
-        label={
-          'showsVerticalScrollIndicator: ' +
-          showsVerticallScrollIndic.toString()
-        }
-        onPress={() => setShowsVerticalScrollIndic(!showsVerticallScrollIndic)}
-      />
-    </View>
-  );
-};
-
-const ScrollIndicatorHorizontalExample = () => {
-  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
-  const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
-    useState(true);
-  return (
-    <View>
-      <ScrollView
-        horizontal
-        style={[styles.scrollView, {height: 100}]}
-        contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
-        scrollIndicatorInsets={scrollIndicatorInsets}
-        showsHorizontalScrollIndicator={showsHorizontalScrollIndic}
-        nestedScrollEnabled>
-        {ITEMS.map(createItemRow)}
-      </ScrollView>
-      <Button
-        label={
-          scrollIndicatorInsets == null
-            ? 'setScrollIndicatorInsets'
-            : 'Reset scrollIndicatorInsets'
-        }
-        onPress={() =>
-          scrollIndicatorInsets == null
-            ? setScrollIndicatorInsets({
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-              })
-            : setScrollIndicatorInsets(null)
-        }
-      />
-      <Button
-        label={
-          'showsHorizontalScrollIndicator: ' +
-          showsHorizontalScrollIndic.toString()
-        }
-        onPress={() =>
-          setShowsHorizontalScrollIndic(!showsHorizontalScrollIndic)
-        }
-      />
-    </View>
-  );
-};
-
-// macOS]
+// ]TODO(macOS GH#774)
 
 const AndroidScrollBarOptions = () => {
   const [persistentScrollBar, setPersistentScrollBar] = useState(false);
@@ -797,6 +700,60 @@ const ScrollToOptions = () => {
   );
 };
 
+const ScrollIndicatorExample = () => {
+  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
+  const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
+    useState(true);
+  const [showsVerticallScrollIndic, setShowsVerticalScrollIndic] =
+    useState(true);
+  return (
+    <View>
+      <ScrollView
+        style={[styles.scrollView, {height: 200}]}
+        contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
+        scrollIndicatorInsets={scrollIndicatorInsets}
+        showsHorizontalScrollIndicator={showsHorizontalScrollIndic}
+        showsVerticalScrollIndicator={showsVerticallScrollIndic}
+        nestedScrollEnabled>
+        {ITEMS.map(createItemRow)}
+      </ScrollView>
+      <Button
+        label={
+          scrollIndicatorInsets == null
+            ? 'setScrollIndicatorInsets'
+            : 'Reset scrollIndicatorInsets'
+        }
+        onPress={() =>
+          scrollIndicatorInsets == null
+            ? setScrollIndicatorInsets({
+                top: 10,
+                left: 10,
+                bottom: 10,
+                right: 10,
+              })
+            : setScrollIndicatorInsets(null)
+        }
+      />
+      <Button
+        label={
+          'showsHorizontalScrollIndicator: ' +
+          showsHorizontalScrollIndic.toString()
+        }
+        onPress={() =>
+          setShowsHorizontalScrollIndic(!showsHorizontalScrollIndic)
+        }
+      />
+      <Button
+        label={
+          'showsVerticalScrollIndicator: ' +
+          showsVerticallScrollIndic.toString()
+        }
+        onPress={() => setShowsVerticalScrollIndic(!showsVerticallScrollIndic)}
+      />
+    </View>
+  );
+};
+
 const RemoveClippedSubviews = () => {
   const [removeClippedSubviews, setRemoveClippedSubviews] = useState(false);
   return (

From 7b6c39c0216589d1b97595f543ef9a31c9839379 Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Tue, 17 Jan 2023 14:36:55 -0800
Subject: [PATCH 11/11] Use correct macOS tags

---
 .../rn-tester/js/examples/ScrollView/ScrollViewExample.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 3b5a2ce9eda5ab..6077bd8540fb88 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -491,7 +491,7 @@ if (Platform.OS === 'ios') {
 }
 exports.examples = examples;
 
-// TODO [(macOS GH#774)
+// [macOS
 if (Platform.OS === 'macos') {
   examples.push({
     title: '<ScrollView> (inverted = true/false)\n',
@@ -531,7 +531,7 @@ const InvertedContentExample = () => {
     </>
   );
 };
-// ]TODO(macOS GH#774)
+// macOS]
 
 const AndroidScrollBarOptions = () => {
   const [persistentScrollBar, setPersistentScrollBar] = useState(false);