Flexbox positioning text inside image

Question

I'm using React Native and trying to create a specific layout.

I have an image, vertically & horizontally centred (within a View) and some Text on top of the image also vertically & horizontally centred. The Text needs to come on top of image/background image therefore I put it inside the image tag.

Now the content of that text can be very long and because it is inside the image tag, it wraps.

How can I make it so the content inside Text won't wrap and still be on top of the Image?

My layout so far:

The layout I'm trying to achieve

My code:

<TouchableHighlight onPress={onPress}>
  <View style={styles.categoryContainer}>
    <View style={styles.leftContainer}>
      <View style={styles.categoryIndexContainer}>
        <Text style={styles.categoryIndex}>01</Text>
      </View>
    </View>
    <View style={styles.middleContainer}>
      <Image source={img} style={styles.categoryImage}>
        <Text style={styles.categoryName}>Some very long title name</Text>
      </Image>
    </View>
    <View style={styles.rightContainer}></View>
  </View>
</TouchableHighlight>

const styles = StyleSheet.create({
  categoryContainer: {
    flexDirection: 'row',
  },
  leftContainer: {
    width: 50,
    paddingLeft: 15,
    paddingTop: 30,
  },
  middleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    flexDirection: 'row',
  },
  rightContainer: {
    width: 50,
  },
  categoryName: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 40,
    textAlign: 'center',
    backgroundColor: 'transparent',
    flexWrap: 'nowrap',
  },
  categoryImage: {
    alignItems:'center',
    justifyContent:'center',
    flexWrap: 'nowrap',
  },
})

Thanks

score 0 · Accepted Answer · answered Sep 28 '16 at 23:37

0

You should specify on categoryName style: position: 'absolute' then set the top, left, right, bottom attributes until you place the Text above the Image.

answered Sep 28 '16 at 23:37

JFAP

3,617
1
24
25

Hi, I did try position absolute on categoryName but the content is still wrapping. – John Sep 28 '16 at 23:58
you should remove the Text component inside the Image component. They should be two separate components – JFAP Sep 29 '16 at 00:09
Right — removing the Text from inside the Image & adding position absolute keeps the Text from wrapping but for some reason the Image appears above the Text (even though the Text component comes before the Image component). – John Sep 29 '16 at 00:19
the Text should come after the Image – JFAP Sep 29 '16 at 00:21
You are right, my bad. It works. Thanks a lot for your help. – John Sep 29 '16 at 00:28

Flexbox positioning text inside image

1 Answers1