title: How can you pass styles through to a container component in React-Native
body: <p>I'm trying to create some reusable UI components for my React-Native app that have default styles.  </p>
  
  <p>An example default <code>MyText</code> (orange, 14, bold):</p>
  
  <pre><code>import React, { Component, StyleSheet, Text } from 'react-native';
  
  const styles = StyleSheet.create({text: {color: 'orange', fontSize: 14, fontWeight: 'bold'}});
  
  export default class MyText extends Component {
      render() {
          return &lt;Text style={styles.text}&gt;{this.props.children}&lt;/Text&gt;
      }
  }
  </code></pre>
  
  <p>How I would like to use it:</p>
  
  <pre><code>import Text from '../ui/myText';
  
  ... 
  &lt;Text style={{color: 'black'}}&gt;My custom styled text, but in black instead of orange&lt;/Text&gt;
  ...
  </code></pre>
  
  <p>Is there a way to do this?  Obviously if I try to access <code>this.props.style</code> it just returns an ID for a compiled stylesheet.</p>