Storing component into a variable and reuse it
<p>Ok i got components imported as </p>

<pre><code>import Payment from './pages/payment';
import Chat from './pages/chat';
</code></pre>

<p>Now I am using <code>Drawer</code> component and using it together with <code>Navigator</code> my renderScene become something like this</p>

<pre><code>if( route.id == 'payment'){
    return  &lt;Drawer  xx={} yy={} and a lot more &gt;
              &lt;Payment navigator={navigator} /&gt;
            &lt;/Drawer&gt;
}

if(route.id == 'chat'){
    return &lt;Drawer  xx={} yy={} and a lot more &gt;
              &lt;Chat navigator={navigator} /&gt;
            &lt;/Drawer&gt;
}
</code></pre>

<p>Those lengthy <code>Drawer</code> code are being used again and again.  I want to store that <code>&lt;Payment navigator={navigator} &gt;</code> or the other into a variable and then return that with <code>Drawer</code> only once.</p>

<p>How can i store it and return it with Drawer?  </p>

<p>Thanks</p>