Event when all the initial props of a react-native Native UI Component have successfully loaded?

Question

I'm building a react-native native UI component:

- (UIView *)view
{
    return [[MyComponent alloc] initWithBridge:self.bridge];
}

and I'm exposing props like this:

RCT_EXPORT_VIEW_PROPERTY(prop1, NSDictionary)
RCT_EXPORT_VIEW_PROPERTY(prop2, NSDictionary)
RCT_EXPORT_VIEW_PROPERTY(prop3, NSDictionary)
// ...

I need to do stuff when my module has ALL of those props available (a.k.a when the props have been successfully transferred to my native UI component through the RN bridge).

Is there any kind of event I can watch for or do I have to manually watch all the setters of each prop to make sure they're set?

Any ideas would be appreciated.

Thank you.

Answer 1

I run into the same issue today.

There is no official way to pass the initial properties to the manager.

Then I think, maybe the only solution is to return an empty view at first, then add your custom view to it after your props is ready.

I plan to do something like this:

- (UIView *)view
{
    return [[View alloc] init];
}

RCT_CUSTOM_VIEW_PROPERTY(params, NSDictionary, UIView)
{
    NSDictionary *params = json ? [RCTConvert NSDictionary:json] : nil;
    if (params) {
        MyComponent *subview = [view viewWithTag:YOUR_CUSTOM_VIEW_TAG];
        if (subview != nil) {
            [subview removeFromSuperview]
            subview = nil;
        }
        subview = [[MyComponent alloc] initWithParams:params];
        subview.tag = YOUR_CUSTOM_VIEW_TAG;
        [view addSubview:subview];
    }
}

You can remove the view and create another instance when the props changed like above, or obtain the created instance and modify its property, depends on your needs.

I haven't confirm this solution yet, but I think this solution should work. The tricky part will be how should we determine the initial behavior of the view before the params is ready.

Hope this idea can help people with the same issue (though I haven't tried it yet lol, I'll update this when I verify my own solution.

Updated:

Tried this solution in my app and it works. The tricky part is it's size, currently I will give the button a fix size to render in my app.