Image inside a View element is not aligning to the right in React Native-CodePudding

I am implementing a tile in reactnative and I have to make the Image right in the tile just like this What I want (click here)

and this is what I can implement till now What I get ()

this is my code

<View style={styles.container} >
      <Image
        style={styles.image}
        source={item.image}
        resizeMode="cover"
      />
      <View style={styles.overlay} />
      <View style={styles.textContainer}>
        <Text style={styles.subText}>{item.title}</Text>
        <Text style={styles.headingText}>{item.message}</Text>
      </View>
    </View>

and this is style

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#206c72',
    alignItems: 'flex-end',
    borderRadius: 15,
    width: COURSE_ITEM_WIDTH,
    elevation: 7,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
    marginTop: 20
  },
  image: {
    width: COURSE_ITEM_WIDTH,
    height: 120,
    borderRadius: 10
  },
  textContainer: {
    position: 'absolute',
    left: 16,
    flex: 1,
  },
  headingText: {
    fontSize: 18,
    color: '#ffffff',
    marginTop: 5
  },
  subText: {
    fontSize: 14,
    color: '#ffffff',
  },
  timeText: {
    fontSize: 15,
    color: 'white',
    textAlign: 'center',
    marginTop: 5
  },
  overlay: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: '#206c72',
    opacity: 0.6,
    borderRadius: 10
  }
})

Please help me i dont know what i am doing wrong. thanks in advance!

[note: please ignore the content, focus on alignment]

CodePudding user response：

Your image is aligned to the right but there is nothing at the left of it. You should add flexDirection:'row' to the parent container and put an empty View with width : 40px before your image. You can also remove the alignItems:flex-end and justifyContent:center from the main container

CodePudding user response：

You can add alignSelf property to flex-end for image and image will be on end of the tile.

example 1:

 image: {
    width: "50%",
    height: 120,
    borderRadius: 10,
    backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
    alignSelf: "flex-end"
  },

for reference i tried a sandbox example check it out here

also noticed you are using alignItems value twice first one is only necessary you can remove 2nd alignItems and position relative value from styles.container then it will align the image to end. you will get the exact result you want

example 2:

container: {
    backgroundColor: '#206c72',
    alignItems: 'flex-end',   // only need this alignItems 
    borderRadius: 15,
    width: COURSE_ITEM_WIDTH,
    elevation: 7,
    justifyContent: 'center',
    marginTop: 20
  },
image: {
    width: "50%",
    height: 120,
    borderRadius: 10,
    backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
    // no need of alignSelf to flex-end here
  },