New arch doesn't render React Native components inside SVG

[pnthach95]

Description

I'm sorry if it is a duplicate, first time use new arch because of RN 0.76

<PillInforBox>
  <View style={styles.sectionContainer}>
    <Text style={styles.sectionTitle}>top text</Text>
    <Text style={styles.sectionTitle}>BOTTOM TEXT</Text>
  </View>
</PillInforBox>

const PillInforBox = ({children}) => {
  return (
    <Svg>
      ...
      {children}
    </Svg>
  )
}

I code like this and it works in old arch until now (RN 0.76). I tested with

	RN 0.75	RN 0.76
Old arch	OK	OK
New arch	Fail	Fail

New arch

Old arch

Steps to reproduce

1. Clone and build reproduction in new arch
2. Disable new arch and rebuild
3. There is rn75 branch if you want to test

Snack or a link to a repository

https://github.com/pnthach95/rn76

SVG version

15.8.0

React Native version

0.76.0

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

None

Device model

No response

Acknowledgements

Yes

[jakex7]

Hi @pnthach95,

Thanks for bringing this up! There's indeed an issue with the new architecture when it comes to Yoga layouting. It's part of a broader issue we're working on. In fact, the components are being rendered, but they're positioned far below the SVG, and it's white text on a white background, which makes them appear as not rendered.

As a temporary workaround, you can change the order of children so that {children} is the first child of the Svg component, like this:

const PillInforBox = ({children}) => {
  return (
    <Svg>
      {children}
      ...
    </Svg>
  )
}

[kacperzolkiewski]

Hi @pnthach95,

To use React Native components inside an <SVG> you should wrap them with a <ForeignObject>.
Previously <ForeignObject> didn’t work as expected but with the fix in #2811, it should now function correctly and components inside <ForeignObject> should render properly.