@umituz/react-native-video-editor 1.0.35 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.0.35",
+  "version": "1.1.0",
   "description": "Professional video editor with layer-based timeline, text/image/shape/audio/animation layers, and export functionality",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -21,8 +21,7 @@
     "video-editor",
     "timeline",
     "layers",
-    "video-export",
-    "animation"
+    "video-export"
   ],
   "author": "umituz",
   "license": "MIT",
@@ -59,7 +58,6 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.30.0",
-    "react-native-reanimated": "^4.2.1",
     "typescript": "~5.9.2",
     "@types/react-native": "*",
     "@typescript-eslint/parser": "*",

package/src/presentation/components/DraggableLayer.tsx

@@ -4,9 +4,8 @@
  */
 
 import React from "react";
-import { StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { Layer } from "../../domain/entities";
 import { useDraggableLayerGestures } from "../hooks/useDraggableLayerGestures";
@@ -40,10 +39,7 @@ export const DraggableLayer: React.FC<DraggableLayerProps> = ({
   const initialHeight = (layer.size.height / 100) * canvasHeight;
 
   const {
-    translateX,
-    translateY,
-    width,
-    height,
+    state,
     composedGesture,
     topLeftResizeHandler,
     topRightResizeHandler,
@@ -61,30 +57,27 @@ export const DraggableLayer: React.FC<DraggableLayerProps> = ({
     onSizeChange,
   });
 
-  const animatedStyle = useAnimatedStyle(() => {
-    const rotationStr = `${layer.rotation}deg`;
-    return {
-      transform: [
-        { translateX: translateX.value },
-        { translateY: translateY.value },
-        { rotate: rotationStr },
-      ],
-      opacity: layer.opacity,
-      width: width.value,
-      height: height.value,
-    };
-  });
+  const layerStyle = {
+    transform: [
+      { translateX: state.x },
+      { translateY: state.y },
+      { rotate: `${layer.rotation}deg` },
+    ],
+    opacity: layer.opacity,
+    width: state.width,
+    height: state.height,
+  };
 
   return (
     <GestureDetector gesture={composedGesture}>
-      <Animated.View
+      <View
         style={[
           styles.layer,
           {
             borderColor: isSelected ? tokens.colors.primary : "transparent",
             borderWidth: isSelected ? 2 : 0,
           },
-          animatedStyle,
+          layerStyle,
         ]}
       >
         <LayerContent layer={layer} />
@@ -97,7 +90,7 @@ export const DraggableLayer: React.FC<DraggableLayerProps> = ({
             bottomRightGesture={bottomRightResizeHandler}
           />
         )}
-      </Animated.View>
+      </View>
     </GestureDetector>
   );
 };

package/src/presentation/components/draggable-layer/ResizeHandles.tsx

@@ -4,9 +4,8 @@
  */
 
 import React from "react";
-import { StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated from "react-native-reanimated";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 
 interface ResizeHandlesProps {
@@ -27,7 +26,7 @@ export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
   return (
     <>
       <GestureDetector gesture={topLeftGesture}>
-        <Animated.View
+        <View
           style={[
             styles.handle,
             styles.handleTopLeft,
@@ -40,7 +39,7 @@ export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
       </GestureDetector>
 
       <GestureDetector gesture={topRightGesture}>
-        <Animated.View
+        <View
           style={[
             styles.handle,
             styles.handleTopRight,
@@ -53,7 +52,7 @@ export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
       </GestureDetector>
 
       <GestureDetector gesture={bottomLeftGesture}>
-        <Animated.View
+        <View
           style={[
             styles.handle,
             styles.handleBottomLeft,
@@ -66,7 +65,7 @@ export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
       </GestureDetector>
 
       <GestureDetector gesture={bottomRightGesture}>
-        <Animated.View
+        <View
           style={[
             styles.handle,
             styles.handleBottomRight,

package/src/presentation/hooks/useDraggableLayerGestures.ts

@@ -3,9 +3,8 @@
  * Manages gesture handling for draggable layers
  */
 
-import { useSharedValue } from "react-native-reanimated";
+import { useState, useRef, useCallback } from "react";
 import { Gesture } from "react-native-gesture-handler";
-import { withSpring, runOnJS } from "react-native-reanimated";
 
 interface UseDraggableLayerGesturesParams {
   initialX: number;
@@ -19,11 +18,15 @@ interface UseDraggableLayerGesturesParams {
   onSizeChange: (width: number, height: number) => void;
 }
 
+interface LayerState {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 interface UseDraggableLayerGesturesReturn {
-  translateX: ReturnType<typeof useSharedValue<number>>;
-  translateY: ReturnType<typeof useSharedValue<number>>;
-  width: ReturnType<typeof useSharedValue<number>>;
-  height: ReturnType<typeof useSharedValue<number>>;
+  state: LayerState;
   composedGesture: ReturnType<typeof Gesture.Race>;
   topLeftResizeHandler: ReturnType<typeof Gesture.Pan>;
   topRightResizeHandler: ReturnType<typeof Gesture.Pan>;
@@ -33,9 +36,6 @@ interface UseDraggableLayerGesturesReturn {
 
 const MIN_SIZE = 50;
 
-/**
- * Hook for managing draggable layer gestures
- */
 export function useDraggableLayerGestures({
   initialX,
   initialY,
@@ -47,102 +47,84 @@ export function useDraggableLayerGestures({
   onPositionChange,
   onSizeChange,
 }: UseDraggableLayerGesturesParams): UseDraggableLayerGesturesReturn {
-  const translateX = useSharedValue(initialX);
-  const translateY = useSharedValue(initialY);
-  const width = useSharedValue(initialWidth);
-  const height = useSharedValue(initialHeight);
+  const [state, setState] = useState<LayerState>({
+    x: initialX,
+    y: initialY,
+    width: initialWidth,
+    height: initialHeight,
+  });
+
+  const startRef = useRef({ x: initialX, y: initialY, width: initialWidth, height: initialHeight });
 
-  const startX = useSharedValue(initialX);
-  const startY = useSharedValue(initialY);
-  const startWidth = useSharedValue(initialWidth);
-  const startHeight = useSharedValue(initialHeight);
+  const clamp = useCallback((value: number, min: number, max: number) => {
+    return Math.max(min, Math.min(max, value));
+  }, []);
 
   const gestureHandler = Gesture.Pan()
     .onStart(() => {
-      startX.value = translateX.value;
-      startY.value = translateY.value;
-      runOnJS(onSelect)();
+      startRef.current = { ...state, x: state.x, y: state.y };
+      onSelect();
     })
     .onUpdate((event) => {
-      translateX.value = startX.value + event.translationX;
-      translateY.value = startY.value + event.translationY;
+      const newX = startRef.current.x + event.translationX;
+      const newY = startRef.current.y + event.translationY;
+      setState((prev) => ({ ...prev, x: newX, y: newY }));
     })
     .onEnd(() => {
-      translateX.value = withSpring(
-        Math.max(0, Math.min(canvasWidth - width.value, translateX.value)),
-      );
-      translateY.value = withSpring(
-        Math.max(0, Math.min(canvasHeight - height.value, translateY.value)),
-      );
-
-      const newX = (translateX.value / canvasWidth) * 100;
-      const newY = (translateY.value / canvasHeight) * 100;
-      runOnJS(onPositionChange)(newX, newY);
+      setState((prev) => {
+        const clampedX = clamp(prev.x, 0, canvasWidth - prev.width);
+        const clampedY = clamp(prev.y, 0, canvasHeight - prev.height);
+        const newX = (clampedX / canvasWidth) * 100;
+        const newY = (clampedY / canvasHeight) * 100;
+        onPositionChange(newX, newY);
+        return { ...prev, x: clampedX, y: clampedY };
+      });
     });
 
   const createResizeHandler = (
-    deltaX: (translationX: number) => number,
-    deltaY: (translationY: number) => number,
+    deltaX: (tx: number) => number,
+    deltaY: (ty: number) => number,
   ) => {
     return Gesture.Pan()
       .onStart(() => {
-        startWidth.value = width.value;
-        startHeight.value = height.value;
-        startX.value = translateX.value;
-        startY.value = translateY.value;
-        runOnJS(onSelect)();
+        startRef.current = { ...state };
+        onSelect();
       })
       .onUpdate((event) => {
-        const newWidth = Math.max(
-          MIN_SIZE,
-          startWidth.value + deltaX(event.translationX),
-        );
-        const newHeight = Math.max(
-          MIN_SIZE,
-          startHeight.value + deltaY(event.translationY),
-        );
-        width.value = Math.min(newWidth, canvasWidth - startX.value);
-        height.value = Math.min(newHeight, canvasHeight - startY.value);
+        const newWidth = Math.max(MIN_SIZE, startRef.current.width + deltaX(event.translationX));
+        const newHeight = Math.max(MIN_SIZE, startRef.current.height + deltaY(event.translationY));
+        const clampedWidth = Math.min(newWidth, canvasWidth - startRef.current.x);
+        const clampedHeight = Math.min(newHeight, canvasHeight - startRef.current.y);
+
+        let newX = startRef.current.x;
+        let newY = startRef.current.y;
 
         if (deltaX(event.translationX) < 0) {
-          translateX.value = Math.max(
-            0,
-            startX.value + (startWidth.value - width.value),
-          );
+          newX = Math.max(0, startRef.current.x + (startRef.current.width - clampedWidth));
         }
         if (deltaY(event.translationY) < 0) {
-          translateY.value = Math.max(
-            0,
-            startY.value + (startHeight.value - height.value),
-          );
+          newY = Math.max(0, startRef.current.y + (startRef.current.height - clampedHeight));
         }
+
+        setState({ x: newX, y: newY, width: clampedWidth, height: clampedHeight });
       })
       .onEnd(() => {
-        const newWidth = (width.value / canvasWidth) * 100;
-        const newHeight = (height.value / canvasHeight) * 100;
-        const newX = (translateX.value / canvasWidth) * 100;
-        const newY = (translateY.value / canvasHeight) * 100;
-        runOnJS(onSizeChange)(newWidth, newHeight);
-        runOnJS(onPositionChange)(newX, newY);
+        setState((prev) => {
+          const newWidth = (prev.width / canvasWidth) * 100;
+          const newHeight = (prev.height / canvasHeight) * 100;
+          const newX = (prev.x / canvasWidth) * 100;
+          const newY = (prev.y / canvasHeight) * 100;
+          onSizeChange(newWidth, newHeight);
+          onPositionChange(newX, newY);
+          return prev;
+        });
       });
   };
 
-  const topLeftResizeHandler = createResizeHandler(
-    (tx) => -tx,
-    (ty) => -ty,
-  );
-  const topRightResizeHandler = createResizeHandler(
-    (tx) => tx,
-    (ty) => -ty,
-  );
-  const bottomLeftResizeHandler = createResizeHandler(
-    (tx) => -tx,
-    (ty) => ty,
-  );
-  const bottomRightResizeHandler = createResizeHandler(
-    (tx) => tx,
-    (ty) => ty,
-  );
+  const topLeftResizeHandler = createResizeHandler((tx) => -tx, (ty) => -ty);
+  const topRightResizeHandler = createResizeHandler((tx) => tx, (ty) => -ty);
+  const bottomLeftResizeHandler = createResizeHandler((tx) => -tx, (ty) => ty);
+  const bottomRightResizeHandler = createResizeHandler((tx) => tx, (ty) => ty);
 
   const composedGesture = Gesture.Race(
     gestureHandler,
@@ -153,10 +135,7 @@ export function useDraggableLayerGestures({
   );
 
   return {
-    translateX,
-    translateY,
-    width,
-    height,
+    state,
     composedGesture,
     topLeftResizeHandler,
     topRightResizeHandler,