Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fabric] Fix scroll views hiding content underneath them in Fabric. #1820

Merged
merged 2 commits into from
May 8, 2023

Conversation

lenaic
Copy link

@lenaic lenaic commented May 8, 2023

Please select one of the following

  • I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
  • I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
  • 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

Summary

This PR disables the background drawing on native scroll views so that the content below them would be visible. This was previously done in Paper. The RCTUIScrollView we use in Fabric was missing this setting, which is why the background color in the RNTester app was not visible in the examples SectionList.

Changelog

[macOS] [FIXED] - Fix scroll views hiding content underneath them in Fabric

Test Plan

Tested by running RNTester on macOS with Fabric (RCT_NEW_ARCH_ENABLED=1) and checking that the background color is visible in the examples list.

Without the fix in Fabric:
Screenshot 2023-05-08 at 02 36 40

With the fix in Fabric:
Screenshot 2023-05-08 at 02 32 32

@lenaic lenaic requested a review from a team as a code owner May 8, 2023 00:44
@Saadnajmi
Copy link
Collaborator

This was previously done in paper.

Where did we do this in paper?

@lenaic
Copy link
Author

lenaic commented May 8, 2023

@Saadnajmi
Copy link
Collaborator

Where did we do this in paper?

https://github.com/microsoft/react-native-macos/blob/main/React/Views/ScrollView/RCTScrollView.m#L477

Curious, is there a reason you didn't match paper and do it in the unit of RCTEnhancedScrollView? Was it because iOS UIScrollView doesn't draw background by default, so that logic felt more appropriate for our shim layer? Does it also mean we don't need to set drawsBackground in paper in the link above anymore after this change?
https://github.com/microsoft/react-native-macos/blob/main/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm#L124-L126

@lenaic
Copy link
Author

lenaic commented May 8, 2023

Was it because iOS UIScrollView doesn't draw background by default, so that logic felt more appropriate for our shim layer?

Exactly. The UIKit UIScrollView does no drawing aside from the scroll bars. On AppKit the NSScrollView draws a white background by default.

Does it also mean we don't need to set drawsBackground in paper in the link above anymore after this change?

You're right! I'll remove it from the Paper RCTScrollView and test out the change on this PR.

@lenaic lenaic force-pushed the fabrix/fix-opaque-scroll-views branch from 30fafc5 to 1267fa8 Compare May 8, 2023 13:27
@lenaic
Copy link
Author

lenaic commented May 8, 2023

RNTester macOS Paper after the clean up of RCTScrollView:
Screenshot 2023-05-08 at 15 23 08

@Saadnajmi Saadnajmi merged commit cf399b4 into microsoft:main May 8, 2023
@lenaic lenaic deleted the fabrix/fix-opaque-scroll-views branch May 8, 2023 14:14
lenaic added a commit to lenaic/react-native-macos that referenced this pull request Aug 7, 2023
…icrosoft#1820)

* Fix scroll views hiding content underneath them in Fabric.

* Clean up Paper scroll view after shim scroll view fix.

---------

Co-authored-by: Nick <lefever@meta.com>
Saadnajmi pushed a commit that referenced this pull request Aug 7, 2023
* [Fabric] Return active touch identifiers in surface touch handler on mouse up. (#1815)

Co-authored-by: Nick <lefever@meta.com>

* [Fabric] Add mandatory color space conversion for macOS. (#1813)

Co-authored-by: Nick <lefever@meta.com>

* [Fabric] Clean up hit testing now that RCTUIView extends RCTPlatformView (#1814)

* Clean up surface touch handler now that RCTUIView extends RCTPlatformView.

* Fix the iOS build.

---------

Co-authored-by: Nick <lefever@meta.com>

* [Fabric] Use the layout metrics to get the scale factor in component views. (#1816)

* Use the layout metrics to get the scale factor in component views.

* Use layout metrics pointScaleFactor instead of RCTScreenScale on iOS.

---------

Co-authored-by: Nick <lefever@meta.com>

* Fix RNTester content not resizing with window. (#1818)

Co-authored-by: Nick <lefever@meta.com>

* Fix wrong text offset when a line height is set. (#1819)

Co-authored-by: Nick <lefever@meta.com>

* [Fabric] Fix scroll views hiding content underneath them in Fabric. (#1820)

* Fix scroll views hiding content underneath them in Fabric.

* Clean up Paper scroll view after shim scroll view fix.

---------

Co-authored-by: Nick <lefever@meta.com>

* [Fabric] Add support for image content mode and tint features (#1828)

* Add RCTUIImageView to RCTUIKit to support iOS features on macOS.

* Add support for tint and resize mode to Image on Fabric.

* Clean up logging and add macOS tag.

* Fix code style to match the style guide.

---------

Co-authored-by: Nick <lefever@meta.com>

* [Fabric] Fix text input rendering crashing by using layout metrics pixelScaleFactor (#1817)

* Use layout metrics to assign the active scale factor to RCTUITextField.

* Use layout metrics to assign the active scale factor to RCTUITextView.

---------

Co-authored-by: Nick <lefever@meta.com>

* [Fabric] Tint images using CIFilter fixing wrong tinted image size (#1843)

* Tint images using CIFilter to fix wrong image size when enabling tinting.

* Initialize the CIFilter input values with default values.

---------

Co-authored-by: Nick <lefever@meta.com>

---------

Co-authored-by: Nick <lefever@meta.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants