0

How

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Suhail Moh
  • 45
  • 1
  • 1
  • 11

1 Answers1

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.

Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
  • 1
    Note that: a) this library does not support radial gradients, which seems to be what OP has in mind based on the image, and b) using 'transparent' might mean the gradient will fade towards transparent black on iOS (see [README](https://github.com/react-native-linear-gradient/react-native-linear-gradient#transparent-gradient) - I do not see this happening in the snack version, though) – Marek Lisik Apr 12 '21 at 10:14