Forcing view refresh

[finalquest]

Hi.
Putting some context first.

I'm using RN as the V in MVC, in an existing app.
I've created a plain UIView class, and then added a subview(RCTRootView) to it.
Then I added this view in mi viewController. So this RCTRootView is now the view of the controller.

Everything works fine. I've made my view layout in JS, and is rendered well.
But now I'm facing some fundamentals issues.

Is this posible to pass data to the RN view? Or force a refresh when the controller need to update some data?. In native is quite simple, as the texts/labels are plain IBOulets. But I dont really know how to do this having the actual view in the JS side.

If anyone can point me in the correct direction will be apreciated.
Thanks in advance.
Regards

[brentvatne]

@finalquest - you can pass data using an eventDispatcher by creating it with initWithBridge passing in the bridge that is used by your root view 😄 - you just have to instantiate the bridge separately from the rootView (which you probably want to do anyways so you can share it between multiple rootViews)

  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                            moduleProvider:nil
                                             launchOptions:launchOptions];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                      moduleName:@"YourModuleName"];

Alternatively you can look at calling enqueueJSCall:args on the bridge directly, just as RCTEventEmitter does

[finalquest]

Hi.
Thanks for the quick response.
Everything is working fine with your suggestion.

Thanks again

[brentvatne]

🚀

[ssssssssssss]

@brentvatne @finalquest I'm facing a more complex situation. We have a existing app that use a UITableView and would like to make each cell to be a RCTRootView, but how can we pass data to the JS module so it can initialize with different content?
Thanks.

[ide]

The RCTRootView has a property called initialProperties for the props of the root component. That said embedding RCTRootViews in cells might perform poorly if you have more than 2-3 cells on the screen though I haven't tried it.

[ssssssssssss]

@ide But how to access the initialProperties in JS land? And as we are sharing a bridge via

 RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                      moduleName:@"YourModuleName"];

and creating more cells using

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                      moduleName:@"CellRendererModule"];

We'd expect 'dynamic' data passed to the module not the bridge.
Any idea?
BTW, why the poor performance?

Thank you .

[ide]

But how to access the initialProperties in JS land?

The initialProperties are passed in as the props of your root React component.

It's good that you are sharing a bridge. I was thinking there would be noticeable latency when rendering your cells (have to render an entire React hierarchy + create all of the initial UIViews) so you might see flickering if you were to quickly scroll through a list of cells.

[ssssssssssss]

@ide Thanks for the tip, rootView.initialProperties does work.
We've got customized UITableView working with cells backed by React Native. It's kinda slow as we recycle cells which are out of viewport. And we did try to use object pooling for the JS components to rescue, but failed. Any hint to create a CellComponentWithPool component?
Thanks.

[vijayhike]

@ssssssssssss whats the FPS you arrived in case of each cell is react micro app ? Have you tried of reusing RCTRootView? @ide Any drawbacks of re using RCTRootView.

[JensDebergh]

I've ran into a similar issue where we had to parse native urls and pass them to an already rendered react native view.

There's a property called appProperties on a RCTReactView instance.

self.reactView.appProperties = @{
  @"route": [url nextBreadcrumb],
};