How to add faded border in a Image component in React Native?

1.4k Views Asked by At

How

How to fade the border of an image shown below or how can achieve it? Any help would be appreciated

1

There are 1 best solutions below

1
On BEST ANSWER

You can use React Native Linear Gradient library for achieving this.

The API is very simple, e.g.

<LinearGradient
  colors={['rgba(192,32,64,0.9)', 'transparent']}
  style={{position: 'absolute', left: 0, right: 0, bottom: 0, height: 200}}
  start={{x:0, y:1.0}}
  end={{x: 0, y: 0}}
/>

Please, see my Expo Snack example for details: https://snack.expo.io/@zvona/linear-gradient.