Skia

import {
  Box,
  BoxShadow,
  Canvas,
  Fill,
  Image,
  ImageFormat,
  Mask,
  rect,
  rrect,
  Skia,
  SkImage,
  useCanvasRef,
} from '@shopify/react-native-skia';
import React, {FC, useEffect, useState} from 'react';
import {Button, SafeAreaView, StyleSheet, Image as RNImage} from 'react-native';

interface Props {}
const generateSkiaImage = async (path: string) => {
  return await Skia.Data.fromURI(path).then(data =>
    Skia.Image.MakeImageFromEncoded(data),
  );
};

const App: FC<Props> = (): JSX.Element => {
  const [image, setImage] = useState<SkImage>();
  const [capturedImage, setCapturedImage] = useState('');
  const canvasRef = useCanvasRef();

  useEffect(() => {
    generateSkiaImage(
      'https://images.unsplash.com/photo-1670272501077-c72d2d42f362?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    ).then(value => {
      if (value) {
        setImage(value);
      }
    });
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      {/* <Canvas style={{flex: 1}}>
        <Box color="white" box={rrect(rect(50, 50, 300, 300), 10, 10)}>
          <BoxShadow dx={-10} dy={0} color="black" blur={20} />
        </Box>
      </Canvas> */}
      <Canvas ref={canvasRef} style={{width: 300, height: 300}}>
        <Fill color="blue" />
        <Mask mask={<Box box={rrect(rect(50, 50, 200, 200), 10, 10)}></Box>}>
          {image ? (
            <Image
              x={50}
              y={10}
              image={image}
              width={300}
              height={300}
              fit="cover"
            />
          ) : null}
        </Mask>
      </Canvas>
      <Button
        title="Capture"
        onPress={() => {
          const skImg = canvasRef.current?.makeImageSnapshot();
          if (skImg) {
            const base64 = skImg.encodeToBase64(ImageFormat.PNG, 100);
            setCapturedImage('data:image/png;base64,' + base64);
          }
        }}
      />

      {capturedImage ? (
        <RNImage
          source={{uri: capturedImage}}
          style={{width: 200, height: 200, backgroundColor: 'red'}}
        />
      ) : null}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;