react-nativereact-native-stylesheet

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

How

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

Solution

  • 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.