What causes an "React.Children.only expected to receive a single React element child." error in an apollo client rendered component
<p>Why does adding another 2nd element to a view cause the error <code>"React.Children.only expected to receive a single React element child."</code></p>

<p>I have a react native component that is using apollo client to call a graphQL endpoint to get data.  If I have it render just a the view, it works, however when I add the touchable highlight I get the error.  Can I not have more than one root element in a view, or make it a view with composite elements?  I tried adding it as a <code>Button</code> which also threw a different error.  Adding a text seems ok however.</p>

<pre><code>class Games extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const { loading, allGames } = this.props.data;

    if (loading) {
      return &lt;Text&gt;Loading&lt;/Text&gt;;
    } else if (allGames) {
      return (
        &lt;View style={styles.outer}&gt;

          //adding this touchable highlight causes the error
          &lt;TouchableHighlight&gt;Get More&lt;/TouchableHighlight&gt;

          { allGames.map(game =&gt; (
            &lt;View key={game.id} style={styles.wrapper}&gt;
              &lt;Text style={styles.header}&gt;{game.title}&lt;/Text&gt;
            &lt;/View&gt;
          ))}
        &lt;/View&gt;
      );
    }

    return (
      &lt;Text&gt;No results&lt;/Text&gt;
    );
  }
}
Games.propTypes = {
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,
    allGames: PropTypes.array,
  }).isRequired,
};
</code></pre>