How to use TouchableHighlight as a reusable component
<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>