Add text on image in ReactNative

If you want to put a simple text(like status or category) on an image, using ImageBackground is very useful.

<ImageBackground
  source={{ uri: hoge }}
  style={{
    height: 100,
    width: 100,
    position: 'relative', // because it's parent
    top: 2,
    left: 2
  }}
>
  <Text
    style={{
      fontWeight: 'bold',
      color: 'white',
      position: 'absolute', // child
      bottom: 0, // position where you want
      left: 0
    }}
  >
    Hello World
  </Text>
</ImageBackground>

Put the component as a child of <ImageBackground> and tweak the position as you want.

Comments

[kennymanman]

How do i include border radius for the image
and also insert more text