title: Nativescript ActionBar custom component
body: <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>