react-native-nitro-image-pipeline 1.0.0 → 1.1.0

package/src/index.ts

@@ -4,11 +4,12 @@ import { NitroModules } from 'react-native-nitro-modules';
 
 import type {
   CacheOption,
+  CornerRadii,
   NitroImagePipeline as NitroImagePipelineSpec,
   Options,
 } from './specs/nitro-image-toolkit.nitro';
 
-export type { CacheOption, Options };
+export type { CacheOption, CornerRadii, Options };
 
 export const NitroImagePipeline =
   NitroModules.createHybridObject<NitroImagePipelineSpec>('NitroImagePipeline');
@@ -51,7 +52,12 @@ export function useImage({
    * React Native's `blurRadius`.
    */
   blur?: number;
-  cornerRadius?: number;
+  /**
+   * Corner radius in points, baked into the loaded bitmap. Pass a single
+   * number for uniform rounding, or per-corner radii (inline object literals
+   * are fine — the hook compares the radii by value, not identity).
+   */
+  cornerRadius?: number | CornerRadii;
   cache?: CacheOption;
 }): Result {
   const [image, setImage] = useState<Result>({
@@ -60,6 +66,17 @@ export function useImage({
   });
   const loadedUrlRef = useRef(url);
 
+  // Split the option into primitives so an inline `{ topLeft: 24, ... }`
+  // literal (new identity every render) doesn't re-trigger the effect.
+  const isUniformRadius = typeof cornerRadius === 'number';
+  const uniformRadius = isUniformRadius ? cornerRadius : 0;
+  const {
+    topLeft = 0,
+    topRight = 0,
+    bottomLeft = 0,
+    bottomRight = 0,
+  } = isUniformRadius ? {} : cornerRadius;
+
   useEffect(() => {
     let cancelled = false;
     // Only reset to the loading state when the URL changes; for same-URL
@@ -74,7 +91,9 @@ export function useImage({
       try {
         const result = await NitroImagePipeline.loadImage(url, {
           blur,
-          cornerRadius,
+          cornerRadius: isUniformRadius
+            ? uniformRadius
+            : { topLeft, topRight, bottomLeft, bottomRight },
           cache,
         });
 
@@ -92,7 +111,17 @@ export function useImage({
     return () => {
       cancelled = true;
     };
-  }, [url, blur, cornerRadius, cache]);
+  }, [
+    url,
+    blur,
+    isUniformRadius,
+    uniformRadius,
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight,
+    cache,
+  ]);
 
   return image;
 }

package/src/specs/nitro-image-toolkit.nitro.ts

@@ -2,6 +2,17 @@ import type { Image } from 'react-native-nitro-image';
 import type { HybridObject } from 'react-native-nitro-modules';
 
 export type CacheOption = 'memory' | 'disk' | 'none';
+
+/**
+ * Independent corner radii in points. Omitted corners stay square.
+ */
+export interface CornerRadii {
+  topLeft?: number;
+  topRight?: number;
+  bottomLeft?: number;
+  bottomRight?: number;
+}
+
 export type Options = {
   /**
    * Gaussian blur strength, given as the standard deviation (sigma) of the
@@ -14,7 +25,15 @@ export type Options = {
    */
   blur?: number;
   cache?: CacheOption;
-  cornerRadius?: number;
+  /**
+   * Corner radius in points, baked into the loaded bitmap. Pass a single
+   * number to round all four corners uniformly, or a {@linkcode CornerRadii}
+   * object to round each corner independently (e.g. a "ticket" shape with
+   * larger bottom corners).
+   *
+   * @default 0 (square corners)
+   */
+  cornerRadius?: number | CornerRadii;
 };
 
 export interface NitroImagePipeline extends HybridObject<{