Nativescript ActionBar custom component
<p>I am trying to create a custom component as described <a href="https://moduscreate.com/custom-components-in-nativescript/" rel="nofollow">here</a> in order to reuse the action bar and its logic in different places of my app.
Here is what I have setup the component:</p>

<blockquote>
  <p>/components/header/header.xml</p>
</blockquote>

<pre><code>&lt;ActionBar title="Title" class="{{ 'mode' == dark ? 'bg-dark' : 'bg-white' }}" loaded="loaded"&gt;
&lt;/ActionBar&gt;
</code></pre>

<blockquote>
  <p>/components/header/header.ts</p>
</blockquote>

<pre><code>exports.loaded = (args) =&gt; {
    let page = &lt;Page&gt; args.object;
    let pageObservable = new Observable({
        'mode' : page.get('mode')
    });
    page.bindingContext = pageObservable;
}
</code></pre>

<p>I then try to use the component calling it like this :</p>

<blockquote>
  <p>some_view.xml</p>
</blockquote>

<pre><code>&lt;Page 
 xmlns="http://schemas.nativescript.org/tns.xsd"
 xmlns:header="components/header"&gt;

&lt;header:header mode="dark"/&gt;
&lt;StackLayout&gt;..&lt;/StackLayout&gt;
...
&lt;/Page&gt;
</code></pre>

<p>However, navigating to `some-view.xml' I get the following error:</p>

<pre><code>Calling js method onCreateView failed
TypeError: Cannot read property frame of 'undefined'
File "data...../ui/action-bar/action-bar.js" line: 146 
</code></pre>

<p>Am I doing something wrong?
Have you succeded in creating a custom component based on ActionBar?</p>