@umituz/react-native-video-editor 1.1.66 → 1.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.66",
+  "version": "1.1.68",
   "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",
@@ -42,8 +42,18 @@
     "expo-image": ">=1.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
     "zustand": ">=4.0.0"
   },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.2.8",
     "@types/react": "~19.1.10",
@@ -64,6 +74,7 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^3.16.0",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/presentation/components/generic/Selector.tsx

@@ -28,22 +28,27 @@ export interface SelectorProps<T = string> {
   testID?: string;
 }
 
-const SelectorItem = React.memo<{ item: SelectorItem; isSelected: boolean; onSelect: () => void; styles: any; icon: boolean; colorPreview: boolean }>(
-  ({ item, isSelected, onSelect, styles, icon, colorPreview }) => (
-    <TouchableOpacity
-      style={[styles.item, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled]}
-      onPress={onSelect}
-      disabled={item.disabled}
-      accessibilityRole="button"
-      accessibilityState={{ selected: isSelected }}
-      accessibilityLabel={item.label}
-    >
-      {colorPreview && item.color && <View style={[styles.colorPreview, { backgroundColor: item.color }]} />}
-      {icon && item.icon && <AtomicIcon name={item.icon} size="sm" color="textPrimary" />}
-      <AtomicText type="labelSmall" style={styles.label} color={isSelected ? "primary" : "textPrimary"}>{item.label}</AtomicText>
-    </TouchableOpacity>
-  )
-);
+const SelectorItem = React.memo(<T,>({ item, isSelected, onSelect, styles, icon, colorPreview }: {
+  item: SelectorItem<T>;
+  isSelected: boolean;
+  onSelect: () => void;
+  styles: any;
+  icon: boolean;
+  colorPreview: boolean;
+}) => (
+  <TouchableOpacity
+    style={[styles.item, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled]}
+    onPress={onSelect}
+    disabled={item.disabled}
+    accessibilityRole="button"
+    accessibilityState={{ selected: isSelected }}
+    accessibilityLabel={item.label}
+  >
+    {colorPreview && item.color && <View style={[styles.colorPreview, { backgroundColor: item.color }]} />}
+    {icon && item.icon && <AtomicIcon name={item.icon} size="sm" color="textPrimary" />}
+    <AtomicText type="labelSmall" style={styles.label} color={isSelected ? "primary" : "textPrimary"}>{item.label}</AtomicText>
+  </TouchableOpacity>
+));
 
 SelectorItem.displayName = "SelectorItem";
 

package/src/presentation/components/subtitle/SubtitleModal.tsx

@@ -55,7 +55,6 @@ export const SubtitleModal: React.FC<SubtitleModalProps> = ({
       paddingHorizontal: tokens.spacing.md,
       paddingTop: tokens.spacing.md,
       paddingBottom: tokens.spacing.xl,
-      maxHeight: "90%" as const,
     },
     handle: {
       width: 36,

package/src/presentation/hooks/generic/use-layer-form.hook.ts

@@ -17,7 +17,7 @@ export type ValidatorFn<T, K extends keyof T = keyof T> = (value: T[K]) => strin
  */
 export interface UseLayerFormConfig<T extends Record<string, unknown>> {
   initialValues: Partial<T>;
-  validators?: Record<string, (value: unknown) => string | null>;
+  validators?: Partial<Record<keyof T, (value: unknown) => string | null>>;
   buildData: (formState: T) => Partial<Layer> | Partial<ImageLayer> | Partial<TextLayer>;
 }
 
@@ -72,10 +72,10 @@ export function useLayerForm<T extends Record<string, unknown>, R = Partial<Laye
 
   const validateField = useCallback(
     <K extends keyof T>(field: K): string | null => {
-      const validator = validators[String(field)];
+      const validator = validators[field as keyof typeof validators];
       if (!validator) return null;
 
-      const error = validator(formState[field]);
+      const error = (validator as (value: unknown) => string | null)(formState[field]);
       setErrors((prev) => ({
         ...prev,
         [field]: error,
@@ -91,9 +91,9 @@ export function useLayerForm<T extends Record<string, unknown>, R = Partial<Laye
     const newErrors: Partial<Record<keyof T, string | null>> = {};
 
     for (const field in validators) {
-      const validator = validators[field];
+      const validator = validators[field as keyof typeof validators];
       if (validator) {
-        const error = validator(formState[field as keyof T]);
+        const error = (validator as (value: unknown) => string | null)(formState[field as keyof T]);
         if (error) {
           newErrors[field as keyof T] = error;
           hasError = true;

package/src/presentation/hooks/useImageLayerForm.ts

@@ -36,6 +36,9 @@ export function useImageLayerForm(
         if (!value || (typeof value === "string" && value.trim().length === 0)) {
           return "Image URI is required";
         }
+        if (typeof value !== "string") {
+          return "Image URI must be a string";
+        }
         return null;
       },
     },

package/src/presentation/hooks/useTextLayerForm.ts

@@ -52,6 +52,9 @@ export function useTextLayerForm(
         if (!value || (typeof value === "string" && value.trim().length === 0)) {
           return "Text content is required";
         }
+        if (typeof value !== "string") {
+          return "Text content must be a string";
+        }
         return null;
       },
     },