I am making a react native app, and I'm having trouble getting an image to fade at the edges so that it blends into the background. I want it to look like the Netflix app, where the image doesn't end, but just fades into black [Netflix image](https://i.stack.imgur.com/93l7h.jpg). I have tried wrapping my image component in a linear gradient, but that doesn't get rid of the hard edges of the image. I have to turn to opacity of the image all the way down to 0.1 to get that, which just destroys the quality of the image.

Here is the code for the component:

```
 <LinearGradient
     colors={["black", "white", "black"]}
     locations={[0.2, 0.5, .8]}
>
   <Image
      key={image}
      source={{ uri: image }}
      style={styles.backgroundImage}
    />
  </LinearGradient>

```

and the styles:

```
imageGradient: {
    height: "70%",
    marginTop: 150,
    justifyContent: "center"
  },

  backgroundImage: {
    height: "80%",
    width: DEVICE_WIDTH,
    opacity: 0.8
  }

```