Auto size of a fabric component with animation

[jdesgagne-onemedical]

Hi, I'm running into an issue that I would like some help on related to Fabric component, shadow node and animation.

I have this SwiftUI view, inside a UIKit UIHoistingController. I want to render my SwiftUI component within my react-native application, and have it to fit within my layout without specifying an height (and take all available width).

I'm manually listen for the height change of my swiftUI view and bubble a callback to my custom shadow node to call setSize->(). This seems to work, however I'm seeing some weird movement on my swiftui view (slightly move up and down). I assume this has something to do with either some timing mismatch between UIKit<->SwiftUI layout, and its container size (Yoga), or some rounding difference in the view / container.

I would like to know if there's a different way of achieving this? All I really want is a SwiftUI view that has a self manage height, fitting in my existing RN layout, even with animation resizing its container size.

Here's a video of the visual artifact issue:
https://github.com/user-attachments/assets/cc0cc29c-252b-4835-b475-4104de2d20a0

And here's a codebase where I uploaded that exercise: https://github.com/jdesgagne-onemedical/fabric-shadownode-animation

Thanks!

[sammy-SC]

Hello @jdesgagne-onemedical,

does this happen if you use UIKit instead of SwiftUI?
What is driving the animation, is it SwiftUI?

[jdesgagne-onemedical]

Hey Sammy, thanks for checking up. Yes the animation is in SwiftUI (code). I don't know if it happens only in UIKit, as my use case is over a SwiftUI existing CX I have to deal with.

[sammy-SC]

Knowing this would help us narrow down where the problem is. As far as I can tell, you are doing the right thing in React Native.

How is the height of "Dummy Swift View" animated?

[jdesgagne-onemedical]

It is just using the withAnimation() of incrementing an integer, which adds a new Text element, increasing the height of the View.