[Fabric] Implement showsVerticalScrollIndicatorValue and showsHorizontalScrollIndicatorValue for ScrollView (#14526)

Author: anupriya13

change/react-native-windows-a2bdf157-2fb8-43f8-8541-56ca50021d6c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement showsVerticalScrollIndicatorValue and showsVerticalScrollIndicatorValue for ScrollView",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/scrollViewSnapSample.tsx

@@ -33,6 +33,8 @@ export default class Bootstrap extends React.Component<{}, any> {
     keyboardDismiss: false,
     snapToOffsets: true,
     pagingEnabled: false,
+    showsHorizontalScrollIndicatorValue: true,
+    showsVerticalScrollIndicatorValue: false,
   };
 
   toggleSwitch1 = (value: boolean) => {
@@ -67,6 +69,14 @@ export default class Bootstrap extends React.Component<{}, any> {
     this.setState({keyboardDismiss: value});
   };
 
+  toggleSwitch9 = (value: boolean) => {
+    this.setState({showsHorizontalScrollIndicatorValue: value});
+  };
+
+  toggleSwitch10 = (value: boolean) => {
+    this.setState({showsVerticalScrollIndicatorValue: value});
+  };
+
   onRefresh = () => {
     this.setState({refreshing: true});
     void wait(2000).then(() => this.setState({refreshing: false}));
@@ -109,6 +119,42 @@ export default class Bootstrap extends React.Component<{}, any> {
               value={this.state.horizontalValue}
             />
           </View>
+          <View
+            style={{
+              flexDirection: 'column',
+              alignSelf: 'stretch',
+              justifyContent: 'center',
+              padding: 20,
+            }}>
+            <Text>
+              {' '}
+              {this.state.showsHorizontalScrollIndicatorValue
+                ? 'Show Horizontal Indicator'
+                : 'Hide Horizontal Indicator'}
+            </Text>
+            <Switch
+              onValueChange={this.toggleSwitch9}
+              value={this.state.showsHorizontalScrollIndicatorValue}
+            />
+          </View>
+          <View
+            style={{
+              flexDirection: 'column',
+              alignSelf: 'stretch',
+              justifyContent: 'center',
+              padding: 20,
+            }}>
+            <Text>
+              {' '}
+              {this.state.showsVerticalScrollIndicatorValue
+                ? 'Show Vertical Indicator'
+                : 'Hide Vertical Indicator'}
+            </Text>
+            <Switch
+              onValueChange={this.toggleSwitch10}
+              value={this.state.showsVerticalScrollIndicatorValue}
+            />
+          </View>
           <View
             style={{
               flexDirection: 'column',
@@ -246,6 +292,12 @@ export default class Bootstrap extends React.Component<{}, any> {
             snapToEnd={this.state.snapToEndValue}
             snapToAlignment={this.state.alignToStartValue ? 'start' : 'end'}
             horizontal={this.state.horizontalValue}
+            showsHorizontalScrollIndicator={
+              this.state.showsHorizontalScrollIndicatorValue
+            }
+            showsVerticalScrollIndicator={
+              this.state.showsVerticalScrollIndicatorValue
+            }
             onScrollBeginDrag={() => {
               console.log('onScrollBeginDrag');
             }}

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

@@ -83,7 +83,7 @@ struct ScrollBarComponent {
   void ContentSize(winrt::Windows::Foundation::Size contentSize) noexcept {
     m_contentSize = contentSize;
     updateThumb();
-    updateVisibility();
+    updateVisibility(m_visible);
   }
 
   void updateTrack() noexcept {
@@ -108,21 +108,25 @@ struct ScrollBarComponent {
 
     updateTrack();
     updateThumb();
-    updateVisibility();
+    updateVisibility(m_visible);
   }
 
-  void updateVisibility() noexcept {
+  void updateVisibility(bool visible) noexcept {
+    if (!visible) {
+      m_visible = false;
+      m_rootVisual.IsVisible(visible);
+      return;
+    }
+
     bool newVisibility = false;
     if (m_vertical) {
       newVisibility = (m_contentSize.Height > m_size.Height);
     } else {
       newVisibility = (m_contentSize.Width > m_size.Width);
     }
 
-    if (newVisibility != m_visible) {
-      m_visible = newVisibility;
-      m_rootVisual.IsVisible(m_visible);
-    }
+    m_visible = newVisibility;
+    m_rootVisual.IsVisible(m_visible);
   }
 
   void updateRootAndArrowVisualOffsets() noexcept {
@@ -561,7 +565,7 @@ struct ScrollBarComponent {
   winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
   winrt::Microsoft::ReactNative::ReactContext m_reactContext;
   const bool m_vertical;
-  bool m_visible{false};
+  bool m_visible{true};
   bool m_shy{false};
   int m_thumbSize{0};
   float m_arrowSize{0};
@@ -754,6 +758,14 @@ void ScrollViewComponentView::updateProps(
     m_scrollVisual.Horizontal(newViewProps.horizontal);
   }
 
+  if (!oldProps || oldViewProps.showsHorizontalScrollIndicator != newViewProps.showsHorizontalScrollIndicator) {
+    updateShowsHorizontalScrollIndicator(newViewProps.showsHorizontalScrollIndicator);
+  }
+
+  if (!oldProps || oldViewProps.showsVerticalScrollIndicator != newViewProps.showsVerticalScrollIndicator) {
+    updateShowsVerticalScrollIndicator(newViewProps.showsVerticalScrollIndicator);
+  }
+
   if (!oldProps || oldViewProps.decelerationRate != newViewProps.decelerationRate) {
     updateDecelerationRate(newViewProps.decelerationRate);
   }
@@ -1320,6 +1332,22 @@ double ScrollViewComponentView::getHorizontalSize() noexcept {
   return std::min((m_layoutMetrics.frame.size.width / m_contentSize.width * 100.0), 100.0);
 }
 
+void ScrollViewComponentView::updateShowsHorizontalScrollIndicator(bool value) noexcept {
+  if (value) {
+    m_horizontalScrollbarComponent->updateVisibility(true);
+  } else {
+    m_horizontalScrollbarComponent->updateVisibility(false);
+  }
+}
+
+void ScrollViewComponentView::updateShowsVerticalScrollIndicator(bool value) noexcept {
+  if (value) {
+    m_verticalScrollbarComponent->updateVisibility(true);
+  } else {
+    m_verticalScrollbarComponent->updateVisibility(false);
+  }
+}
+
 void ScrollViewComponentView::updateDecelerationRate(float value) noexcept {
   m_scrollVisual.SetDecelerationRate({value, value, value});
 }

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h

@@ -129,6 +129,8 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool scrollRight(float delta, bool animate) noexcept;
   void updateBackgroundColor(const facebook::react::SharedColor &color) noexcept;
   void updateStateWithContentOffset() noexcept;
+  void updateShowsHorizontalScrollIndicator(bool value) noexcept;
+  void updateShowsVerticalScrollIndicator(bool value) noexcept;
 
   facebook::react::Size m_contentSize;
   winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual m_scrollVisual{nullptr};