Glazzes

import type { SizeVector, Vector } from 'react-native-zoom-toolkit';
import { interpolate } from 'react-native-reanimated';

type Rect = {
  x: number;
  y: number;
  width: number;
  height: number;
};

Glazzes

/**
 * @author Santiago Zapata
 * @description This is small gist about how to get a sticker like image to rotate over itself aswell
 * resizing it's dimensions as seen in Telegram.
 *
 * How does it work?
 * All you need is to know the angle to rotate your sticker, this achieved by getting the position of the
 * center of the image relative to the screen as this one will serve as the center of our calculations,
 * For the rings at the sides we want their position in the screen aswell, however the rings are mere
 * decorations to trigger the pan gesture as this one will provide us the position  of your touches

Glazzes

/**
 * After some thoughts on this topic, I've decided to turn this gist along with other features into a library so you can zoom
 * whatever you want, library you can find here https://github.com/Glazzes/react-native-zoom-toolkit.
 *
 * @author Santiago Zapata, Glazzes at Github <3
 * @description This gist makes part of an article I'm writing about this topic (in spanish). This solution takes into account
 * the linear algebra concepts and geometrical interpretation of the transform-origin property specification, this solution
 * takes heavy inspiration from William's Candillon +3 year old video in this topic, however this solution brings it to the
 * modern day along with a huge fix that prevents the origin from being displaced by an incorrect offset calculation after
 * the first zoom interaction.