React Native Image – No Children Anymore

As a newbie of react native, I was following some tutorials to add text over an image. The recommended method was to use an image as a container for text component.

render() {
    return (
      <Image
        source={{uri: 'imageURL'}}
        >
        <Text >
          I am learning React Native!
        </Text>
        
      </Image>
    );
  }

But this didn’t work as expected and an error was triggered : “The  component cannot contain children.”

After some googling, it was clear why the above code was not working as expected. With the new release of react native 0.50, the image component could not have nested content as mentioned here,

Although the new alternative component is not documented yet at the time of this post, you can try the new component <ImageBackground> if you need to use text or other components with an image.

So, the new code for a text overlaying an image would be like this:

render() {
    return (
      <ImageBackground
         source={{uri: 'imageURL'}}
        >
        <Text >
          This is the new way to add text overlaying an image!
        </Text>
        
      </ImageBackground>
    );
  }