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.

Sign up for GitHub

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

Jump to bottom

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

Open
cipolleschi opened this issue Aug 9, 2024 · 5 comments
Open

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

cipolleschi opened this issue Aug 9, 2024 · 5 comments
Assignees
@coado
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.

Sign in to view
@react-native-bot

This comment was marked as off-topic.

Sign in to view
@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.

Sign in to view
@react-native-bot

This comment was marked as off-topic.

Sign in to view
@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
Contributor

coado commented Aug 9, 2024

Hey, I can check this out.

@coado coado mentioned this issue Aug 12, 2024
Closed
facebook-github-bot pushed a commit that referenced this issue Aug 14, 2024
@coado @facebook-github-bot
fix(iOS): displaying irregular borders on iOS Fabric (#45973)
94407f5 
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
@coado coado mentioned this issue Aug 19, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@coado coado

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
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cortinico @cipolleschi @react-native-bot @coado