@onekeyfe/react-native-image-crop-picker 3.0.147 → 3.0.148

package/README.md

@@ -4,16 +4,18 @@ Single photo picker and cropper for OneKey, built on [Nitro Modules](https://nit
 
 Neither platform asks for photo library permission:
 
-- **iOS** picks with `PHPickerViewController`, which runs out of process. `react-native-image-crop-picker` requested full photo library access first. Once a user denied it, iOS never showed the prompt again and every later `openPicker` call failed silently (OK-48227). Cropping uses a vendored TOCropViewController 3.2.0 with the OK-51551 rotation fix, which upstream still lacks.
-- **Android** picks with the system Photo Picker (`ActivityResultContracts.PickVisualMedia`, which falls back to `ACTION_OPEN_DOCUMENT` on devices without it) and crops with uCrop `2.2.11-native`. Activity results go through the activity's `ActivityResultRegistry`, so no `ActivityEventListener` is needed.
+- **iOS** picks with `PHPickerViewController`, which runs out of process. `react-native-image-crop-picker` requested full photo library access first. Once a user denied it, iOS never showed the prompt again and every later `openPicker` call failed silently (OK-48227). The crop gestures come from a vendored TOCropViewController 3.2.0 `TOCropView`, with the OK-51551 rotation fix that upstream still lacks.
+- **Android** picks with the system Photo Picker (`ActivityResultContracts.PickVisualMedia`, which falls back to `ACTION_OPEN_DOCUMENT` on devices without it). The crop gestures come from uCrop `2.2.11-native`'s `UCropView`. Activity results go through the activity's `ActivityResultRegistry`, so no `ActivityEventListener` is needed.
+
+Both platforms show the same cropper screen, drawn by this package rather than by TOCropViewController or uCrop. See [Cropper screen](#cropper-screen).
 
 ## Installation
 
 ```sh
-yarn add react-native-image-crop-picker@npm:@onekeyfe/react-native-image-crop-picker react-native-nitro-modules
+yarn add @onekeyfe/react-native-image-crop-picker react-native-nitro-modules
 ```
 
-The npm alias keeps existing `react-native-image-crop-picker` imports working.
+To keep existing `react-native-image-crop-picker` imports working, install it under that name with an npm alias instead: `react-native-image-crop-picker@npm:@onekeyfe/react-native-image-crop-picker`.
 
 - **iOS**: do not also install the `TOCropViewController` pod. This package compiles its own copy, and the duplicate classes would clash at link time.
 - **Android**: uCrop is only published to JitPack. Add `maven { url "https://www.jitpack.io" }` to the app's `allprojects.repositories`.
@@ -23,7 +25,7 @@ The npm alias keeps existing `react-native-image-crop-picker` imports working.
 ```ts
 import ImageCropPicker, {
   ImageCropPickerError,
-} from 'react-native-image-crop-picker';
+} from '@onekeyfe/react-native-image-crop-picker';
 
 try {
   const image = await ImageCropPicker.openPicker({
@@ -50,6 +52,46 @@ const cropped = await ImageCropPicker.openCropper({
 
 `openCropper` accepts `file://` URIs, absolute paths, `http(s)://` URLs, `data:` URIs and, on Android, `content://` URIs.
 
+## Cropper screen
+
+The cropper is a full-screen page with the same layout and metrics on iOS and Android:
+
+- A 56 pt header with `cropperToolbarTitle` centered and a rotate button on the right. The rotate button turns the image 90° counterclockwise; `cropperRotateButtonsHidden` hides it.
+- The crop area. The crop box keeps 20 pt from every edge, and the image outside it shows the page background at 70% opacity. The rule-of-thirds grid shows while the image is moved, unless `showCropGuidelines` is `false`.
+- A footer with two capsule buttons, `cropperCancelText` and `cropperChooseText`, 50 pt tall with 10 pt between them. The confirm button shows a spinner while the image is saved.
+
+`cropperAppearance` sets its colors and fonts:
+
+```ts
+await ImageCropPicker.openPicker({
+  width: 240,
+  height: 240,
+  cropping: true,
+  cropperToolbarTitle: 'Crop image',
+  cropperAppearance: {
+    colorScheme: 'dark',
+    backgroundColor: '#0f0f0f',
+    confirmButtonColor: '#ffffffed',
+    confirmButtonTextColor: '#000000df',
+    titleFontFamily: 'Roobert-SemiBold',
+    buttonFontFamily: 'Roobert-Medium',
+  },
+});
+```
+
+| Field | Used for |
+| --- | --- |
+| `colorScheme` | `'light'` or `'dark'`. Picks the fallback palette and the status bar style. Defaults to the system appearance. |
+| `backgroundColor` | The page. The area outside the crop box is this color at 70% opacity. |
+| `titleColor` | The title and the crop box border. |
+| `iconColor` | The rotate button. |
+| `cancelButtonColor`, `cancelButtonPressedColor`, `cancelButtonTextColor` | The cancel button. |
+| `confirmButtonColor`, `confirmButtonPressedColor`, `confirmButtonTextColor` | The confirm button. |
+| `titleFontFamily`, `buttonFontFamily` | Fonts bundled with the app. iOS looks them up with `UIFont(name:)`, Android with React Native's `ReactFontManager`. |
+| `scale` | Multiplies every size, for apps that scale their UI. |
+
+Colors are CSS hex strings: `#RGB`, `#RRGGBB` or `#RRGGBBAA`. Anything left out falls back to OneKey's light or dark palette.
+
 ## Behavior
 
 - Results are always JPEG. `width` and `height` set the crop aspect ratio, and the cropped image is scaled to exactly that size, so a crop box a pixel off the ratio still yields the requested dimensions. With `freeStyleCropEnabled`, the crop keeps its own aspect ratio and is scaled to fit inside `width` × `height`.
@@ -58,6 +100,7 @@ const cropped = await ImageCropPicker.openCropper({
 - Results are written to `<tmp>/react-native-image-crop-picker/` on iOS and `<cache>/react-native-image-crop-picker/` on Android. `clean()` empties that directory.
 - Only one picker or cropper can be open at a time. A second call rejects with `E_PICKER_IN_PROGRESS`.
 - On iOS, cancelling the cropper that `openPicker` opened returns to the photo picker. On Android it rejects with `E_PICKER_CANCELLED`.
+- On Android the cropper keeps the calling activity's requested orientation, so a portrait-only app gets a portrait-only cropper.
 
 ## Not supported
 

package/ReactNativeImageCropPicker.podspec

@@ -19,9 +19,11 @@ Pod::Spec.new do |s|
     "cpp/**/*.{hpp,cpp}",
   ]
 
-  # Vendored TOCropViewController 3.2.0 with the OK-51551 rotation fix. Its
-  # headers are public so the Swift sources can use it. It replaces the
-  # standalone TOCropViewController pod, which must not be installed alongside.
+  # Vendored TOCropViewController 3.2.0 with the OK-51551 rotation fix, plus
+  # color hooks on TOCropOverlayView. Only its TOCropView is used, hosted by
+  # ImageCropperViewController. Its headers are public so the Swift sources can
+  # use it. It replaces the standalone TOCropViewController pod, which must not
+  # be installed alongside.
   s.public_header_files = ["ios/TOCropViewController/**/*.h"]
   # TOCropViewController looks up its strings in a bundle with exactly this name.
   s.resource_bundles = {

package/android/src/main/AndroidManifest.xml

@@ -3,9 +3,9 @@
 
   <application>
     <activity
-      android:name="com.yalantis.ucrop.UCropActivity"
+      android:name="com.margelo.nitro.reactnativeimagecroppicker.ImageCropperActivity"
       android:exported="false"
-      android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
+      android:theme="@style/Theme.AppCompat.NoActionBar" />
 
     <!-- Prompts Google Play services to install the backported photo picker module. -->
     <service

package/android/src/main/java/com/margelo/nitro/reactnativeimagecroppicker/ImageCropPickerImageProcessor.kt

@@ -28,16 +28,11 @@ internal data class ImageCropPickerConfig(
   val freeStyleCropEnabled: Boolean,
   val cropperCircleOverlay: Boolean,
   val cropperToolbarTitle: String?,
-  val cropperActiveWidgetColor: String?,
-  val cropperToolbarColor: String?,
-  val cropperToolbarWidgetColor: String?,
-  val cropperStatusBarLight: Boolean,
-  val cropperNavigationBarLight: Boolean,
+  val cropperChooseText: String?,
+  val cropperCancelText: String?,
+  val cropperRotateButtonsHidden: Boolean,
   val showCropGuidelines: Boolean,
-  val showCropFrame: Boolean,
-  val enableRotationGesture: Boolean,
-  val hideBottomControls: Boolean,
-  val disableCropperColorSetters: Boolean,
+  val appearance: ImageCropperAppearance?,
 ) {
   companion object {
     fun from(options: ImageCropPickerOptions, forceCropping: Boolean) = ImageCropPickerConfig(
@@ -51,16 +46,11 @@ internal data class ImageCropPickerConfig(
       freeStyleCropEnabled = options.freeStyleCropEnabled == true,
       cropperCircleOverlay = options.cropperCircleOverlay == true,
       cropperToolbarTitle = options.cropperToolbarTitle,
-      cropperActiveWidgetColor = options.cropperActiveWidgetColor,
-      cropperToolbarColor = options.cropperToolbarColor,
-      cropperToolbarWidgetColor = options.cropperToolbarWidgetColor,
-      cropperStatusBarLight = options.cropperStatusBarLight ?: true,
-      cropperNavigationBarLight = options.cropperNavigationBarLight ?: false,
+      cropperChooseText = options.cropperChooseText,
+      cropperCancelText = options.cropperCancelText,
+      cropperRotateButtonsHidden = options.cropperRotateButtonsHidden == true,
       showCropGuidelines = options.showCropGuidelines ?: true,
-      showCropFrame = options.showCropFrame ?: true,
-      enableRotationGesture = options.enableRotationGesture == true,
-      hideBottomControls = options.hideBottomControls == true,
-      disableCropperColorSetters = options.disableCropperColorSetters == true,
+      appearance = options.cropperAppearance,
     )
   }
 }

package/android/src/main/java/com/margelo/nitro/reactnativeimagecroppicker/ImageCropPickerSession.kt

@@ -1,8 +1,7 @@
 package com.margelo.nitro.reactnativeimagecroppicker
 
 import android.app.Activity
-import android.graphics.Bitmap
-import android.graphics.Color
+import android.content.res.Configuration
 import android.net.Uri
 import android.os.Handler
 import android.os.Looper
@@ -15,8 +14,6 @@ import androidx.activity.result.contract.ActivityResultContract
 import androidx.activity.result.contract.ActivityResultContracts
 import com.margelo.nitro.core.Promise
 import com.margelo.nitro.nativelogger.OneKeyLog
-import com.yalantis.ucrop.UCrop
-import com.yalantis.ucrop.UCropActivity
 import java.io.File
 import java.util.UUID
 import java.util.concurrent.ExecutorService
@@ -124,30 +121,37 @@ internal class ImageCropPickerSession(
     }
     temporaryFiles.add(destination)
 
-    val cropper = UCrop.of(source, Uri.fromFile(destination)).withOptions(buildCropOptions())
-    if (config.width != null && config.height != null) {
-      cropper.withAspectRatio(config.width.toFloat(), config.height.toFloat())
-    }
+    val systemIsDark = (activity.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) ==
+      Configuration.UI_MODE_NIGHT_YES
+    val intent = ImageCropperActivity.createIntent(
+      activity,
+      source,
+      Uri.fromFile(destination),
+      config,
+      ImageCropperTheme.resolve(config.appearance, systemIsDark),
+      // Keeps the cropper in the app's orientation, e.g. portrait on phones.
+      activity.requestedOrientation,
+    )
     val launcher = register(ActivityResultContracts.StartActivityForResult()) { result ->
       handleCropResult(result)
     }
-    launch { launcher.launch(cropper.getIntent(activity)) }
+    launch { launcher.launch(intent) }
   }
 
   private fun handleCropResult(result: ActivityResult) {
     val data = result.data
     when (result.resultCode) {
       Activity.RESULT_OK -> {
-        val output = data?.let { UCrop.getOutput(it) }
+        val output = data?.let { ImageCropperActivity.getOutputUri(it) }
         if (data == null || output == null) {
           finish(Result.failure(ImageCropPickerException.noImageData()))
           return
         }
         val cropRect = CropRect(
-          x = data.getIntExtra(UCrop.EXTRA_OUTPUT_OFFSET_X, -1).toDouble(),
-          y = data.getIntExtra(UCrop.EXTRA_OUTPUT_OFFSET_Y, -1).toDouble(),
-          width = data.getIntExtra(UCrop.EXTRA_OUTPUT_IMAGE_WIDTH, -1).toDouble(),
-          height = data.getIntExtra(UCrop.EXTRA_OUTPUT_IMAGE_HEIGHT, -1).toDouble(),
+          x = data.getIntExtra(ImageCropperActivity.EXTRA_OUTPUT_OFFSET_X, -1).toDouble(),
+          y = data.getIntExtra(ImageCropperActivity.EXTRA_OUTPUT_OFFSET_Y, -1).toDouble(),
+          width = data.getIntExtra(ImageCropperActivity.EXTRA_OUTPUT_WIDTH, -1).toDouble(),
+          height = data.getIntExtra(ImageCropperActivity.EXTRA_OUTPUT_HEIGHT, -1).toDouble(),
         )
         val filename = pickedFilename
         runInBackground(
@@ -164,35 +168,15 @@ internal class ImageCropPickerSession(
           onComplete = ::finish,
         )
       }
-      UCrop.RESULT_ERROR -> {
-        val message = data?.let { UCrop.getError(it)?.message } ?: "Cannot crop image"
+      ImageCropperActivity.RESULT_ERROR -> {
+        val message = data?.getStringExtra(ImageCropperActivity.EXTRA_ERROR_MESSAGE)
+          ?: "Cannot crop image"
         finish(Result.failure(ImageCropPickerException.noImageData(message)))
       }
       else -> finish(Result.failure(ImageCropPickerException.cancelled()))
     }
   }
 
-  private fun buildCropOptions(): UCrop.Options = UCrop.Options().apply {
-    setCompressionFormat(Bitmap.CompressFormat.JPEG)
-    setCompressionQuality(100)
-    setCircleDimmedLayer(config.cropperCircleOverlay)
-    setFreeStyleCropEnabled(config.freeStyleCropEnabled)
-    setShowCropGrid(config.showCropGuidelines)
-    setShowCropFrame(config.showCropFrame)
-    setHideBottomControls(config.hideBottomControls)
-    config.cropperToolbarTitle?.let { setToolbarTitle(it) }
-    if (config.enableRotationGesture) {
-      setAllowedGestures(UCropActivity.ALL, UCropActivity.ALL, UCropActivity.ALL)
-    }
-    if (!config.disableCropperColorSetters) {
-      parseColor(config.cropperActiveWidgetColor)?.let { setActiveControlsWidgetColor(it) }
-      parseColor(config.cropperToolbarColor)?.let { setToolbarColor(it) }
-      parseColor(config.cropperToolbarWidgetColor)?.let { setToolbarWidgetColor(it) }
-      setStatusBarLight(config.cropperStatusBarLight)
-      setNavigationBarLight(config.cropperNavigationBarLight)
-    }
-  }
-
   private fun <I, O> register(
     contract: ActivityResultContract<I, O>,
     callback: (O) -> Unit,
@@ -280,15 +264,6 @@ internal class ImageCropPickerSession(
     return displayName ?: uri.lastPathSegment
   }
 
-  private fun parseColor(value: String?): Int? =
-    value?.let {
-      try {
-        Color.parseColor(it)
-      } catch (error: IllegalArgumentException) {
-        null
-      }
-    }
-
   companion object {
     private const val TAG = "ImageCropPicker"
     private val mainHandler = Handler(Looper.getMainLooper())