React Children only expected to receive a single React element child error when putting Image and TouchableHighlight in a View

Question

I have the following render method in my React Native code   render         const  height  width    Dimensions get  window        return          lt View style  styles container  gt           lt Image            style                height height              width width                         source  require  image foo              resizeMode  cover             gt           lt TouchableHighlight style  styles button   gt         lt  View gt               It gives me a      React Children only expected to receive a single React element child   error  If I remove the TouchableHighlight component  it works fine  On the other hand  if I remove the Image component  it still gives that error  I can t see why it would be giving this error  and  lt View gt  should be able to have more than one component inside it for rendering  Any ideas

User · Answer

Usually it happen in TochableHighlight  Anyway error mean that you must used single element inside the whatever component      Solution   You can use single view inside parent and anything can be used inside that View   See the attached picture  enter image description here

User · Answer

The  lt TouchableHighlight gt  element is the source of the error  The  lt TouchableHighlight gt  element must have a child element   Try running the code like this   render         const  height  width    Dimensions get  window        return            lt View style  styles container  gt               lt Image                  style                        height height                      width width                                     source  require  image foo                    resizeMode  cover                 gt               lt TouchableHighlight style  styles button  gt                   lt Text gt  This text is the target to be highlighted  lt  Text gt               lt  TouchableHighlight gt           lt  View gt

User · Answer

I had this same error  even when I only had one child under the TouchableHighlight  The issue was that I had a few others commented out but incorrectly  Make sure you are commenting out appropriately  http   wesbos com react-jsx-comments

User · Answer

Yes  indeed you need to have one child inside your  lt TouchableHighlight gt    And  If you don t want to pollute your file with Views you can use React Fragments to achieve the same    lt TouchableWithoutFeedback gt     lt React Fragment gt            lt  React Fragment gt   lt  TouchableWithoutFeedback gt    or even better there is a short syntax for React Fragments  So the above code can be written as below    lt TouchableWithoutFeedback gt     lt  gt            lt   gt   lt  TouchableWithoutFeedback gt

User · Answer

lt TouchableHighlight gt  element can have only one child inside   Make sure that you have imported Image

User · Answer

In my case  I just had to put the element one line down  This throws an error   x000D   x000D  export function DismissKeyboard props  IProps      return  lt TouchableWithoutFeedback     onPress       gt  Keyboard dismiss    gt   props children     lt  TouchableWithoutFeedback gt     x000D   x000D   x000D   While this does not throw an error   x000D   x000D  export function DismissKeyboard props  IProps      return  lt TouchableWithoutFeedback     onPress       gt  Keyboard dismiss    gt       props children     lt  TouchableWithoutFeedback gt     x000D   x000D   x000D

User · Answer

It seems that  lt TouchableHighlight gt  must have exactly one child  The docs say that it supports only one child and more than one must be wrapped in a  lt View gt   but not that it must have at least  and most  one child  I just wanted to have a plain coloured button with no text image  so I didn t deem it necessary to add a child   I ll try to update the docs to indicate this

User · Answer

just after TouchableWithoutFeedback or  lt TouchableHighlight gt  insert a  lt View gt  this way you won t get this error  why is that then  Pedram answer or other answers explains enough

[react-native] "React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>

Examples related to react-native