overlay image on top of view/div border?

user_11671225 0
Viewed 25

I have a problem on placing my image over the border of my view or div. I tried to add position absolute and use top property but doesn't worked. here's my code:

const Card = () => {
  return (
    <View style={styles.mainContainer}>
      <View style={styles.imageContainer}>
          <Image style={styles.mainImage} source={require('../assets/Img/office.jpg')} />
      </View>
      <View style={styles.locationContainer}>
        <View style={styles.textContainer}>
          <Text style={styles.mainText}>Welcome to the finest future of business</Text>
        </View>
        <View style={styles.locationContainer}>
          <Text>location</Text>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
 mainContainer: {
   width: '100%',
   height: 300,
   borderRadius: 30,
  //  overflow: 'hidden',
   borderWidth: 4,
   borderColor: '#EDF1F2',
 },
 imageContainer: {
  height: '70%',
 },
 mainImage: {
   width: '100%',
   height: '100%',
   borderRadius: 30,
 }

})

here is the goal:

enter image description here

here is my code result:

enter image description here

react-native css
1 Answers

The issue is that the border is outside of the

To achieve this you could remove the border styling from your container, and add a that act as a background:

 const Card = () => {
  return (
    <View style={styles.mainContainer}>
      <View style={styles.imageContainer}>
          <Image style={styles.mainImage} source={require('../assets/Img/office.jpg')} />
      </View>
      {/* ... */}
      <View style={styles.background} />
    </View>
  )
}

const styles = StyleSheet.create({
 mainContainer: {
   width: '100%',
   height: 300,
   borderRadius: 30,
   overflow: 'hidden',
 },
 background: {
   position: 'absolute',
   top: 4,
   right: 4,
   bottom: 4,
   left: 4,
   borderWidth: 4,
   borderRadius: 30,
   borderColor: '#EDF1F2',
   backgroundColor: '#ffffff',
   zIndex: 0
 }
 // ...
})

Haven't tested the code so it might need some minor tweaks..

user_121637010
Related