What causes an "React.Children.only expected to receive a single React element child." error in an apollo client rendered component

Question

Why does adding another 2nd element to a view cause the error "React.Children.only expected to receive a single React element child."

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 Button which also threw a different error. Adding a text seems ok however.

class Games extends Component {

  constructor(props) {
    super(props);
  }

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

    if (loading) {
      return <Text>Loading</Text>;
    } else if (allGames) {
      return (
        <View style={styles.outer}>

          //adding this touchable highlight causes the error
          <TouchableHighlight>Get More</TouchableHighlight>

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

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

Answer 1

According to https://facebook.github.io/react-native/docs/touchablehighlight.html,

TouchableHighlight must have one child (not zero or more than one). You can try to add a child element.

<TouchableHighlight>
  <Text>Get More</Text>
</TouchableHighlight>