From fa46b88bf3a50136b4ae5fcb7a7a58e1b82b3214 Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Mon, 14 Apr 2025 12:58:44 +0530 Subject: [PATCH 1/5] Implement showsVerticalScrollIndicatorValue and showsVerticalScrollIndicatorValue for ScrollView --- .../Samples/scrollViewSnapSample.tsx | 52 +++++++++++++++++++ .../Composition/ScrollViewComponentView.cpp | 37 ++++++++++++- .../Composition/ScrollViewComponentView.h | 2 + 3 files changed, 90 insertions(+), 1 deletion(-) diff --git a/packages/playground/Samples/scrollViewSnapSample.tsx b/packages/playground/Samples/scrollViewSnapSample.tsx index 70d8d760663..9ab3ec608cf 100644 --- a/packages/playground/Samples/scrollViewSnapSample.tsx +++ b/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} /> + + + {' '} + {this.state.showsHorizontalScrollIndicatorValue + ? 'Show Horizontal Indicator' + : 'Hide Horizontal Indicator'} + + + + + + {' '} + {this.state.showsVerticalScrollIndicatorValue + ? 'Show Vertical Indicator' + : 'Hide Vertical Indicator'} + + + { 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'); }} diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 9451e2cf054..7c68b400ac8 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -112,6 +112,11 @@ struct ScrollBarComponent { } void updateVisibility() noexcept { + if (!m_visible) { + m_rootVisual.IsVisible(m_visible); + return; + } + bool newVisibility = false; if (m_vertical) { newVisibility = (m_contentSize.Height > m_size.Height); @@ -125,6 +130,13 @@ struct ScrollBarComponent { } } + void updateVisibility(bool visible) noexcept { + if (visible != m_visible) { + m_visible = visible; + m_rootVisual.IsVisible(m_visible); + } + } + void updateRootAndArrowVisualOffsets() noexcept { if (m_vertical) { m_rootVisual.RelativeSizeWithOffset({m_arrowSize, 0.0f}, {0.0f, 1.0f}); @@ -561,7 +573,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}; @@ -753,6 +765,14 @@ void ScrollViewComponentView::updateProps( if (!oldProps || oldViewProps.horizontal != newViewProps.horizontal) { m_scrollVisual.Horizontal(newViewProps.horizontal); } + + if (!oldProps || oldViewProps.showsHorizontalScrollIndicator != newViewProps.showsHorizontalScrollIndicator) { + updateShowsHorizontalScrollIndicator(newViewProps.showsHorizontalScrollIndicator); + } + + if (!oldProps || oldViewProps.showsVerticalScrollIndicator != newViewProps.showsVerticalScrollIndicator) { + updateShowsVerticalScrollIndicator(newViewProps.showsVerticalScrollIndicator); + } } void ScrollViewComponentView::updateState( @@ -1316,4 +1336,19 @@ 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); + } +} } // namespace winrt::Microsoft::ReactNative::Composition::implementation diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index 1fe3289866c..7d6640ac62e 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h @@ -128,6 +128,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}; From 8b2b99b776246d7222907112e39d850f18798f22 Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Mon, 14 Apr 2025 12:59:04 +0530 Subject: [PATCH 2/5] Change files --- ...ative-windows-a2bdf157-2fb8-43f8-8541-56ca50021d6c.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-a2bdf157-2fb8-43f8-8541-56ca50021d6c.json diff --git a/change/react-native-windows-a2bdf157-2fb8-43f8-8541-56ca50021d6c.json b/change/react-native-windows-a2bdf157-2fb8-43f8-8541-56ca50021d6c.json new file mode 100644 index 00000000000..724ab6783fa --- /dev/null +++ b/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": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} From b64084f5040968f1442fa51d21686997c4ca3e8d Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Mon, 14 Apr 2025 15:55:05 +0530 Subject: [PATCH 3/5] Update ScrollViewComponentView.cpp --- .../Composition/ScrollViewComponentView.cpp | 24 +++++++------------ 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 7c68b400ac8..9d62cfbcf5e 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/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,12 +108,13 @@ struct ScrollBarComponent { updateTrack(); updateThumb(); - updateVisibility(); + updateVisibility(m_visible); } - void updateVisibility() noexcept { - if (!m_visible) { - m_rootVisual.IsVisible(m_visible); + void updateVisibility(bool visible) noexcept { + if (!visible) { + m_visible = false; + m_rootVisual.IsVisible(visible); return; } @@ -124,17 +125,8 @@ struct ScrollBarComponent { newVisibility = (m_contentSize.Width > m_size.Width); } - if (newVisibility != m_visible) { - m_visible = newVisibility; - m_rootVisual.IsVisible(m_visible); - } - } - - void updateVisibility(bool visible) noexcept { - if (visible != m_visible) { - m_visible = visible; - m_rootVisual.IsVisible(m_visible); - } + m_visible = newVisibility; + m_rootVisual.IsVisible(m_visible); } void updateRootAndArrowVisualOffsets() noexcept { From b1f7d9920863333e29a86ccfd1c6f71d7c5e7bb3 Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Mon, 14 Apr 2025 23:44:30 +0530 Subject: [PATCH 4/5] lint fix --- .../Fabric/Composition/ScrollViewComponentView.cpp | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index f863eae8b28..a4d726b2f47 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -764,6 +764,7 @@ void ScrollViewComponentView::updateProps( if (!oldProps || oldViewProps.showsVerticalScrollIndicator != newViewProps.showsVerticalScrollIndicator) { updateShowsVerticalScrollIndicator(newViewProps.showsVerticalScrollIndicator); + } if (!oldProps || oldViewProps.decelerationRate != newViewProps.decelerationRate) { updateDecelerationRate(newViewProps.decelerationRate); @@ -1346,7 +1347,7 @@ void ScrollViewComponentView::updateShowsVerticalScrollIndicator(bool value) noe m_verticalScrollbarComponent->updateVisibility(false); } -void ScrollViewComponentView::updateDecelerationRate(float value) noexcept { - m_scrollVisual.SetDecelerationRate({value, value, value}); -} + void ScrollViewComponentView::updateDecelerationRate(float value) noexcept { + m_scrollVisual.SetDecelerationRate({value, value, value}); + } } // namespace winrt::Microsoft::ReactNative::Composition::implementation From e5e39b22e1d1f1cd91a1a49e637d67702cc87fcb Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Mon, 14 Apr 2025 23:48:40 +0530 Subject: [PATCH 5/5] yarn format --- .../Fabric/Composition/ScrollViewComponentView.cpp | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index a4d726b2f47..108f0a4b03d 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -1346,8 +1346,9 @@ void ScrollViewComponentView::updateShowsVerticalScrollIndicator(bool value) noe } else { m_verticalScrollbarComponent->updateVisibility(false); } +} - void ScrollViewComponentView::updateDecelerationRate(float value) noexcept { - m_scrollVisual.SetDecelerationRate({value, value, value}); - } +void ScrollViewComponentView::updateDecelerationRate(float value) noexcept { + m_scrollVisual.SetDecelerationRate({value, value, value}); +} } // namespace winrt::Microsoft::ReactNative::Composition::implementation