Software⏱️ 4 min read📅 2026-06-04

How to Fix: "React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>

Learn how to fix: "React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>.

Quick Answer: Try checking your system settings or restarting.

📋 Table of Contents

  1. 🔍 Why This Happens
  2. ✅ Best Solutions to Fix It
  3. ✨ Wrapping Up

The "React.Children.only expected to receive a single React element child" error occurs when using nested components in React Native, specifically with Image and TouchableHighlight components within a View.

This issue affects developers who are trying to render complex user interfaces with multiple components, but haven't properly configured their children.

🔍 Why This Happens

  • The primary cause of this error is that the Image component is being used as a child of the TouchableHighlight component, which expects only one React element child. This can be due to a misunderstanding of how React Native handles nested components.
  • Another possible reason for this issue could be if there are other components inside the TouchableHighlight component, causing it to receive multiple children instead of just one.

✅ Best Solutions to Fix It

Wrapping Image in a Separate Component

  1. Step 1: Create a new component that wraps the Image component, for example, ImageWrapper.js:
  2. Step 2: javascript
  3. Step 3: import React from 'react';
  4. Step 4: export default function ImageWrapper(props) {
  5. Step 5: return ;
  6. Step 6: };
  7. Step 7:
  8. Step 8: Then, update the original component to use this new ImageWrapper component instead of the native Image component:
  9. Step 9: javascript
  10. Step 10: import React from 'react';
  11. Step 11: import { View } from 'react-native';
  12. Step 12: import ImageWrapper from './ImageWrapper';
  13. Step 13: export default function MyComponent() {
  14. Step 14: return (
  15. Step 15:
  16. Step 16:
  17. Step 17:
  18. Step 18:;
  19. Step 19: );
  20. Step 20:

Using the Native Image Component with a TouchableHighlight

  1. Step 1: Use the native Image component instead of the React Native Image component, and pass the resizeMode prop to it:
  2. Step 2: javascript
  3. Step 3: import React from 'react';
  4. Step 4: import { View } from 'react-native';
  5. Step 5: import { Image } from 'react-native';
  6. Step 6: export default function MyComponent() {
  7. Step 7: return (
  8. Step 8:
  9. Step 9:
  10. Step 10:
  11. Step 11:;
  12. Step 12: );
  13. Step 13:

✨ Wrapping Up

To resolve the "React.Children.only expected to receive a single React element child" error, you can either wrap your Image component in a separate component or use the native Image component with a TouchableHighlight. By following these steps, you should be able to fix this issue and render complex user interfaces without any errors.

Did this fix your problem?

If not, try searching for specific error codes.

🔍 Search Error Database

❓ Frequently Asked Questions

🛠️ Related Fixes

How to Fix: Pc crashes shortly after launching game (rainbow

Fix Pc crashes shortly after launching game (rainbow six siege). Compl

How to Fix: Installing an APK on a locked down phone

Installing an APK on a locked down phone: Try using a rooted device, e

How to Fix: New PC build- no signal and no clue

Fix New PC build- no signal and no clue. Complete troubleshooting guid