Error: React.Children.only expected to receive a single React element child. This error is located at: in TouchableRipple

Question

I'm trying to call a svg image icon and text inside a TouchableRipple in react-native

Here is my code:

import ShareButton from "./assets/button.svg";
<View>
......
......
    <BottomSection
        borderless
        style={{
          borderBottomLeftRadius: 20,
          borderBottomRightRadius: 20,
        }}
        as={TouchableRipple}
        onPress={() => console.log("HenloY")}
      >
        <ShareButton
          onPress={() => console.log("Pressed share button")}
          height={hp("3.0%")}
          width={hp("3.0%")}
        />
        <BottomButtonText>Share Product</BottomButtonText>
   </BottomSection>
</View>

For this I used styled components:

const BottomSection = styled.TouchableOpacity`
  flex: 3;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-top-color: #ddddec;
  border-top-width: 1px;
`;

const BottomButtonText = styled.Text`
  color: red;
  font-size: 14px;
`;

When I run this I got the following error:

Error:

Error: React.Children.only expected to receive a single React element child.

This error is located at:
    in TouchableRipple (created by Context.Consumer)
    in ThemedComponent (created by withTheme(TouchableRipple))
    in withTheme(TouchableRipple) (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(Component))
    in Styled(Component) (at CategoriesCard.tsx:27)
   ....................................................
   ....................................................

What I done wrong here..!?

Any suggestions will be helpful!

score 0 · Answer 1 · answered Mar 06 '21 at 20:12

You need to update BottomSection. Please look into the below code that might help:

    <BottomSection
      borderless
      style={{
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
      }}
      as={TouchableRipple}
      onPress={() => console.log('HenloY')}>
      <>
        <ShareButton
          onPress={() => console.log('Pressed share button')}
          height={hp('3.0%')}
          width={hp('3.0%')}
        />
        <BottomButtonText>Share Product</BottomButtonText>
      </>
    </BottomSection>

I am not sure about `as={TouchableRipple}` prop for TouchableOpacity. if possible you can try removing it. — Vinay Singh, Mar 07 '21 at 06:18

score 0 · Accepted Answer · answered Mar 18 '21 at 16:12

Wrapped ShareButton and BottomButtonSection inside a View

 <BottomSection
      borderless
      style={{
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
      }}
      as={TouchableRipple}
      onPress={() => console.log('HenloY')}>
      <View>
        <ShareButton
          onPress={() => console.log('Pressed share button')}
          height={hp('3.0%')}
          width={hp('3.0%')}
        />
        <BottomButtonText>Share Product</BottomButtonText>
      </View>
    </BottomSection>

Error: React.Children.only expected to receive a single React element child. This error is located at: in TouchableRipple

2 Answers2