How to design a view using componentKit in iOS

Question

I want to create a custom view using componentKit in objective-c. the view is look like the newsfeed view in facebook app , I wrote the following code to make that view,

+ (instancetype)newWithText:(NSString *)text
                context:(QuoteContext *)context
          {

return [super newWithComponent:
        [QuoteWithBackgroundComponent
         newWithBackgroundImage:[context imageNamed:@""]
         quoteComponent:

         [CKInsetComponent
          newWithInsets:{.top = 10, .bottom = 10, .left = 10, .right = 10}
          component:
          [CKFlexboxComponent
           newWithView:{}
           size:{}
           style:{
               .direction = CKFlexboxDirectionVertical,
               //                 .spacing = 10,
           }
           children:{
               {
                   // Profile Picture
                   [CKImageComponent
                    newWithImage: nil
                    attributes:{
                        {@selector(setBackgroundColor:), [UIColor darkGrayColor]},
                        {CKComponentViewAttribute::LayerAttribute(@selector(setCornerRadius:)), 17.5}
                    }
                    size:CKComponentSize::fromCGSize(CGSizeMake(35, 35))],
               },
               {
                   // Name
                   [CKInsetComponent
                    newWithInsets:{ .right= 140, .top= -35}
                    component:
                    [CKLabelComponent
                     newWithLabelAttributes:{
                         .string = @"Asim Iftikhar Abbasi",
                         .font = [UIFont fontWithName:@"Baskerville" size:20],
                     }

                     viewAttributes:{
                         {@selector(setBackgroundColor:), [UIColor whiteColor]},
                         {@selector(setUserInteractionEnabled:), @NO},
                     }
                     size:{ }]],
                   .alignSelf = CKFlexboxAlignSelfEnd, // Right aligned
               },
               {
                   // Location
                   [CKInsetComponent
                    newWithInsets:{.right= 185, .top= -10}
                    component:
                    [CKLabelComponent
                     newWithLabelAttributes:{
                         .string = @"2 hrs Islamabad, Pakistan",
                         .font = [UIFont fontWithName:@"Baskerville" size:12]
                     }
                     viewAttributes:{
                         {@selector(setBackgroundColor:), [UIColor whiteColor]},
                         {@selector(setUserInteractionEnabled:), @NO},
                     }
                     size:{ }
                     ]],
                   .alignSelf = CKFlexboxAlignSelfEnd, // Right aligned
               },
               {
                   // Post
                   [CKInsetComponent
                    newWithInsets:{.right= 0, .top= 0}
                    component:
                    [CKImageComponent
                     newWithImage: nil
                     attributes:{{@selector(setBackgroundColor:), [UIColor blackColor]},
                     }
                     size:CKComponentSize::fromCGSize(CGSizeMake(400, 200))]],
                   .spacingBefore = 10
               },
               {
                   // Buttons
                   [CKInsetComponent
                    newWithInsets:{.right= 0, .top= 15}
                    component:
                    [CKButtonComponent
                     newWithAction:{}
                     options:{
                         .titles = @"Hello",
                         .attributes = {{@selector(setHighlighted:), @YES}},
                         .titleColors = titleColors,
                         .selected = YES,
                     }]],
                   .spacingBefore = 10
               },
           }]]]];
      }
     @end

I can't access attributes of options

 options:{
                     .titles = @"Hello",
                     .attributes = {{@selector(setHighlighted:), @YES}},
                     .titleColors = titleColors,
                     .selected = YES,
                 }

when I access titles attribute of button compiler generates the following error: use of undeclared identifier titles

anyone help me please... Thanks in advance

Answer 1

What ComponentKit expects from you here is not a single string but a map between UIControlStates and strings so that you can define different strings for UIControlStateNormal, Highlighted, Disabled and such. That you can specify as:

.titles = {{UIControlStateNormal, @"Hello"}}

However, if you don't care about other states that map has another constructor that defaults to normal state, which should work as follows:

.titles = {@"Hello"}

Hope that helps!