CODEWITHSUNDEEP
javascriptcssreactjsreact-nativeecmascript-6
MoKhajavi75
MoKhajavi75

Reputation: 2702

React Native weird flex behavior

I'm trying to create a header with an image so I write this:

  <View style={{
          flex: 1,
          backgroundColor: "#FFFFFF",
          padding: 20
          }}
  >
    <View style={{ flex: 3 }}>
      <Image
        source={this.images.header}
        style={{
          flex: 1,
          alignSelf: "flex-end",    // HERE
          resizeMode: "contain",
          marginTop: -20,
          marginLeft: -20
        }}
      />
    </View>
  </View>

The weird part is alignSelf: "flex-end" - this align the image at the left side! As far as I know, it must be alignSelf: "flex-start" to align left.

Am I wrong?

PS: I use marginTop: -20 and marginLeft: -20 to stick the image to borders of the device (because of padding: 20 the container)

Any idea?

Thank in advance!

Upvotes: 0

Views: 174

Answers (1)

mcssym
mcssym

Reputation: 944

I think it is because the Image cover the whole space but the image data is resized so that you think it is only in a part of the view. Try removing flex: 1and set the widthand heightproperly or at leaset one of both.

Upvotes: 1

Related Questions