title: How to use TouchableHighlight as a reusable component
body: <p>I'm trying to create a reusable button in ReactNative. To do this, I have created a stateless component which returns a TouchableHighlight component configurable through props passed in to the reusable component.</p>
  
  <p>OutlineButton.js</p>
  
  <pre><code>const OutlineButton = ({color, text, onClick}) =&gt; {
    let buttonStyles = (
      color ?
        _.assign({}, StyleSheet.flatten(styles.button), {borderColor: color}) :
        styles.button
    )
  
    return (
      &lt;TouchableHighlight style={buttonStyles} onPress={onClick}&gt;
        &lt;Text style={styles.text}&gt;{text}&lt;/Text&gt;
      &lt;/TouchableHighlight&gt;
    )
  };
  </code></pre>
  
  <p>CategoryButton.js</p>
  
  <pre><code>import OutlineBtn from '../buttons/outlineButton.js'
  const CategoryButton = ({merchant}) =&gt; (
      let text = merchant ? merchant.category : '';
    &lt;View style={styles.buttonContainer}&gt;
      &lt;OutlineBtn
        color="red"
        text={text.split('_').join(' ')} /&gt;
    &lt;/View&gt;
  );
  </code></pre>
  
  <p>Transaction.js(Active Page)</p>
  
  <pre><code>import Category from '../components/singleTransaction/categoryButton.js'
  class Transaction extends React.Component {
      constructor (props) {
          super(props)
          this.state = {}
      }
  
      componentDidMount () {
          this.props.getTransaction(this.props.transactionId);
      }
  
      render () {
          return (
              &lt;ScrollView&gt;
                  &lt;Category ref="touchbtn" merchant={this.state.merchant} /&gt;
              &lt;/ScrollView&gt;
          )
      }
  }
  </code></pre>
  
  <p>However when I try to use this component I get a warning <code>Touchable child must either be native or forward setNativeProps to a native component</code></p>
  
  <p>What am I doing wrong?</p>
  
  <p><b>Note:</b> I am aware of the <code>setNativeProps()</code> method that needs to be passed down if a <code>TouchableHighlight</code> has a child that is not a native component (e.g. <code>&lt;View&gt;</code> or <code>&lt;Text&gt;</code>). But in my case the child of <code>TouchableHighlight</code> is indeed a native component.</p>