如何在本机反应中逐渐模糊？

Question

Should get a gradient bluer like the design, but I can't do it, any ideas?

what it should look like

This is how my code look

<ImageBackground 
    source={{uri: uri}} 
    style={styles.imageBackground} 
    imageStyle={styles.imageStyleBackground}
  >
      <BlurView
        style={{width: width * 0.78}}
        >
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.title}>{title}</Text>
      </BlurView>
  </ImageBackground>

I try to use BlurView component, but it doesn't work the way it's supposed to.

Answer 1

Try with position: 'absolute'

 <> <Image source={{uri: uri}} style={styles.imageStyleBackground} /> <BlurView style={{width: width * 0.78, position: 'absolute'}}> <Text style={styles.date}>{date}</Text> <Text style={styles.title}>{title}</Text> </BlurView> </>

Answer 2

You could add an element on top of the image with backdrop-filter:blur(5px) that is masked with a gradient (eg. mask linear-gradient(black, black, transparent) )

See https://codepen.io/QuiteQuinn/pen/jOBxGjr .