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.

Hubert Wang · Answer 1 · 2018-10-19T10:34:32.843

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.

I think the real solution is lazy loading the module at will, instead of doing it on app launch. I know that's what Facebook is doing in their app. — SudoPlz, Oct 19 '18 at 09:31
Hmm.., but I am not doing it on app launch. The view will be created when props is ready. Maybe I misunderstood your question. — Hubert Wang, Oct 22 '18 at 09:19
No matter when you actually render the native view itself, the react native native component will be loaded during the app launch! — SudoPlz, Oct 22 '18 at 09:32

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

1 Answers1