Will Anderson

If you’ve run into onlyChild must be passed a children with exactly one child in React Native there’s a simple fix.

All of the “Touchable” components in React Native do an onlyChild check on their children, which throws an error unless there’s exactly one child.

1
2
3
4

return (
  <TouchableHighlight>
  </TouchableHighlight>
); // Error: onlyChild must be passed a children with exactly one child

Adding a child to the TouchableHighlight will fix the error

1
2
3
4
5

return (
  <TouchableHighlight>
      <Text>foo</Text>
  </TouchableHighlight>
); // OK

But adding multiple children will also cause an error

1
2
3
4
5
6

return (
  <TouchableHighlight>
      <Text>foo</Text>
      <Text>bar</Text>
  </TouchableHighlight>
); // Error: onlyChild must be passed a children with exactly one child

A quick search through the React Native code reveals the components that verify onlyChild:

• TouchableBounce
• TouchableHighlight
• TouchableOpacity
• TouchableWithFeedback

Hopefully React Native can eventually provide a better message for this issue, but until then, at least this blog post should pop up when you Google the error.