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

[iOS] App does not correctly render RNTester borders, backgrounds, and shadow <Image> examples #45958

Open
cipolleschi opened this issue Aug 9, 2024 · 5 comments
Assignees
Labels
Component: Image p: Facebook Partner: Facebook Platform: iOS iOS applications. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)

Comments

@cipolleschi
Copy link
Contributor

Description

The RNTester examples for border, Old arch and New arch also does not seem to correctly draw borders when a border-radius is set, and draws the border as if the radii is not present.

Table below represents the desired behavior, that is happening for Android, and how iOS renders the same scenario for the Old Arch and the New Arch

Android (✅) Old Architecture (❌) New Architecture (❌)
Screenshot 2024-08-09 at 10 39 52 Screenshot 2024-08-09 at 10 35 50 Screenshot 2024-08-09 at 10 34 12

Steps to reproduce

  1. Run RNTester
  2. Scroll down to Image
  3. Scroll down until Box Shadow is visible

To disable the New Architecture on iOS, you can also add this to the AppDelgate:

- (BOOL)newArchEnabled {
  return NO;
}

React Native Version

0.76

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

n/a

Stacktrace or Logs

n/a

Reproducer

https://github.com/facebook/react-native/packages/rn-tester

Screenshots and Videos

No response

@cipolleschi cipolleschi added Needs: Triage 🔍 Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Aug 9, 2024
@react-native-bot

This comment was marked as off-topic.

@react-native-bot

This comment was marked as off-topic.

@react-native-bot react-native-bot added Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Component: Image Platform: iOS iOS applications. and removed Needs: Triage 🔍 labels Aug 9, 2024
@react-native-bot

This comment was marked as off-topic.

@react-native-bot

This comment was marked as off-topic.

@cortinico cortinico added p: Facebook Partner: Facebook and removed Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Needs: Version Info labels Aug 9, 2024
@coado
Copy link
Collaborator

coado commented Aug 9, 2024

Hey, I can check this out.

facebook-github-bot pushed a commit that referenced this issue Aug 14, 2024
Summary:
This PR solves [issue](#45958) with displaying irregular borders on Fabric. The same issue appears on the old architecture, but I am having a problems there, so I am pushing this fix for now.

The problem is solved by decoupling `backgroundColor` from `borderLayer` and setting `zPosition` on `borderLayer` to `1024.0f`, so that the border is always in front of the layer. The `zPosition` is compared within a layer, so it shouldn't impact outside components. I would love to hear your opinion if there is a case in which this could break.

## Changelog:

[IOS] [FIXED] - changed border display

Pull Request resolved: #45973

Test Plan:
I've checked that on RNTester Images.

![border-issues-screen](https://github.com/user-attachments/assets/e12add82-8016-4c42-833d-f396307e9423)

Reviewed By: joevilches

Differential Revision: D61119409

Pulled By: cipolleschi

fbshipit-source-id: a88912061c7a8d72eec4f4092adb076dd6ae511e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Image p: Facebook Partner: Facebook Platform: iOS iOS applications. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)
Projects
None yet
Development

No branches or pull requests

4 participants