title: What is the recommended way to apply styles to an extended React Native component?
body: <p>I have extended the <a href="https://facebook.github.io/react-native/docs/text.html" rel="nofollow noreferrer">Text</a> component in order to have a reusable text component with a custom font.</p>
  
  <p>My custom component should accept the styles passed to it and add the custom font to it.</p>
  
  <p>I'm currently doing this:</p>
  
  <p><strong>MyText.js</strong></p>
  
  <pre><code>import React from 'react'
  import {
      Text,
      StyleSheet
  } from 'react-native';
  
  
  export default class MyText extends React.Component {
  
      render() {
  
          const style =
              Object.assign( {},
                  StyleSheet.flatten(this.props.style),
                  {fontFamily: "My Font"}
              );
  
          return (
              &lt;Text style={style}&gt;
                  {this.props.children}
              &lt;/Text&gt;
          );
      }
  
  }
  </code></pre>
  
  <p>While this works as expected, having to flatten the stylesheet every time seems wrong. The above is a trivial example, and I can think of other components on which I could use this pattern. For that reason, I want to make sure I'm not ignoring a more suitable approach.</p>