DynamicValues.tsx

import { Canvas, Skia } from "@shopify/react-native-skia";
import React, { useEffect } from "react";
import { Dimensions, View } from "react-native";
import { makeMutable, cancelAnimation } from "react-native-reanimated";

import { HelloSticker, HelloStickerDimensions } from "./HelloSticker";
import { LocationSticker, LocationStickerDimensions } from "./LocationSticker";
import { Picture, PictureDimensions } from "./Picture";
import { GestureHandler } from "./GestureHandler";

const { width, height } = Dimensions.get("window");

const stickers = [
  {
    Sticker: Picture,
    dimensions: PictureDimensions,
    matrix: makeMutable(Skia.Matrix()),
  },
  {
    Sticker: HelloSticker,
    dimensions: HelloStickerDimensions,
    matrix: makeMutable(Skia.Matrix()),
  },
  {
    Sticker: LocationSticker,
    dimensions: LocationStickerDimensions,
    matrix: makeMutable(Skia.Matrix()),
  },
];

export const Stickers = () => {
  // When unmounting the component we need to cancel animations if any
  useEffect(() => {
    return () => {
      stickers.forEach(({ matrix }) => {
        cancelAnimation(matrix);
      });
    };
  });
  return (
    <View>
      <Canvas style={{ width, height }}>
        {stickers.map(({ Sticker, matrix }, index) => (
          <Sticker key={index} matrix={matrix} />
        ))}
      </Canvas>
      {stickers.map(({ dimensions, matrix }, index) => (
        <GestureHandler key={index} matrix={matrix} dimensions={dimensions} />
      ))}
    </View>
  );
};