how to pass a react component as a native view property

Question

I'm trying to build a react-native application with a some native UI components and some React components. I want a native ui component which takes a react component as a property, and renders it as a subview.

I went through the normal process of making a native ui component and used RCT_EXPORT_VIEW_PROPERTY(view, RCTView) to get the view property.

PagedUIViewManager.swift:

@objc(PagedUIViewManager)
class PagedUIViewManager: RCTViewManager {
  override func view() -> UIView! {
    return PagedUIView();
  }
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

PagedUIView.swift:

class PagedUIView: UIView {
  @objc var view: UIView {
    didSet {
      for subview in self.subviews {
        subview.removeFromSuperview()
      }
      self.addSubview(view)
    }
  }
  override init(frame: CGRect) {
    self.view = UIView(frame: frame)
    super.init(frame: frame)
    self.addSubview(view)
  }
}

PagedUIViewManager.m:

#import "React/RCTViewManager.h"
@interface RCT_EXTERN_MODULE(PagedUIViewManager, RCTViewManager)
RCT_EXPORT_VIEW_PROPERTY(view, RCTView)
@end

PagedUINativeView.js:

const PagedUI = requireNativeComponent("PagedUIView");
export default class PagedUIView extends React.Component {
  render() {
    return <PagedUI {...this.props}/>;
  }
}

usage:

<PagedUIView view={<ComponentToRender />} />

I expected the view to show <ComponentToRender />, but instead I get the runtime error "Invariant Violation: 435,PagedView,1,[object Object] is not usable as a native method argument".

This doesn’t seem to be the same question at all. Making callback functions is pretty well documented problem, but this is about taking a view generated from jsx as a subview of a native view. Also, the solution you linked to is for android, not iOS. — maboesanman, Jan 06 '19 at 06:56
i decided to re architect my app after running into this, so no. — maboesanman, Sep 17 '20 at 20:15

score 0 · Answer 1 · answered Oct 08 '19 at 21:00

0

It currently no possible, the only way to pass views to native modules passing the view as children.

You can receive the view using:

@objc override func insertReactSubview(_ subview: UIView!, at atIndex: Int)

answered Oct 08 '19 at 21:00

elios264

365
4
19

what about sending a RN component as the view for a native cell view item? – ismnoiet Jan 15 '20 at 21:07
@elios264: How exactly is insertReactSubview to be used, could you post an example on both the react-native and swift ui part? – Paul Sep 15 '20 at 13:13

how to pass a react component as a native view property

1 Answers1