CODEWITHSUNDEEP
javascriptreact-native
mxmtsk
mxmtsk

Reputation: 4685

React Native: Absolute positioned image higher than parent

I have a View-Element that contains an image, which works as a background-image for the View-Element. The background-image is absolute positioned with top, left, right and bottom set to 0 but it is still higher then it's parent (you can see it on the red border in the image).

Screenshot from iOS Simulator

Does anyone know why?

<View style={styles.headerContainer}>
  <Image source={Images.headerBg} style={styles.headerBackgroundImage} resizeMode="cover" />
  <View style={styles.headerRow}>
    <View style={styles.headerColumn}>
      <TouchableOpacity style={styles.magicHeartButton}>
        <Icon
          name="heart"
          size={12}
          color="red"
          style={styles.magicHeartButtonIcon}
        />
        <Text style={styles.magicHeartButtonText}>247</Text>
      </TouchableOpacity>
    </View>

    <View style={styles.headerColumn}>
      <TouchableOpacity style={styles.tonightButton}>
        <Text style={styles.tonightButtonText}>right column</Text>
      </TouchableOpacity>
    </View>
  </View>
</View>

The Stylesheet:

headerContainer: {
  backgroundColor: '#ffd700',
  height: 40,
  position: 'relative',
  borderWidth: 1,
  borderColor: 'red',
},
headerRow: {
  justifyContent: 'space-between',
  flexDirection: 'row',
  alignItems: 'center',
},
headerColumn: {
  padding: 10,
},
headerBackgroundImage: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
},

Upvotes: 1

Views: 1550

Answers (1)

coder hacker
coder hacker

Reputation: 4868

I did background image in following way. Instead of wrapping in <View>, I wrapped everything in <Image>

Example: 

<Image source = {require('./back.jpg')} style={styles.container}>
  <View>

  </View>
</Image>




container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    height :null,
    width: null
  },

Upvotes: 1

Related Questions