loading...

Add text on image in ReactNative

github logo ・1 min read

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.

twitter logo DISCUSS
Classic DEV Post from May 2 '19

The Art of Programming

One of the most consolidated misconceptions about programming, since the early days, is the idea that such activity is purely technical, completely exact in nature, like Math and Physics. Computation is exact, but programming is not.

chansuke profile image

Hey there reader...

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❤️