ComponentKit how push view controllers CKComponentController

Question

Hi just stated to use the ComponentKit library given from facebook and i have been going through all their documentation but i could not find how to use their CKComponentController class.

Like how to push a view controller and about the navigation of various view controllers.

if any of you are aware of how to use the CKComponentController please let me know i'm a bit stuck due to less documentation

Thank You. Imran.

Answer 1

I worked this out, but it's definitely NOT immediately obvious. I had to dig through the source code. StoryViewController extends UIViewController.

@interface StoryViewController () <
CKComponentProvider,
CKComponentHostingViewDelegate
>

@end

@implementation StoryViewController {
    CKComponentDataSource *_componentDataSource;
    CKComponentFlexibleSizeRangeProvider *_sizeRangeProvider;
}

- (void)viewDidLoad {
    _sizeRangeProvider = [CKComponentFlexibleSizeRangeProvider providerWithFlexibility:CKComponentSizeRangeFlexibleHeight];
    CKComponentHostingView *hostingView = [[CKComponentHostingView alloc] initWithComponentProvider:[self class]
                                                                                  sizeRangeProvider:_sizeRangeProvider
                                                                                            context:nil];
    hostingView.delegate = self;
    hostingView.model = self.story;

    CGSize size = [hostingView sizeThatFits:CGSizeMake(self.view.frame.size.width, FLT_MAX)];
    hostingView.frame = CGRectMake(0, 0, size.width, size.height);
    [self.view addSubview:hostingView];

}

#pragma mark - CKComponentProvider

+ (CKComponent *)componentForModel:(id<NSObject>)story context:(id<NSObject>)context {
    return [StoryComponent newWithStory:story context:nil];
}

#pragma mark - CKComponentHostingViewDelegate <NSObject>
- (void)componentHostingViewDidInvalidateSize:(CKComponentHostingView *)hostingView {
    NSLog(@"componentHostingViewDidInvalidateSize");

}

@end

Answer 2

Our usual approach is to pass an object with a weak reference to the navigation controller as the "context" object that is passed to the top-level component.

Be sure it's a weak reference or you'll end up with a retain cycle!

As for accessing it in the component controller, expose the context object as a property on your component and then read that property off of self.component.