New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Forcing view refresh #1049

Closed
finalquest opened this Issue Apr 28, 2015 · 10 comments

Comments

Projects
None yet
7 participants
@finalquest

finalquest commented Apr 28, 2015

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Apr 28, 2015

Collaborator

@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

Collaborator

brentvatne commented Apr 28, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@finalquest

finalquest Apr 28, 2015

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

Thanks again

finalquest commented Apr 28, 2015

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

Thanks again

@finalquest finalquest closed this Apr 28, 2015

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Apr 28, 2015

Collaborator

🚀

Collaborator

brentvatne commented Apr 28, 2015

🚀

@ssssssssssss

This comment has been minimized.

Show comment
Hide comment
@ssssssssssss

ssssssssssss Apr 30, 2015

@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.

ssssssssssss commented Apr 30, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Apr 30, 2015

Collaborator

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.

Collaborator

ide commented Apr 30, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ssssssssssss

ssssssssssss Apr 30, 2015

@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 .

ssssssssssss commented Apr 30, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Apr 30, 2015

Collaborator

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.

Collaborator

ide commented Apr 30, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ssssssssssss

ssssssssssss Apr 30, 2015

@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.

ssssssssssss commented Apr 30, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@vijayhike

vijayhike Jul 7, 2017

@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.

vijayhike commented Jul 7, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@JensDebergh

JensDebergh Jan 8, 2018

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],
};

JensDebergh commented Jan 8, 2018

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],
};

@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.