Skip to content

Conversation

@kacperzolkiewski
Copy link
Collaborator

@kacperzolkiewski kacperzolkiewski commented Oct 28, 2025

Summary

Fixes: #2733 (Bug1, Bug3)
Fixes: #1428
Fixes: #2519

Problem

When a React Native view (e.g., <View>, <Text>) is nested inside an SVG <ForeignObject>, its own style properties like transform (scale, rotate, translate) and its layout position are ignored during rendering.

This causes the nested view to be rendered incorrectly at the (0, 0) origin of the <ForeignObject> without any of its applied transformations, making it impossible to style or position elements within the foreign object container.

Solution

This PR fixes the issue by manually applying the child view's own position and transformation matrix to the drawing context (the Canvas on Android and CGContext on iOS) before the view is drawn.

On iOS we also reset hidden property to false for nested RN components inside ForeignObject within prepareForRecycle. This prevents views from being pooled in an invisible state and then disappearing when they are subsequently reused on different screens.

With changes:
image

Before changes:
image

Test Plan

Run test case from issue: #2733

Compatibility

OS Implemented
iOS
MacOS
Android
Web

Checklist

  • I have tested this on a device and a simulator
  • I added documentation in README.md
  • I updated the typed files (typescript)
  • I added a test for the API in the __tests__ folder

@kacperzolkiewski kacperzolkiewski changed the title fix: flex styles inside ForeignObject on Android fix: Respect RN view layout and transforms within ForeignObject Oct 30, 2025
@kacperzolkiewski kacperzolkiewski marked this pull request as ready for review October 30, 2025 11:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant