ReactNative 使图像与背景淡入

Question

I am trying to achieve Image on background to fade in with background color. Basically I have image on background for half screen but bottom border is kind of sharp I want to make image transition to background smooth. Any suggestions? Something like this: Image example

Answer 1

I found the solution, I need to put linear gradient on top of image from transparent to bottom color

  <Image
    style={styles.absolute}
    source={{ uri: drink.imageUrl }}
    blurRadius={20}
  />
  <LinearGradient
    colors={['transparent', 'rgba(255,255,255,1)']}
    style={styles.absolute}
  />