@umituz/react-native-photo-editor 1.0.11 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -3
  2. package/src/components/DraggableSticker.tsx +37 -28
  3. package/src/components/DraggableText.tsx +37 -28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-photo-editor",
3
- "version": "1.0.11",
3
+ "version": "1.1.0",
4
4
  "description": "A powerful, generic photo editor for React Native",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
@@ -23,7 +23,6 @@
23
23
  "react-native": "*",
24
24
  "@umituz/react-native-design-system": "*",
25
25
  "react-native-gesture-handler": "*",
26
- "react-native-reanimated": "*",
27
26
  "react-native-safe-area-context": "*"
28
27
  },
29
28
  "dependencies": {
@@ -40,7 +39,6 @@
40
39
  "eslint": "*",
41
40
  "typescript": "*",
42
41
  "react-native-gesture-handler": "*",
43
- "react-native-reanimated": "*",
44
42
  "react-native-safe-area-context": "*",
45
43
  "expo-application": "*",
46
44
  "expo-device": "*"
package/src/components/DraggableSticker.tsx CHANGED
@@ -1,11 +1,6 @@
1
- import React from "react";
2
- import { View } from "react-native";
1
+ import React, { useState, useRef, useCallback } from "react";
2
+ import { View, StyleSheet } from "react-native";
3
3
  import { Gesture, GestureDetector } from "react-native-gesture-handler";
4
- import Animated, {
5
- useAnimatedStyle,
6
- useSharedValue,
7
- runOnJS,
8
- } from "react-native-reanimated";
9
4
  import {
10
5
  AtomicText,
11
6
  useAppDesignTokens,
@@ -35,42 +30,50 @@ export const DraggableSticker: React.FC<DraggableStickerProps> = ({
35
30
  opacity = 1,
36
31
  }) => {
37
32
  const tokens = useAppDesignTokens();
38
- const translateX = useSharedValue(initialX);
39
- const translateY = useSharedValue(initialY);
40
- const offset = useSharedValue({ x: initialX, y: initialY });
33
+ const [position, setPosition] = useState({ x: initialX, y: initialY });
34
+ const offsetRef = useRef({ x: initialX, y: initialY });
35
+
36
+ const handleDragEnd = useCallback(() => {
37
+ onDragEnd(position.x, position.y);
38
+ }, [position.x, position.y, onDragEnd]);
41
39
 
42
40
  const panGesture = Gesture.Pan()
43
41
  .onStart(() => {
44
- offset.value = { x: translateX.value, y: translateY.value };
42
+ offsetRef.current = { x: position.x, y: position.y };
45
43
  })
46
44
  .onUpdate((event) => {
47
- translateX.value = offset.value.x + event.translationX;
48
- translateY.value = offset.value.y + event.translationY;
45
+ setPosition({
46
+ x: offsetRef.current.x + event.translationX,
47
+ y: offsetRef.current.y + event.translationY,
48
+ });
49
49
  })
50
50
  .onEnd(() => {
51
- runOnJS(onDragEnd)(translateX.value, translateY.value);
51
+ handleDragEnd();
52
52
  });
53
53
 
54
54
  const tapGesture = Gesture.Tap().onEnd(() => {
55
- runOnJS(onPress)();
55
+ onPress();
56
56
  });
57
57
 
58
- const animatedStyle = useAnimatedStyle(() => ({
59
- transform: [
60
- { translateX: translateX.value },
61
- { translateY: translateY.value },
62
- { rotate: `${rotation}deg` },
63
- { scale },
64
- ],
65
- opacity,
66
- zIndex: isSelected ? 100 : 50,
67
- }));
68
-
69
58
  const isEmoji = uri.length <= 4 && !uri.startsWith("http");
70
59
 
71
60
  return (
72
61
  <GestureDetector gesture={Gesture.Exclusive(panGesture, tapGesture)}>
73
- <Animated.View style={[animatedStyle, { position: "absolute" }]}>
62
+ <View
63
+ style={[
64
+ styles.container,
65
+ {
66
+ transform: [
67
+ { translateX: position.x },
68
+ { translateY: position.y },
69
+ { rotate: `${rotation}deg` },
70
+ { scale },
71
+ ],
72
+ opacity,
73
+ zIndex: isSelected ? 100 : 50,
74
+ },
75
+ ]}
76
+ >
74
77
  <View
75
78
  style={{
76
79
  padding: tokens.spacing.xs,
@@ -85,7 +88,13 @@ export const DraggableSticker: React.FC<DraggableStickerProps> = ({
85
88
  <AtomicText style={{ fontSize: 48 }}>{uri}</AtomicText>
86
89
  ) : null}
87
90
  </View>
88
- </Animated.View>
91
+ </View>
89
92
  </GestureDetector>
90
93
  );
91
94
  };
95
+
96
+ const styles = StyleSheet.create({
97
+ container: {
98
+ position: "absolute",
99
+ },
100
+ });
package/src/components/DraggableText.tsx CHANGED
@@ -1,11 +1,6 @@
1
- import React from "react";
2
- import { View } from "react-native";
1
+ import React, { useState, useRef, useCallback } from "react";
2
+ import { View, StyleSheet } from "react-native";
3
3
  import { Gesture, GestureDetector } from "react-native-gesture-handler";
4
- import Animated, {
5
- useAnimatedStyle,
6
- useSharedValue,
7
- runOnJS,
8
- } from "react-native-reanimated";
9
4
  import {
10
5
  AtomicText,
11
6
  useAppDesignTokens,
@@ -47,40 +42,48 @@ export const DraggableText: React.FC<DraggableTextProps> = ({
47
42
  backgroundColor = "transparent",
48
43
  }) => {
49
44
  const tokens = useAppDesignTokens();
50
- const translateX = useSharedValue(initialX);
51
- const translateY = useSharedValue(initialY);
52
- const offset = useSharedValue({ x: initialX, y: initialY });
45
+ const [position, setPosition] = useState({ x: initialX, y: initialY });
46
+ const offsetRef = useRef({ x: initialX, y: initialY });
47
+
48
+ const handleDragEnd = useCallback(() => {
49
+ onDragEnd(position.x, position.y);
50
+ }, [position.x, position.y, onDragEnd]);
53
51
 
54
52
  const panGesture = Gesture.Pan()
55
53
  .onStart(() => {
56
- offset.value = { x: translateX.value, y: translateY.value };
54
+ offsetRef.current = { x: position.x, y: position.y };
57
55
  })
58
56
  .onUpdate((event) => {
59
- translateX.value = offset.value.x + event.translationX;
60
- translateY.value = offset.value.y + event.translationY;
57
+ setPosition({
58
+ x: offsetRef.current.x + event.translationX,
59
+ y: offsetRef.current.y + event.translationY,
60
+ });
61
61
  })
62
62
  .onEnd(() => {
63
- runOnJS(onDragEnd)(translateX.value, translateY.value);
63
+ handleDragEnd();
64
64
  });
65
65
 
66
66
  const tapGesture = Gesture.Tap().onEnd(() => {
67
- runOnJS(onPress)();
67
+ onPress();
68
68
  });
69
69
 
70
- const animatedStyle = useAnimatedStyle(() => ({
71
- transform: [
72
- { translateX: translateX.value },
73
- { translateY: translateY.value },
74
- { rotate: `${rotation}deg` },
75
- { scale },
76
- ],
77
- opacity,
78
- zIndex: isSelected ? 100 : 10,
79
- }));
80
-
81
70
  return (
82
71
  <GestureDetector gesture={Gesture.Exclusive(panGesture, tapGesture)}>
83
- <Animated.View style={[animatedStyle, { position: "absolute" }]}>
72
+ <View
73
+ style={[
74
+ styles.container,
75
+ {
76
+ transform: [
77
+ { translateX: position.x },
78
+ { translateY: position.y },
79
+ { rotate: `${rotation}deg` },
80
+ { scale },
81
+ ],
82
+ opacity,
83
+ zIndex: isSelected ? 100 : 10,
84
+ },
85
+ ]}
86
+ >
84
87
  <View
85
88
  style={{
86
89
  padding: tokens.spacing.xs,
@@ -103,7 +106,13 @@ export const DraggableText: React.FC<DraggableTextProps> = ({
103
106
  {text || "TAP TO EDIT"}
104
107
  </AtomicText>
105
108
  </View>
106
- </Animated.View>
109
+ </View>
107
110
  </GestureDetector>
108
111
  );
109
112
  };
113
+
114
+ const styles = StyleSheet.create({
115
+ container: {
116
+ position: "absolute",
117
+ },
118
+ });