Resize UIview manually from native side

[DanielFrTB]

Hi there,

We have a native UIView that receives resize events from a remote API. Is there a way to resize the view from the native part? For example, can we manually invoke (not triggered by JS prop changes) - (void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetrics oldLayoutMetrics:(const facebook::react::LayoutMetrics &)oldLayoutMetrics ?
We need to do that on iOS and Android.

Thanks

[lindboe]

@DanielFrTB It sounds like what you want is commands on the Fabric component. https://medium.com/@carlosalmonte04/fabric-react-native-how-to-trigger-native-method-from-javascript-25b695f8b83 might help you with that.

@cipolleschi I'm noticing that I can't find docs in this repo explaining native commands on Fabric components, is that intended?

[cipolleschi]

There are many things that, unfortunately, we haven't had the time to document properly. Top of my mind:

• Events.
• NativeCommands.
• View recycling and the prepareForRecycle method.

One of the effort we are starting during the RC phase of 0.76 is to rework the docs. One of my colleagues will start working on that soon.

[DanielFrTB]

Thanks @lindboe, what I actually want is to resize the UIview on the native part without JS(commands) call and without using props.

@cipolleschi specifically about Events, on the RCTViewComponentView we have:
facebook::react::SharedViewEventEmitter _eventEmitter.

Is there equivalent on Turbo Modules for RCTEventEmitter ( since it using RCTBridge I assume that it will be deprecated soon) ?

[cipolleschi]

@DanielFrTB sure, you can have a look at this example
It throws a little bit of Swift in the mix, but shows you how to use an Event Emitter with a TurboModule.

[DanielFrTB]

@cipolleschi
Regarding my original question, it is possible to invoke updateLayoutMetrics manually?

[cipolleschi]

I don't think so. Those methods are invoked when a React commit happens. The UIManager passes to the views the new props and the new layout information and those reacts to them.

Can you go a little bit more in detail on the use case you have?
I'm a bit worried that you are trying to do too many things manually that React or iOS could actually handle for you...

[DanielFrTB]

@cipolleschi
Sure,
We are creating a UIView on TurboModules and saving its instance in a global Dictionary that we can access on the RCTViewComponentView/ViewManager.
On the RCTViewComponentView/ViewManager, we are getting the created UIView with the initial props (pageID, unitID) from the Dictionary.

This UIView resizes itself autonomously according to the height it receives from a remote API. Since React overrides the native measure and layout process, we need to find a way to resize the UIView manually. The simple approach is to pass the incoming remote height to JS via EventEmitter and then resize the NativeView with props, but I am looking for other options.

I hope that it was clear :)

[cipolleschi]

This UIView resizes itself autonomously according to the height it receives from a remote API

This bit is a bit troublesome... why do you need to send the height from a Remote API? 🤔
This goes a bit against the React model, where the UI is defined in the JS layer and trickles down to the native one. Isn't there a way to "receive" the height in the JS layer and set it to the component using StyleSheet?

[DanielFrTB]

We have a WebView that populates itself with a list of content fetched from a remote API. The WebView sends its height to the native UIView, which resizes itself according to the received height.
Basically:

<RCTViewComponentView> < ---- React Component
   <UIView> < ----- native layer
     <WebView>  < ----- native layer
   </UIView>
</RCTViewComponentView>     

Isn't there a way to "receive" the height in the JS layer and set it to the component using StyleSheet

We can listen to incoming height from the WebView and pass it via props in the JS layer.

@cipolleschi -Since we don't have a classic use case, I think it would be better to meet with you or with someone who can help us with our use case.
Thanks a lot!

[cipolleschi]

The best way would probably be to issue the request from a TM, emit an event using EventEmitters (they will be properly availabe starting from 0.76, have a look at them here) and pass the value to the view as a props. In that way you'll leverage the proper React lifecycle to resize the UIView.