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

Question

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

Answer 1

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.