What's the migration path for setSize on the UIManager?

[grahammendick]

I've started updating my navigation library to the new architecture on iOS. I have a TitleBar component that gets its dimensions from the titleView on a UINavigationItem.

In the old architecture on iOS I'd call setSize when the frame changes and React Native would do the rest.

- (void)layoutSubviews {
    [super layoutSubviews];
    if (!CGRectEqualToRect(_lastViewFrame, self.frame)) {
        [_bridge.uiManager setSize:self.frame.size forView:self];
        _lastViewFrame = self.frame;
    }
}

What's the way to do this in the new architecture on iOS?

[sammy-SC]

Hello @grahammendick,

sorry for the slow response. I'm on a leave and rarely come to Github.

The tldr is: take a look at how ModalHostView component does it. Relevant files:

• state
• component view
• component descriptor

You might ask, why is it so complicated compared to the old architecture. The reason is that there may be several shadow nodes representing the same component view and imperative call to UIManager wouldn't work in such a case. We use React Native Rendered State Update to communicate the size change to Yoga and resize all affected nodes.

Let me know if anything is unclear.

Thank you

[grahammendick]

I couldn’t follow the Modal code when I first looked a few weeks ago, so I decided to try a different way. Instead of setting the node size from native, I raised an event containing the new size and then set the width and height in js.

// native
->onChangeBounds(NVTitleBarEventEmitter::OnChangeBounds{
    .width = static_cast<float>(self.frame.size.width),
    .height = static_cast<float>(self.frame.size.height),
});

// js
const [bounds, setBounds] = useState({});
return (
  <NVTitleBar
    onChangeBounds={({nativeEvent: {width, height}}) => {setBounds({width, height})}}
    style={bounds}
  />
)

This works well on iOS but when I moved to Android and swapped out updateNodeSize for this same approach I ran into trouble. The Android code produced an infinite loop (after dispatching the event I called a requestLayout as well). I worked around this infinite loop by checking if the size was within a delta of the last size and ignoring if it was. This worked but the title jumps a bit when it first appears.

I went back to the old architecture to test out the change and there was no infinite loop at all on Android. And so no jump.

What has change to explain why I’d get an infinite loop when changing the size on Android in the new architecture but not the old?

I can put together an example that shows the difference between old and new if you’d be willing to investigate it with me.

[grahammendick]

Ok, I think this change is because the new React Native architecture doesn't check needsCustomLayoutForChildren. I found this out when I switched to updating the node size in native (like ModalHostView). I've raised #52 about the missing needsCustomLayoutForChildren check

[grahammendick]

Pointing at ModalHostView component only works if you also explain how to use c++/rendered state on Fabric. I don't understand why React Native won't do this. I've written a guide on c++ state in Fabric so others can avoid the pain I went through.