Create matrix transformation system in React Native?
I'd replace the bottomBoundary etc. with a decomposed transformation matrix (rotation, scale, translation) and use multitouch in the UI. When sliding a single finger over the image, you can update the translation component of the matrix, and with 2 fingers transform it so that the image appears to stick to the fingers. If you want to constrain rotation to 90 degree increments, you can snap it when the user lets go. This allows you to move freely and intuitively within the image without requiring the current rotation buttons.
Storing the matrix always in decomposed form avoids having to decompose or normalize it to avoid accumulating numerical inaccuracy (skew and changing aspect ratio).
Creating a new DecomposedMatrix class would help structuring the code. The key is to handle transforming it roughly like so:
scaleBy(scale) { this.scale *= scale; this.x *= scale; this.y *= scale;}