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.

Install react-native-skia :

yarn add @shopify/react-native-skia

Boilerplate App.tsx

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>
  );
}

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:

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>
  );
}

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

Comments

More from this blog

Build-time OG images in Astro

Building an NSFW Detection Telegram Bot with Bun and TypeScript

Implementing Auto Token Refresh with "Ky" for React & React Native

Building a Reusable React Native Input Component with React Hook Form

Method chaining in TypeScript

Install react-native-skia :

Boilerplate App.tsx

Preview

Credits:

Command Palette

Comments

More from this blog

Install react-native-skia :

Boilerplate App.tsx

Preview

Credits: