1

I have a static image that I crop with a circle and now I want to save this modified image in my device's gallery, does anyone know how to do that? I am using TypeScript.

Cropped image: cropped image

import React from "react";
import { SafeAreaView } from "react-native";
import Svg, { Circle, ClipPath, Defs, Image } from "react-native-svg";

export const App = () => {
    return (
        <SafeAreaView>
            <Svg>
                <Image
                    href={require('./apple.jpg')}
                    clipPath="url(#clip)" />
                <Defs>
                    <ClipPath id="clip">
                        <Circle cx="150" cy="150" r="150" />
                    </ClipPath>
                </Defs>
            </Svg>
        </SafeAreaView>
    );
}

export default App;
Connor Low
  • 5,900
  • 3
  • 31
  • 52
alx1024
  • 21
  • 2

1 Answers1

1

So far this solution seems to work involving another library: react-native-view-shot

import React, { RefObject, useRef } from "react";
import { Button, SafeAreaView } from "react-native";
import Svg, { Circle, ClipPath, Defs, Image } from "react-native-svg";
import ViewShot, { CaptureOptions, captureRef } from "react-native-view-shot";
import RNFetchBlob, { Encoding } from "rn-fetch-blob";

const IMAGE_FOLDER = RNFetchBlob.fs.dirs.DownloadDir;

export const App = () => {
    const viewShotRef = useRef() as RefObject<ViewShot>;

    const captureAndSaveImage = async (imageName: string, options: CaptureOptions) => {
        try {
            await RNFetchBlob.fs.mkdir("./test");
            await RNFetchBlob.fs.writeFile(IMAGE_FOLDER + "/" + imageName + "." + options.format, await captureRef(viewShotRef, options), "uri" as Encoding);
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <SafeAreaView>
            <ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 1.0 }}>
                <Svg>
                    <Image
                        href={require('./apple.jpg')}
                        clipPath="url(#clip)" />
                    <Defs>
                        <ClipPath id="clip">
                            <Circle cx="150" cy="150" r="150" />
                        </ClipPath>
                    </Defs>
                </Svg>
            </ViewShot>
            <Button title="Capture" onPress={() => captureAndSaveImage("pic1", { format: "jpg", quality: 1.0 })} />
        </SafeAreaView>
    );
}

export default App;
alx1024
  • 21
  • 2