Nativescript: Custom Component in ActionBar crashes with onMeasure error

[RobertGardner]

If I put a custom component inside an ActionBar it crashes. It works fine outside the ActionBar, however. This error is:
file:///app/tns_modules/tns-core-modules/ui/core/view/view.js:59:124: JS ERROR Error: onMeasure() did not set the measured dimension by calling setMeasuredDimension() ProxyViewContainer(6)

Which platform(s) does your issue occur on?

I only tried this on iOS.

Please provide the following version numbers that your issue occurs with:

• CLI: 3.0.1
• Cross-platform modules: 3.0.0
• Runtime(s): tns-ios
• Plugin(s): none

Please tell us how to recreate the issue in as much detail as possible.

Install the HelloWorld example from the tutorial. Change the template in app.component.ts to:

<ActionBar title="My App"><cc-cc></cc-cc></ActionBar>

Add the cc-cc custom component:

import { Component } from "@angular/core";

@Component({
  selector: "cc-cc",
  moduleId: module.id,
  template: `
  `,
})
export class CcComponent { }

Add CcComponent as a declaration in app.module.ts.
Run using tns run ios

[tsonevn]

Hi @RobertGardner,
To be able to use custom component for the ActionBar, you should load the component inside some of the available Layouts, for example:

<ActionBar title="My App" class="action-bar">
    <StackLayout>
        <ns-custo-ab></ns-custo-ab>
    </StackLayout>
</ActionBar>

Then the child component will be measured properly and the custom component will be displayed inside the ActionBar. For your convenience, I am also attaching a sample project.
Archive.zip

[RobertGardner]

Thank you. That works! It would be nice if this were in the documentation somewhere. :-)

[aleksander351]

@tsonevn @RobertGardner Now, I added ios.position="right" and android.position="right" to Stacklayout and also to my custom (Button) component. But the title of my View is not visible if I include a custom component in ActionBar. The button on iOS stays in the middle.

[aleksander351]

I got it woriking by wrapping it inside ActionItem > GridLayout > custom-component.

[felixelgato92]

I got the same error for a custom component inside of an ng-template, but getting in inside a stackLayout also solved it for me.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.