Trying to use two props in custom defined component in react native, but it doesn't work

Question

I am adding two props (textProp & imgProp) to my custom component, but I keep on getting this error <Image> component cant contain children. This is what I have soo far

function TextImg(textprop, imgprop) {
  return(
    <div>
      <div>
        <Text>{textprop.text}</Text>
      </div>
      <div>
        <Image source={imgprop.imageUri}>!</Image>
      </div>
    </div>
  );
}

Can anyone help me regarding this, Thanks!

Answer 1

Images (img) are considered empty elements and are self-closing, and required to be per the html spec.

https://developer.mozilla.org/en-US/docs/Glossary/Empty_element

The react native Image has the same restriction.

They can't wrap anything or have any children nodes. The "!" is the issue.

<Image source={imgprop.imageUri}>!</Image>

Try instead

<Image source={imgprop.imageUri} />

If you need to display an "!" then it'll have to be outside the image.

Answer 2

if you need to show "!" in image,

Try

<View>
  <Image source={img} />
  <Text
    style={{
      position: "absolute",
      // some stylng
    }}
  >
    !
  </Text>
</View>