# Fade Image with background in React-Native with react-native-skia

Even though react and react-native have the same fundamentals, designing many basic web things can be pretty hard and non-efficient. Fading Image or any View with the background can be achieved with LinearGradient and React-Native-SVG library but in this tutorial, I will do it with [react-native-skia](https://github.com/shopify/react-native-skia).

### Install react-native-skia :

```sh
yarn add @shopify/react-native-skia
```

### Boilerplate App.tsx

```jsx
import React from 'react';
import { Dimensions, View } from 'react-native';
import { Canvas, Image, useImage } from '@shopify/react-native-skia';

const { height, width } = Dimensions.get('screen');

export default function App() {
  const photo = useImage(
    'https://images.pexels.com/photos/1382734/pexels-photo-1382734.jpeg',
  );
  return (
    <View style={{ flex: 1 }}>
      <Canvas style={{ height: height / 2 }}>
        {photo && (
          <Image
            image={photo}
            x={0}
            y={0}
            height={height / 2}
            width={width}
            fit="cover"
          />
        )}
      </Canvas>
    </View>
  );
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650791797815/7B6r2uERS.png)

To fade the image I will use `Mask` and `LinearGradient` by `react-native-skia`.

> **Mask: ** The `Mask` component hides an element by masking the content at specific points. Just like its CSS counterpart, there are two modes available:

```jsx
import React from 'react';
import { Dimensions, View } from 'react-native';
import {
  Canvas,
  Image,
  useImage,
  Mask,
  LinearGradient,
  Rect,
  vec,
} from '@shopify/react-native-skia';

const { height, width } = Dimensions.get('screen');

export default function App() {
  const photo = useImage(
    'https://images.pexels.com/photos/1382734/pexels-photo-1382734.jpeg',
  );
  return (
    <View style={{ flex: 1 }}>
      <Canvas style={{ height: height / 2 }}>
        <Mask
          mask={
            <Rect x={0} y={0} height={height / 2} width={width}>
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, height / 2)}
                colors={['white', 'white', 'white', 'transparent']}
              />
            </Rect>
          }>
          {photo && (
            <Image
              image={photo}
              x={0}
              y={0}
              height={height / 2}
              width={width}
              fit="cover"
            />
          )}
        </Mask>
      </Canvas>
    </View>
  );
}
```

### Preview

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650792240177/0v1JCrHBo.png)


#### Credits:
- [Pexels](https://images.pexels.com/photos/1382734/pexels-photo-1382734.jpeg)
- [React-Native-Skia](https://github.com/shopify/react-native-skia)