@sdcx/image-crop 0.2.0 → 1.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 http://www.sdcx.tech
+Copyright (c) 2025 listenzz@163.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,40 +2,53 @@
 
 `ImageCropView` 是一个 React Native 原生 UI 组件，用于头像裁剪以及图片裁剪，同时支持图像主体识别后设置需要裁剪的主体区域。
 
+## 版本兼容
+
+| 版本 | RN 版本 | RN 架构 |
+| ---- | ------- | ------- |
+| 0.x  | < 0.82  | 旧架构  |
+| 1.x  | >= 0.82 | 新架构  |
+
 ## Installation
 
 ```bash
 yarn add @sdcx/image-crop
 # &
-pod install
+cd ios && bundle exec pod install
 ```
 
 ## Usage
 
+```tsx
+<ImageCropView
+  ref={imageCropViewRef}
+  style={'your style'}
+  fileUri={'your file uri'}
+  cropStyle={'circular' | 'default'}
+  onCrop={(uri: string) => {}}
+  objectRect={objectRect}
+/>
 ```
- <ImageCropView
-    ref={imageCropViewRef}
-    style={'your style'}
-    fileUri={'your file uri'}
-    cropStyle={'circular' | 'default'}
-    onCropped={(uri: string) => {}}
-    objectRect={objectRect}
-  />
-```
+
 #### cropStyle
-默认default为裁剪矩形，若需要裁剪圆形头像，则设为circular；
+
+默认 default 为裁剪矩形，若需要裁剪圆形头像，则设为 circular；
 
 #### objectRect
-objectRect可设置默认的图片裁剪区域，且当cropStyle为default时有效。
 
-objectRect的四个属性分别是（单位都是像素px）：
+objectRect 可设置默认的图片裁剪区域，且当 cropStyle 为 default 时有效。
+
+objectRect 的四个属性分别是（单位都是像素 px）：
+
 1. left: 裁剪区域离图片左边的距离；
 2. top: 裁剪区域离图片上边的距离；
 3. width: 裁剪区域的宽度；
 4. height: 裁剪区域的高度；
 
 #### 裁剪
+
 ```
 imageCropViewRef.crop()
 ```
-然后裁剪成功后会在onCropped属性中回调裁剪后图片的uri；
+
+然后裁剪成功后会在 onCropped 属性中回调裁剪后图片的 uri；

package/RNImageCrop.podspec

@@ -6,14 +6,14 @@ Pod::Spec.new do |s|
   s.name         = "RNImageCrop"
   s.version      = package["version"]
   s.summary      = package["description"]
- 
+
   s.homepage     = package["homepage"]
   s.license      = package["license"]
   s.authors      = package["author"]
-  s.platforms    = { :ios => "10.0" }
+  s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/github-account/image-crop.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/ImageCrop/**/*.{h,m,mm}"
-  s.dependency "React-Core"
   s.dependency "TOCropViewController"
+  install_modules_dependencies(s)
 end

package/android/build.gradle

@@ -1,36 +1,58 @@
-// android/build.gradle
+buildscript {
+	repositories {
+		mavenCentral()
+		google()
+	}
 
-def safeExtGet(prop, fallback) {
-    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+	dependencies {
+		classpath "com.android.tools.build:gradle:8.7.2"
+	}
 }
 
 apply plugin: 'com.android.library'
+apply plugin: 'com.facebook.react'
+
+def safeExtGet(prop, fallback) {
+	rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
 
 android {
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
-
-    compileSdkVersion safeExtGet('compileSdkVersion', 30)
-    buildToolsVersion safeExtGet('buildToolsVersion', '30.0.2')
-
-    defaultConfig {
-        minSdkVersion safeExtGet('minSdkVersion', 21)
-        targetSdkVersion safeExtGet('targetSdkVersion', 30)
-        versionCode 1
-        versionName "1.0.0"
-    }
-
-    buildTypes {
-        release {
-            consumerProguardFiles 'proguard-rules.pro'
-        }
-    }
+
+	def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+	// Check AGP version for backward compatibility w/react-native versions still on gradle plugin 6
+	def major = agpVersion[0].toInteger()
+	def minor = agpVersion[1].toInteger()
+	if ((major == 7 && minor >= 3) || major >= 8) {
+		namespace "com.reactnative.imagecrop"
+		buildFeatures {
+			buildConfig true
+		}
+	}
+
+	compileSdkVersion safeExtGet('compileSdkVersion', 35)
+	buildToolsVersion safeExtGet('buildToolsVersion', '35.0.0')
+
+	defaultConfig {
+		minSdkVersion safeExtGet('minSdkVersion', 24)
+		targetSdkVersion safeExtGet('targetSdkVersion', 35)
+	}
+
+	sourceSets {
+		main {
+			java.srcDirs += [
+				"generated/java",
+				"generated/jni"
+			]
+		}
+	}
+}
+
+repositories {
+	google()
+	mavenCentral()
 }
 
 dependencies {
-    implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'com.facebook.react:react-native:+'
-    implementation 'com.github.yalantis:ucrop:2.2.6'
+	implementation 'com.github.yalantis:ucrop:2.2.6'
+	api 'com.facebook.react:react-native:+'
 }

package/android/src/main/java/com/reactnative/imagecrop/ImageCropPackage.java

@@ -21,6 +21,6 @@ public class ImageCropPackage implements ReactPackage {
     @NonNull
     @Override
     public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
-        return Arrays.asList(new RNImageCropViewManager());
+        return Arrays.asList(new ImageCropViewManager());
     }
 }

package/android/src/main/java/com/reactnative/imagecrop/{RNImageCropView.java → ImageCropView.java}

@@ -13,11 +13,10 @@ import android.widget.FrameLayout;
 import androidx.annotation.NonNull;
 
 import com.facebook.common.logging.FLog;
-import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
+import com.facebook.react.uimanager.UIManagerHelper;
+import com.facebook.react.uimanager.events.EventDispatcher;
 import com.yalantis.ucrop.callback.BitmapCropCallback;
 import com.yalantis.ucrop.callback.OverlayViewChangeListener;
 import com.yalantis.ucrop.view.GestureCropImageView;
@@ -29,7 +28,7 @@ import java.lang.reflect.Field;
 import java.lang.reflect.Method;
 import java.util.UUID;
 
-public class RNImageCropView extends FrameLayout {
+public class ImageCropView extends FrameLayout {
     private static final int DEFAULT_COMPRESS_QUALITY = 90;
     private static final Bitmap.CompressFormat DEFAULT_COMPRESS_FORMAT = Bitmap.CompressFormat.PNG;
 
@@ -148,7 +147,7 @@ public class RNImageCropView extends FrameLayout {
     private GestureCropImageView mGestureCropImageView;
     private OverlayView mOverlayView;
 
-    public RNImageCropView(Context context) {
+    public ImageCropView(Context context) {
         super(context);
         init(context);
     }
@@ -179,13 +178,14 @@ public class RNImageCropView extends FrameLayout {
     }
 
     private void onCropped(String uri) {
-        WritableMap data = Arguments.createMap();
-        data.putString("uri", uri);
-        ReactContext reactContext = (ReactContext) getContext();
-        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
-                getId(),
-                "onCropped",
-                data);
+		FLog.i(TAG, "onCropped:" +uri);
+		int surfaceId = UIManagerHelper.getSurfaceId(getContext());
+		int viewId = getId();
+		EventDispatcher eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag((ReactContext) getContext(), viewId);
+		if (eventDispatcher != null) {
+			OnCropEvent event = new OnCropEvent(surfaceId, viewId, uri);
+			eventDispatcher.dispatchEvent(event);
+		}
     }
 
     private int getBitmapDegree(File file) {

package/android/src/main/java/com/reactnative/imagecrop/ImageCropViewManager.java

@@ -0,0 +1,76 @@
+package com.reactnative.imagecrop;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ViewManagerDelegate;
+import com.facebook.react.viewmanagers.ImageCropViewManagerDelegate;
+import com.facebook.react.viewmanagers.ImageCropViewManagerInterface;
+
+import java.util.Map;
+
+public class ImageCropViewManager extends ViewGroupManager<ImageCropView>
+	implements ImageCropViewManagerInterface<ImageCropView> {
+	private final ImageCropViewManagerDelegate<ImageCropView, ImageCropViewManager> mDelegagte = new ImageCropViewManagerDelegate<>(this);
+	private static final String REACT_CLASS = "ImageCropView";
+
+	@Override
+	protected ViewManagerDelegate<ImageCropView> getDelegate() {
+		return mDelegagte;
+	}
+
+	@NonNull
+	@Override
+	public String getName() {
+		return REACT_CLASS;
+	}
+
+	@NonNull
+	@Override
+	protected ImageCropView createViewInstance(@NonNull ThemedReactContext reactContext) {
+		return new ImageCropView(reactContext);
+	}
+
+	@Override
+	public void setFileUri(ImageCropView view, @Nullable String uri) {
+		view.setFileUri(uri);
+	}
+
+	@Override
+	public void setCropStyle(ImageCropView view, @Nullable String style) {
+		view.setCropStyle(style);
+	}
+
+	@Override
+	public void setObjectRect(ImageCropView view, @Nullable ReadableMap value) {
+		view.setObjectRect(value);
+	}
+
+	@Override
+	public void crop(ImageCropView view) {
+		view.crop();
+	}
+
+	@Override
+	protected void onAfterUpdateTransaction(@NonNull ImageCropView view) {
+		super.onAfterUpdateTransaction(view);
+		view.initProperties();
+	}
+
+	@Nullable
+	@Override
+	public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+		return MapBuilder.of(
+			OnCropEvent.Name, MapBuilder.of("registrationName", OnCropEvent.JSEventName)
+		);
+	}
+
+	@Override
+	protected void addEventEmitters(@NonNull ThemedReactContext reactContext, @NonNull ImageCropView view) {
+		super.addEventEmitters(reactContext, view);
+	}
+}

package/android/src/main/java/com/reactnative/imagecrop/OnCropEvent.java

@@ -0,0 +1,34 @@
+package com.reactnative.imagecrop;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+
+public class OnCropEvent extends Event<OnCropEvent> {
+	public static final String Name = "topCrop";
+	public static final String JSEventName = "onCrop";
+
+	private final String uri;
+
+	public OnCropEvent(int surfaceId, int viewTag, String uri) {
+		super(surfaceId, viewTag);
+		this.uri = uri;
+	}
+
+	@NonNull
+	@Override
+	public String getEventName() {
+		return Name;
+	}
+
+	@Nullable
+	@Override
+	protected WritableMap getEventData() {
+		WritableMap event = Arguments.createMap();
+		event.putString("uri", uri);
+		return event;
+	}
+}

package/dist/ImageCropNativeComponent.d.ts

@@ -0,0 +1,22 @@
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+export interface ObjectRect {
+    top: CodegenTypes.Float;
+    left: CodegenTypes.Float;
+    width: CodegenTypes.Float;
+    height: CodegenTypes.Float;
+}
+export type OnCropEventPayload = {
+    uri: string;
+};
+export interface NativeProps extends ViewProps {
+    fileUri?: string;
+    cropStyle?: CodegenTypes.WithDefault<'circular' | 'default', 'default'>;
+    objectRect?: ObjectRect;
+    onCrop?: CodegenTypes.DirectEventHandler<OnCropEventPayload>;
+}
+export interface NativeCommands {
+    crop: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+}
+export declare const Commands: NativeCommands;
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/dist/ImageCropNativeComponent.js

@@ -0,0 +1,5 @@
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
+export const Commands = codegenNativeCommands({
+    supportedCommands: ['crop'],
+});
+export default codegenNativeComponent('ImageCropView');

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ObjectRect, OnCropEventPayload, NativeProps } from './ImageCropNativeComponent';
+import type { NativeSyntheticEvent } from 'react-native';
+export type OnCropEvent = NativeSyntheticEvent<OnCropEventPayload>;
+export type { ObjectRect };
+export interface ImageCropViewInstance {
+    crop: () => void;
+}
+export type ImageCropViewProps = NativeProps;
+declare const ImageCropView: React.ForwardRefExoticComponent<NativeProps & React.RefAttributes<ImageCropViewInstance>>;
+export default ImageCropView;

package/dist/index.js

@@ -0,0 +1,14 @@
+import React, { useImperativeHandle, useRef } from 'react';
+import ImageCropNativeComponent, { Commands } from './ImageCropNativeComponent';
+const ImageCropView = React.forwardRef((props, ref) => {
+    const viewRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        crop: () => {
+            if (viewRef.current) {
+                Commands.crop(viewRef.current);
+            }
+        },
+    }));
+    return <ImageCropNativeComponent {...props} ref={viewRef}/>;
+});
+export default ImageCropView;

package/ios/ImageCrop/RNImageCropView.h

@@ -0,0 +1,10 @@
+#import <UIKit/UIKit.h>
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNImageCropView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/ImageCrop/RNImageCropView.mm

@@ -0,0 +1,186 @@
+#import "RNImageCropView.h"
+#import "UIImage+CropRotate.h"
+#import "TOCropView.h"
+
+#import <react/renderer/components/imagecrop/ComponentDescriptors.h>
+#import <react/renderer/components/imagecrop/EventEmitters.h>
+#import <react/renderer/components/imagecrop/Props.h>
+#import <react/renderer/components/imagecrop/RCTComponentViewHelpers.h>
+
+#import <React/RCTConversions.h>
+#import <React/RCTLog.h>
+
+using namespace facebook::react;
+
+@interface RNImageCropView() <RCTImageCropViewViewProtocol>
+
+/**
+ RN传递进来的属性值：需要裁剪图片路径
+ */
+@property(nonatomic, copy, nonnull) NSString *fileUri;
+
+@property(nonatomic, assign) ImageCropViewCropStyle cropStyle;
+
+@property(nonatomic, assign) ImageCropViewObjectRectStruct objectRect;
+
+/**
+ The original, uncropped image that was passed to this controller.
+ */
+@property (nonatomic, nonnull) UIImage *image;
+
+/**
+ The cropping style of this particular crop view controller
+ */
+@property (nonatomic, assign) TOCropViewCroppingStyle croppingStyle;
+
+/**
+ The crop view managed by this view controller.
+ */
+@property (nonatomic, strong, nonnull) TOCropView *cropView;
+
+@property (nonatomic, assign) BOOL initialSetupPerformed;
+
+@end
+
+@implementation RNImageCropView
+
+// Needed because of this: https://github.com/facebook/react-native/pull/37274
++ (void)load {
+	[super load];
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+	return concreteComponentDescriptorProvider<ImageCropViewComponentDescriptor>();
+}
+
++ (BOOL)shouldBeRecycled {
+	return NO;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if ((self = [super initWithFrame:frame])) {
+		static const auto defaultProps = std::make_shared<const ImageCropViewProps>();
+		_props = defaultProps;
+		_cropStyle = ImageCropViewCropStyle::Default;
+    }
+    return self;
+}
+
+- (void)updateProps:(const facebook::react::Props::Shared &)props oldProps:(const facebook::react::Props::Shared &)oldProps {
+	const auto &oldViewProps = static_cast<const ImageCropViewProps &>(*_props);
+	const auto &newViewProps = static_cast<const ImageCropViewProps &>(*props);
+
+	// `fileUri`
+	if (newViewProps.fileUri != oldViewProps.fileUri) {
+		self.fileUri = RCTNSStringFromStringNilIfEmpty(newViewProps.fileUri);
+	}
+
+	// `cropStyle`
+	if (newViewProps.cropStyle != oldViewProps.cropStyle) {
+		self.cropStyle = newViewProps.cropStyle;
+	}
+
+	// `objectRect`
+	if (newViewProps.objectRect.width != oldViewProps.objectRect.width || newViewProps.objectRect.height != oldViewProps.objectRect.height || newViewProps.objectRect.top != oldViewProps.objectRect.top || newViewProps.objectRect.left != oldViewProps.objectRect.left) {
+		self.objectRect = newViewProps.objectRect;
+	}
+
+	[self addCropView:self.croppingStyle image:self.image];
+
+	[super updateProps:props oldProps:oldProps];
+}
+
+- (void)setFileUri:(NSString *)fileUri {
+	_fileUri = fileUri;
+	_image = [UIImage imageWithContentsOfFile: [[NSURL alloc] initWithString:fileUri].path];
+}
+
+- (const ImageCropViewEventEmitter &)eventEmitter {
+	return static_cast<const ImageCropViewEventEmitter &>(*_eventEmitter);
+}
+
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args {
+	RCTImageCropViewHandleCommand(self, commandName, args);
+}
+
+- (void)crop {
+	CGRect cropFrame = self.cropView.imageCropFrame;
+	NSInteger angle = self.cropView.angle;
+
+	UIImage *image = nil;
+	if (angle == 0 && CGRectEqualToRect(cropFrame, (CGRect){CGPointZero, self.image.size})) {
+		image = self.image;
+	} else {
+		image = [self.image croppedImageWithFrame:cropFrame angle:angle circularClip:NO];
+	}
+
+	[self saveImage:image];
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    if (self.cropView && [self.subviews containsObject:self.cropView]) {
+        if (self.initialSetupPerformed) {
+            return;
+        }
+        self.initialSetupPerformed = YES;
+
+        //设置图片主体检测参数
+		if (self.cropStyle != ImageCropViewCropStyle::Circular
+			&& self.objectRect.width > 0 && self.objectRect.height > 0) {
+			int top = static_cast<int>(self.objectRect.top);
+			int left = static_cast<int>(self.objectRect.left);
+			int width = static_cast<int>(self.objectRect.width);
+			int height = static_cast<int>(self.objectRect.height);
+            [self.cropView setImageCropFrame:CGRectMake(left, top, width, height)];
+        }
+
+        //存在极小的概率，初始化时只在左上角展示一小块图片区域，目前没有找到较好的方案，尝试延迟一点时间初始化CropView可以解决问题
+        // [self.cropView performInitialSetup];
+        [self.cropView performSelector:@selector(performInitialSetup) withObject:nil afterDelay:0.05];
+    }
+}
+
+- (void)addCropView:(TOCropViewCroppingStyle)style image:(UIImage *)image {
+    if (!_cropView) {
+        _cropView = [[TOCropView alloc] initWithCroppingStyle:style image:image];
+        _cropView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+        [_cropView setBackgroundColor:[UIColor blackColor]];
+    }
+
+    if (![self.subviews containsObject:self.cropView]) {
+        [self addSubview:_cropView];
+    }
+}
+
+- (void)saveImage:(UIImage*)image {
+    NSString *fileName = [NSString stringWithFormat:@"%@.png", [self produceUUID]];
+    NSString *filePath = [NSTemporaryDirectory() stringByAppendingPathComponent:fileName];
+    BOOL result =[UIImagePNGRepresentation(image)writeToFile:filePath atomically:YES];
+
+    if(result ==YES) {
+        NSLog(@"保存成功: %@", filePath);
+		NSString *uri = [[NSURL alloc] initFileURLWithPath:filePath].absoluteString;
+		[self eventEmitter].onCrop(ImageCropViewEventEmitter::OnCrop{
+			.uri = RCTStringFromNSString(uri)
+		});
+    }
+}
+
+- (TOCropViewCroppingStyle)croppingStyle {
+	if (self.cropStyle == ImageCropViewCropStyle::Circular) {
+        return TOCropViewCroppingStyleCircular;
+    }
+    return TOCropViewCroppingStyleDefault;
+}
+
+- (NSString *)produceUUID {
+    CFUUIDRef uuid_ref = CFUUIDCreate(NULL);
+    CFStringRef uuid_string_ref= CFUUIDCreateString(NULL, uuid_ref);
+    NSString *uuid = [NSString stringWithString:(__bridge NSString *)uuid_string_ref];
+    CFRelease(uuid_ref);
+    CFRelease(uuid_string_ref);
+    return [uuid uppercaseString];
+}
+
+@end

package/package.json

@@ -1,66 +1,52 @@
 {
-  "name": "@sdcx/image-crop",
-  "description": "A React Native ui component for image crop.",
-  "version": "0.2.0",
-  "main": "./lib/index.js",
-  "typings": "./lib/index.d.ts",
-  "react-native": "src/index",
-  "nativePackage": true,
-  "files": [
-    "src",
-    "lib",
-    "android",
-    "ios",
-    "RNImageCrop.podspec",
-    "!android/build",
-    "!ios/build",
-    "!**/__tests__"
-  ],
-  "repository": "https://github.com/sdcxtech/react-native-troika",
-  "homepage": "https://github.com/sdcxtech/react-native-troika/tree/master/packages/image-crop#readme",
-  "author": "sdcx",
-  "license": "MIT",
-  "keywords": [
-    "react-native",
-    "image-crop"
-  ],
-  "scripts": {
-    "build": "rm -rf ./lib && tsc -p tsconfig.build.json",
-    "prepare": "npm run build",
-    "tsc": "tsc",
-    "test": "jest",
-    "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
-  },
-  "peerDependencies": {
-    "react": ">=16.8",
-    "react-native": ">=0.60"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/runtime": "^7.13.10",
-    "@react-native-community/eslint-config": "^3.0.0",
-    "@types/jest": "^27.0.1",
-    "@types/react": "^17.0.2",
-    "@types/react-native": "^0.67.0",
-    "@types/react-test-renderer": "17.0.2",
-    "babel-jest": "^27.0.6",
-    "jest": "^27.0.6",
-    "metro-react-native-babel-preset": "^0.66.2",
-    "react": "17.0.2",
-    "react-native": "^0.67.4",
-    "react-test-renderer": "17.0.2",
-    "eslint": "^7.32.0",
-    "typescript": "^4.6.4"
-  },
-  "jest": {
-    "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
-  }
+	"name": "@sdcx/image-crop",
+	"description": "A React Native ui component for image crop.",
+	"version": "1.0.0",
+	"main": "./dist/index.js",
+	"typings": "./dist/index.d.ts",
+	"react-native": "src/index",
+	"nativePackage": true,
+	"files": [
+		"src",
+		"dist",
+		"android",
+		"ios",
+		"RNImageCrop.podspec",
+		"!android/build",
+		"!ios/build",
+		"!**/__tests__"
+	],
+	"repository": "https://github.com/sdcxtech/react-native-troika",
+	"homepage": "https://github.com/sdcxtech/react-native-troika/tree/master/packages/image-crop#readme",
+	"author": "sdcx",
+	"license": "MIT",
+	"keywords": [
+		"react-native",
+		"image-crop"
+	],
+	"scripts": {
+		"build": "rm -rf ./dist && tsc -p tsconfig.json",
+		"prepare": "npm run build",
+		"tsc": "tsc",
+		"test": "jest",
+		"lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
+	},
+	"codegenConfig": {
+		"name": "imagecrop",
+		"type": "components",
+		"jsSrcsDir": "src",
+		"android": {
+			"javaPackageName": "com.reactnative.imagecrop"
+		},
+		"ios": {
+			"componentProvider": {
+				"ImageCropView": "RNImageCropView"
+			}
+		}
+	},
+	"peerDependencies": {
+		"react": ">=16.8",
+		"react-native": ">=0.60"
+	},
+	"devDependencies": {}
 }

package/src/ImageCropNativeComponent.ts

@@ -0,0 +1,34 @@
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
+
+export interface ObjectRect {
+	top: CodegenTypes.Float;
+	left: CodegenTypes.Float;
+	width: CodegenTypes.Float;
+	height: CodegenTypes.Float;
+}
+
+export type OnCropEventPayload = {
+	uri: string;
+};
+
+export interface NativeProps extends ViewProps {
+	fileUri?: string;
+	cropStyle?: CodegenTypes.WithDefault<'circular' | 'default', 'default'>;
+	objectRect?: ObjectRect;
+	onCrop?: CodegenTypes.DirectEventHandler<OnCropEventPayload>;
+}
+
+export interface NativeCommands {
+	// In TypeScript, the React.ElementRef is deprecated.
+	// The correct type to use is actually React.ComponentRef.
+	// However, due to a bug in Codegen, using ComponentRef will crash the app.
+	// We have the fix already, but we need to release a new version of React Native to apply it.
+	crop: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+	supportedCommands: ['crop'],
+});
+
+export default codegenNativeComponent<NativeProps>('ImageCropView') as HostComponent<NativeProps>;

package/src/index.tsx

@@ -0,0 +1,27 @@
+import React, { useImperativeHandle, useRef } from 'react';
+import ImageCropNativeComponent, { Commands } from './ImageCropNativeComponent';
+import type { ObjectRect, OnCropEventPayload, NativeProps } from './ImageCropNativeComponent';
+import type { NativeSyntheticEvent } from 'react-native';
+
+export type OnCropEvent = NativeSyntheticEvent<OnCropEventPayload>;
+export type { ObjectRect };
+
+export interface ImageCropViewInstance {
+	crop: () => void;
+}
+
+export type ImageCropViewProps = NativeProps;
+
+const ImageCropView = React.forwardRef<ImageCropViewInstance, ImageCropViewProps>((props, ref) => {
+	const viewRef = useRef<React.ComponentRef<typeof ImageCropNativeComponent>>(null);
+	useImperativeHandle(ref, () => ({
+		crop: () => {
+			if (viewRef.current) {
+				Commands.crop(viewRef.current);
+			}
+		},
+	}));
+	return <ImageCropNativeComponent {...props} ref={viewRef} />;
+});
+
+export default ImageCropView;

package/android/src/main/java/com/reactnative/imagecrop/RNImageCropViewManager.java

@@ -1,77 +0,0 @@
-package com.reactnative.imagecrop;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.annotations.ReactProp;
-
-import java.util.Map;
-
-public class RNImageCropViewManager extends ViewGroupManager<RNImageCropView> {
-    private static final String REACT_CLASS = "RNImageCrop";
-
-    private static final int COMMAND_CROP = 1;
-
-    @NonNull
-    @Override
-    public String getName() {
-        return REACT_CLASS;
-    }
-
-    @NonNull
-    @Override
-    protected RNImageCropView createViewInstance(@NonNull ThemedReactContext reactContext) {
-        return new RNImageCropView(reactContext);
-    }
-
-    @ReactProp(name = "fileUri")
-    public void setFileUri(RNImageCropView RNImageCropView, String fileUri) {
-        RNImageCropView.setFileUri(fileUri);
-    }
-
-    @ReactProp(name = "cropStyle")
-    public void setCropStyle(RNImageCropView RNImageCropView, String cropStyle) {
-        RNImageCropView.setCropStyle(cropStyle);
-    }
-
-    @ReactProp(name = "objectRect")
-    public void setObjectRect(RNImageCropView RNImageCropView, ReadableMap objectRect) {
-        RNImageCropView.setObjectRect(objectRect);
-    }
-
-    @Override
-    protected void onAfterUpdateTransaction(@NonNull RNImageCropView RNImageCropView) {
-        super.onAfterUpdateTransaction(RNImageCropView);
-        RNImageCropView.initProperties();
-    }
-
-    @Nullable
-    @Override
-    public Map<String, Integer> getCommandsMap() {
-        return MapBuilder.of("crop", COMMAND_CROP);
-    }
-
-    @Override
-    public void receiveCommand(@NonNull RNImageCropView root, String commandId, @Nullable ReadableArray args) {
-        super.receiveCommand(root, commandId, args);
-        int commandIdInt = Integer.parseInt(commandId);
-        switch (commandIdInt) {
-            case COMMAND_CROP:
-                root.crop();
-                break;
-        }
-    }
-
-    public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
-        String name = "phasedRegistrationNames";
-        String bubbled = "bubbled";
-        return MapBuilder.<String, Object>builder()
-                .put("onCropped", MapBuilder.of(name, MapBuilder.of(bubbled, "onCropped")))
-                .build();
-    }
-}

package/ios/ImageCrop/RNImageCrop.h

@@ -1,30 +0,0 @@
-#import <UIKit/UIKit.h>
-#import <React/UIView+React.h>
-
-#import "TOCropView.h"
-
-@interface RNImageCrop : UIView
-
-/**
- RN传递进来的属性值：需要裁剪图片路径
- */
-@property(nonatomic, copy, nonnull) NSString *fileUri;
-
-/**
- RN传递进来的属性值：裁剪样式，default  | circular
- */
-@property(nonatomic, copy, nullable) NSString *cropStyle;
-
-/**
- RN传递进来的属性值：图像主体Rect，如{"width":208,"left":43,"top":111,"height":354}
- */
-@property(nonatomic, copy, nullable) id objectRect;
-
-/**
- 选定图片区域后，确认裁剪操作
- */
-- (void)crop;
-
-@property(nonatomic, copy, nullable) RCTBubblingEventBlock onCropped;
-
-@end

package/ios/ImageCrop/RNImageCrop.m

@@ -1,129 +0,0 @@
-#import "RNImageCrop.h"
-#import "UIImage+CropRotate.h"
-
-@interface RNImageCrop()
-
-/**
- The original, uncropped image that was passed to this controller.
- */
-@property (nonatomic, nonnull) UIImage *image;
-
-/**
- The cropping style of this particular crop view controller
- */
-@property (nonatomic) TOCropViewCroppingStyle croppingStyle;
-
-/**
- The crop view managed by this view controller.
- */
-@property (nonatomic, strong, nonnull) TOCropView *cropView;
-
-@property (nonatomic, assign) BOOL initialSetupPerformed;
-
-@end
-
-@implementation RNImageCrop
-
-- (instancetype)initWithFrame:(CGRect)frame {
-    if ((self = [super initWithFrame:frame])) {
-    }
-    return self;
-}
-
-- (void)layoutSubviews {
-    [super layoutSubviews];
-    if (self.cropView && [self.subviews containsObject:self.cropView]) {
-        if (self.initialSetupPerformed) {
-            return;
-        }
-        self.initialSetupPerformed = YES;
-        
-        //设置图片主体检测参数
-        if (![_cropStyle isEqualToString:@"circular"]
-            && _objectRect != nil
-            && [_objectRect objectForKey:@"top"]
-            && [_objectRect objectForKey:@"left"]
-            && [_objectRect objectForKey:@"width"]
-            && [_objectRect objectForKey:@"height"]) {
-            int top = [[_objectRect valueForKey:@"top"] intValue];
-            int left = [[_objectRect valueForKey:@"left"] intValue];
-            int width = [[_objectRect valueForKey:@"width"] intValue];
-            int height = [[_objectRect valueForKey:@"height"] intValue];
-            [self.cropView setImageCropFrame:CGRectMake(left, top, width, height)];
-        }
-        
-        //存在极小的概率，初始化时只在左上角展示一小块图片区域，目前没有找到较好的方案，尝试延迟一点时间初始化CropView可以解决问题
-        // [self.cropView performInitialSetup];
-        [self.cropView performSelector:@selector(performInitialSetup) withObject:nil afterDelay:0.05];
-    }
-}
-
-- (void)setFileUri:(NSString *)fileUri {
-    _fileUri = fileUri;
-    _image = [UIImage imageWithContentsOfFile: [[NSURL alloc] initWithString:fileUri].path];
-}
-
-- (void)didSetProps:(NSArray<NSString *> *)changedProps {
-    [self addCropView:self.croppingStyle image:self.image];
-}
-
-- (void)addCropView:(TOCropViewCroppingStyle)style image:(UIImage *)image {
-    if (!_cropView) {
-        _cropView = [[TOCropView alloc] initWithCroppingStyle:style image:image];
-        _cropView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
-        [_cropView setBackgroundColor:[UIColor blackColor]];
-    }
-    
-    if (![self.subviews containsObject:self.cropView]) {
-        [self addSubview:_cropView];
-    }
-}
-
-- (void)crop {
-    CGRect cropFrame = self.cropView.imageCropFrame;
-    NSInteger angle = self.cropView.angle;
-    
-    UIImage *image = nil;
-    if (angle == 0 && CGRectEqualToRect(cropFrame, (CGRect){CGPointZero, self.image.size})) {
-        image = self.image;
-    } else {
-        image = [self.image croppedImageWithFrame:cropFrame angle:angle circularClip:NO];
-    }
-    
-    [self saveImage:image];
-}
-
-- (void)saveImage:(UIImage*)image {
-    NSString *fileName = [NSString stringWithFormat:@"%@.png", [self produceUUID]];
-    NSString *filePath = [NSTemporaryDirectory() stringByAppendingPathComponent:fileName];
-    BOOL result =[UIImagePNGRepresentation(image)writeToFile:filePath atomically:YES];
-
-    if(result ==YES) {
-        NSLog(@"保存成功: %@", filePath);
-        
-        if (self.onCropped) {
-            self.onCropped(@{
-                @"uri": [[NSURL alloc] initFileURLWithPath:filePath].absoluteString
-            });
-        }
-    }
-}
-
-- (TOCropViewCroppingStyle)croppingStyle {
-    if (_cropStyle && [_cropStyle isEqualToString:@"circular"]) {
-        return TOCropViewCroppingStyleCircular;
-    }
-    return TOCropViewCroppingStyleDefault;
-}
-
-
-- (NSString *)produceUUID {
-    CFUUIDRef uuid_ref = CFUUIDCreate(NULL);
-    CFStringRef uuid_string_ref= CFUUIDCreateString(NULL, uuid_ref);
-    NSString *uuid = [NSString stringWithString:(__bridge NSString *)uuid_string_ref];
-    CFRelease(uuid_ref);
-    CFRelease(uuid_string_ref);
-    return [uuid uppercaseString];
-}
-
-@end

package/ios/ImageCrop/RNImageCropManager.h

@@ -1,18 +0,0 @@
-//
-//  RNImageCropManager.h
-//  RNImageCrop
-//
-//  Created by vibe on 2023/4/28.
-//
-
-#import <React/RCTViewManager.h>
-#import <React/RCTBridgeModule.h>
-#import <React/RCTUIManager.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface RNImageCropManager : RCTViewManager
-
-@end
-
-NS_ASSUME_NONNULL_END

package/ios/ImageCrop/RNImageCropManager.m

@@ -1,37 +0,0 @@
-//
-//  RNCropManager.m
-//  RNCrop
-//
-//  Created by vibe on 2022/2/8.
-//
-
-#import "RNImageCropManager.h"
-#import "RNImageCrop.h"
-
-@implementation RNImageCropManager
-
-RCT_EXPORT_MODULE(RNImageCrop)
-RCT_EXPORT_VIEW_PROPERTY(fileUri, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cropStyle, NSString)
-RCT_EXPORT_VIEW_PROPERTY(objectRect, id)
-RCT_EXPORT_VIEW_PROPERTY(onCropped, RCTBubblingEventBlock)
-RCT_EXPORT_METHOD(crop:(nonnull NSNumber *)reactTag) {
-    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
-        RNImageCrop *rnCrop = viewRegistry[reactTag];
-        if (![rnCrop isKindOfClass:[RNImageCrop class]]) {
-            RCTLogError(@"Invalid view returned from registry, expecting RNCrop, got: %@", rnCrop);
-        } else {
-            dispatch_async(dispatch_get_main_queue(), ^{
-                RNImageCrop *rnCrop = (RNImageCrop *)viewRegistry[reactTag];
-                [rnCrop crop];
-            });
-        }
-    }];
-}
-
-- (UIView *)view
-{
-  return [RNImageCrop new];
-}
-
-@end

package/lib/ImageCropView.d.ts

@@ -1,15 +0,0 @@
-import { ViewProps, ViewStyle } from 'react-native';
-import React from 'react';
-import { ImageCropViewRef } from './ImageCropViewRef';
-import { ObjectRect } from './typings';
-interface SupperProps extends ViewProps {
-    fileUri: string;
-    objectRect?: ObjectRect;
-    cropStyle?: 'circular' | 'default';
-}
-interface CropViewProps extends SupperProps {
-    style?: ViewStyle;
-    onCropped: (uri: string) => void;
-}
-declare const ImageCropView: React.ForwardRefExoticComponent<CropViewProps & React.RefAttributes<ImageCropViewRef>>;
-export default ImageCropView;

package/lib/ImageCropView.js

@@ -1,24 +0,0 @@
-import { findNodeHandle, Platform, requireNativeComponent, UIManager } from 'react-native';
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-const CropViewNativeComponent = requireNativeComponent('RNImageCrop');
-const ImageCropView = forwardRef(({ fileUri, cropStyle, objectRect, style, onCropped }, ref) => {
-    const reactTag = useRef(null);
-    const crop = useCallback(() => {
-        UIManager.dispatchViewManagerCommand(reactTag.current, Platform.OS === 'ios'
-            ? UIManager.getViewManagerConfig('RNImageCrop').Commands.crop
-            : UIManager.getViewManagerConfig('RNImageCrop').Commands.crop.toString(), Platform.OS === 'ios' ? [] : [reactTag.current]);
-    }, []);
-    const onNativeCropped = useCallback(({ nativeEvent }) => {
-        const uri = nativeEvent.uri;
-        if (onCropped) {
-            onCropped(uri);
-        }
-    }, [onCropped]);
-    useImperativeHandle(ref, () => ({
-        crop,
-    }), [crop]);
-    return (<CropViewNativeComponent fileUri={fileUri} cropStyle={cropStyle} objectRect={objectRect} onCropped={onNativeCropped} style={style} ref={mRef => {
-            reactTag.current = findNodeHandle(mRef);
-        }}/>);
-});
-export default ImageCropView;

package/lib/ImageCropViewRef.d.ts

@@ -1,3 +0,0 @@
-export interface ImageCropViewRef {
-    crop: () => void;
-}

package/lib/ImageCropViewRef.js

@@ -1 +0,0 @@
-export {};

package/lib/index.d.ts

@@ -1,5 +0,0 @@
-import ImageCropView from './ImageCropView';
-import { ImageCropViewRef } from './ImageCropViewRef';
-import { ObjectRect } from './typings';
-export { ImageCropView };
-export type { ImageCropViewRef, ObjectRect };

package/lib/index.js

@@ -1,2 +0,0 @@
-import ImageCropView from './ImageCropView';
-export { ImageCropView };

package/lib/typings.d.ts

@@ -1,6 +0,0 @@
-export interface ObjectRect {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-}

package/lib/typings.js

@@ -1 +0,0 @@
-export {};

package/src/ImageCropView.tsx

@@ -1,69 +0,0 @@
-import { findNodeHandle, Platform, requireNativeComponent, UIManager, ViewProps, ViewStyle } from 'react-native'
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
-import { ImageCropViewRef } from './ImageCropViewRef'
-import { ObjectRect } from './typings'
-
-const CropViewNativeComponent = requireNativeComponent<CropViewNativeComponentProps>('RNImageCrop')
-
-interface SupperProps extends ViewProps {
-  fileUri: string
-  objectRect?: ObjectRect
-  cropStyle?: 'circular' | 'default'
-}
-
-interface CropViewNativeComponentProps extends SupperProps {
-  onCropped: (callback: any) => void
-}
-
-interface CropViewProps extends SupperProps {
-  style?: ViewStyle
-  onCropped: (uri: string) => void
-}
-
-const ImageCropView = forwardRef<ImageCropViewRef, CropViewProps>(
-  ({ fileUri, cropStyle, objectRect, style, onCropped }: CropViewProps, ref) => {
-    const reactTag = useRef<number | null>(null)
-    const crop = useCallback(() => {
-      UIManager.dispatchViewManagerCommand(
-        reactTag.current,
-        Platform.OS === 'ios'
-          ? UIManager.getViewManagerConfig('RNImageCrop').Commands.crop
-          : UIManager.getViewManagerConfig('RNImageCrop').Commands.crop.toString(),
-        Platform.OS === 'ios' ? [] : [reactTag.current],
-      )
-    }, [])
-
-    const onNativeCropped = useCallback(
-      ({ nativeEvent }: any) => {
-        const uri = nativeEvent.uri
-        if (onCropped) {
-          onCropped(uri)
-        }
-      },
-      [onCropped],
-    )
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        crop,
-      }),
-      [crop],
-    )
-
-    return (
-      <CropViewNativeComponent
-        fileUri={fileUri}
-        cropStyle={cropStyle}
-        objectRect={objectRect}
-        onCropped={onNativeCropped}
-        style={style}
-        ref={mRef => {
-          reactTag.current = findNodeHandle(mRef)
-        }}
-      />
-    )
-  },
-)
-
-export default ImageCropView

package/src/ImageCropViewRef.ts

@@ -1,3 +0,0 @@
-export interface ImageCropViewRef {
-  crop: () => void
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-import ImageCropView from './ImageCropView'
-import { ImageCropViewRef } from './ImageCropViewRef'
-import { ObjectRect } from './typings'
-
-export { ImageCropView }
-export type { ImageCropViewRef, ObjectRect }

package/src/typings.ts

@@ -1,6 +0,0 @@
-export interface ObjectRect {
-  top: number
-  left: number
-  width: number
-  height: number
-}