react-native-morph-card 0.1.0

package/lib/typescript/src/specs/NativeMorphCardSource.d.ts

@@ -0,0 +1,13 @@
+import type { ViewProps } from 'react-native';
+import type { DirectEventHandler, Double, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+export interface NativeMorphCardSourceProps extends ViewProps {
+    onMorphStart?: DirectEventHandler<{}>;
+    onMorphComplete?: DirectEventHandler<{}>;
+    onDismissComplete?: DirectEventHandler<{}>;
+    duration?: Double;
+    scaleMode?: WithDefault<'aspectFill' | 'aspectFit' | 'stretch', 'aspectFill'>;
+    cardBorderRadius?: Double;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeMorphCardSourceProps>;
+export default _default;
+//# sourceMappingURL=NativeMorphCardSource.d.ts.map

package/lib/typescript/src/specs/NativeMorphCardSource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeMorphCardSource.d.ts","sourceRoot":"","sources":["../../../../src/specs/NativeMorphCardSource.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,WAAW,EACZ,MAAM,2CAA2C,CAAC;AAGnD,MAAM,WAAW,0BAA2B,SAAQ,SAAS;IAC3D,YAAY,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,WAAW,CAAC,YAAY,GAAG,WAAW,GAAG,SAAS,EAAE,YAAY,CAAC,CAAC;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;;AAED,wBAEE"}

package/lib/typescript/src/specs/NativeMorphCardTarget.d.ts

@@ -0,0 +1,25 @@
+import type { ViewProps } from 'react-native';
+import type { DirectEventHandler, Double, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+interface MorphCompleteEvent {
+    finished: boolean;
+}
+export interface NativeMorphCardTargetProps extends ViewProps {
+    /**
+     * Duration of the morph animation in milliseconds.
+     */
+    duration?: Double;
+    /**
+     * The react tag of the source card to morph from.
+     */
+    sourceTag?: Int32;
+    onMorphComplete?: DirectEventHandler<MorphCompleteEvent>;
+    /** Explicit target width. 0 = use source width. */
+    targetWidth?: Double;
+    /** Explicit target height. 0 = use source height. */
+    targetHeight?: Double;
+    /** Target border radius. -1 = use source border radius. */
+    targetBorderRadius?: Double;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeMorphCardTargetProps>;
+export default _default;
+//# sourceMappingURL=NativeMorphCardTarget.d.ts.map

package/lib/typescript/src/specs/NativeMorphCardTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeMorphCardTarget.d.ts","sourceRoot":"","sources":["../../../../src/specs/NativeMorphCardTarget.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,KAAK,EACN,MAAM,2CAA2C,CAAC;AAGnD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,0BAA2B,SAAQ,SAAS;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAElB,eAAe,CAAC,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAEzD,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;;AAED,wBAEE"}

package/lib/typescript/src/useMorphTarget.d.ts

@@ -0,0 +1,16 @@
+interface UseMorphTargetOptions {
+    sourceTag: number;
+    navigation: {
+        goBack: () => void;
+    };
+}
+/**
+ * Hook for detail screens using MorphCardTarget.
+ *
+ * Returns a `dismiss()` that collapses the morph and navigates back.
+ */
+export declare function useMorphTarget({ sourceTag, navigation }: UseMorphTargetOptions): {
+    dismiss: () => Promise<void>;
+};
+export {};
+//# sourceMappingURL=useMorphTarget.d.ts.map

package/lib/typescript/src/useMorphTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMorphTarget.d.ts","sourceRoot":"","sources":["../../../src/useMorphTarget.ts"],"names":[],"mappings":"AAGA,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACpC;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,qBAAqB;;EAO9E"}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "react-native-morph-card",
+  "version": "0.1.0",
+  "description": "Native card-to-modal morph transition for React Native. iOS App Store-style expand animation.",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "react-native": "src/index.tsx",
+  "types": "lib/typescript/src/index.d.ts",
+  "source": "src/index.tsx",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "ios",
+    "android",
+    "common",
+    "react-native-morph-card.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/.gradle",
+    "!**/*.test.*"
+  ],
+  "scripts": {
+    "prepare": "bob build",
+    "test": "yarn validate:eslint && yarn validate:typescript && yarn validate:jest",
+    "validate:eslint": "eslint \"src/**/*.{js,ts,tsx}\"",
+    "validate:typescript": "tsc --noEmit",
+    "validate:jest": "jest",
+    "format:prettier:write": "prettier --write \"src/**/*.{js,ts,tsx}\"",
+    "format:prettier:check": "prettier --check \"src/**/*.{js,ts,tsx}\"",
+    "format:clang:write": "find ios common -iname '*.h' -o -iname '*.m' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format -i",
+    "format:clang:check": "find ios common -iname '*.h' -o -iname '*.m' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format --dry-run --Werror",
+    "format:spotless:write": "cd android && ./gradlew spotlessApply",
+    "format:spotless:check": "cd android && ./gradlew spotlessCheck",
+    "format:write": "yarn format:prettier:write && yarn format:clang:write && yarn format:spotless:write",
+    "format:check": "yarn format:prettier:check && yarn format:clang:check && yarn format:spotless:check"
+  },
+  "keywords": [
+    "react-native",
+    "morph",
+    "card",
+    "modal",
+    "transition",
+    "animation",
+    "shared-element",
+    "hero",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MeliValesca/react-native-morph-card.git"
+  },
+  "author": "MeliValesca (https://github.com/MeliValesca)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/MeliValesca/react-native-morph-card/issues"
+  },
+  "homepage": "https://github.com/MeliValesca/react-native-morph-card#readme",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.80.0",
+    "@react-native/eslint-config": "^0.80.0",
+    "@react-native/eslint-plugin-specs": "^0.80.0",
+    "@types/react": "^19.0.0",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.3.0",
+    "react": "^19.1.0",
+    "react-native": "^0.80.0",
+    "react-native-builder-bob": "^0.35.0",
+    "typescript": "^5.5.0"
+  },
+  "codegenConfig": {
+    "android": {
+      "javaPackageName": "com.melivalesca.morphcard"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNCMorphCardSource": "RNCMorphCardSourceComponentView",
+        "RNCMorphCardTarget": "RNCMorphCardTargetComponentView"
+      }
+    },
+    "name": "morphcard",
+    "type": "all",
+    "jsSrcsDir": "./src/specs"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

package/react-native-morph-card.podspec

@@ -0,0 +1,41 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
+
+Pod::Spec.new do |s|
+  s.name         = 'react-native-morph-card'
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.homepage     = package['homepage']
+  s.license      = package['license']
+  s.authors      = package['author']
+  s.platforms    = { :ios => '15.1', :tvos => '15.1', :visionos => '1.0' }
+  s.source       = { :git => package['repository']['url'], :tag => "v#{s.version}" }
+
+  s.source_files = 'ios/*.{h,m,mm}'
+
+  if fabric_enabled
+    install_modules_dependencies(s)
+
+    s.subspec 'common' do |ss|
+      ss.source_files = 'common/cpp/**/*.{cpp,h}'
+      ss.header_dir = 'react/renderer/components/morphcard'
+      ss.pod_target_xcconfig = {
+        'HEADER_SEARCH_PATHS' => '"$(PODS_TARGET_SRCROOT)/common/cpp"',
+      }
+    end
+
+    s.subspec 'fabric' do |ss|
+      ss.dependency "#{s.name}/common"
+      ss.source_files = 'ios/Fabric/**/*.{h,m,mm}'
+      ss.pod_target_xcconfig = {
+        'HEADER_SEARCH_PATHS' => '"$(PODS_TARGET_SRCROOT)/common/cpp"',
+      }
+    end
+  else
+    s.exclude_files = 'ios/Fabric/**'
+    s.dependency 'React-Core'
+  end
+end

package/react-native.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        libraryName: 'morphcard',
+        componentDescriptors: [
+          'RNCMorphCardSourceComponentDescriptor',
+          'RNCMorphCardTargetComponentDescriptor',
+        ],
+      },
+    },
+  },
+};

package/src/MorphCard.types.ts

@@ -0,0 +1,29 @@
+import type { ViewProps } from 'react-native';
+
+export interface MorphCardProps extends ViewProps {
+  /**
+   * Duration of the morph animation in milliseconds. Defaults to 500.
+   */
+  duration?: number;
+  /**
+   * Called when the expand animation begins.
+   */
+  onMorphStart?: () => void;
+  /**
+   * Called when the expand animation completes.
+   */
+  onMorphComplete?: () => void;
+  /**
+   * Called when the collapse animation completes.
+   */
+  onDismissComplete?: () => void;
+  /**
+   * The collapsed card content.
+   */
+  renderCollapsed: () => React.ReactNode;
+  /**
+   * The expanded fullscreen content.
+   */
+  renderExpanded: (collapse: () => void) => React.ReactNode;
+  ref?: React.Ref<any>;
+}

package/src/MorphCardSource.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import {
+  Pressable,
+  type ViewStyle,
+  type DimensionValue,
+  View,
+  findNodeHandle,
+} from 'react-native';
+import NativeMorphCardModule from './specs/NativeMorphCardModule';
+import NativeSourceViewSpec from './specs/NativeMorphCardSource';
+
+const NativeSourceView = NativeSourceViewSpec ?? View;
+
+export type ScaleMode = 'aspectFill' | 'aspectFit' | 'stretch';
+
+export interface MorphCardSourceProps {
+  ref?: React.Ref<any>;
+  duration?: number;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  borderRadius?: number;
+  backgroundColor?: string;
+  /** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: 'aspectFill' */
+  scaleMode?: ScaleMode;
+  onPress?: (sourceTag: number) => void;
+  children: React.ReactNode;
+}
+
+export const MorphCardSource = ({
+  children,
+  duration = 300,
+  width,
+  height,
+  borderRadius,
+  backgroundColor,
+  scaleMode,
+  onPress,
+  ref,
+}: MorphCardSourceProps) => {
+  const nativeRef = React.useRef<any>(null);
+  React.useImperativeHandle(ref, () => nativeRef.current);
+
+  const style: ViewStyle = {};
+  if (width != null) style.width = width as ViewStyle['width'];
+  if (height != null) style.height = height as ViewStyle['height'];
+  if (borderRadius != null) {
+    style.borderRadius = borderRadius;
+    style.overflow = 'hidden';
+  }
+  if (backgroundColor != null) style.backgroundColor = backgroundColor;
+  const handlePress = React.useCallback(() => {
+    if (!onPress) return;
+    const tag = findNodeHandle(nativeRef.current);
+    if (tag != null) {
+      // Create overlay immediately BEFORE navigation to prevent target screen flash
+      NativeMorphCardModule.prepareExpand(tag);
+      onPress(tag);
+    }
+  }, [onPress]);
+
+  const content = (
+    <NativeSourceView ref={nativeRef} duration={duration} scaleMode={scaleMode} cardBorderRadius={borderRadius} style={style}>
+      {children}
+    </NativeSourceView>
+  );
+
+  if (onPress) {
+    return <Pressable onPress={handlePress}>{content}</Pressable>;
+  }
+
+  return content;
+};
+
+/**
+ * Get the native view tag from a ref. Useful for passing sourceTag
+ * to the detail screen via navigation params.
+ */
+export function getViewTag(viewRef: React.RefObject<any>): number | null {
+  return findNodeHandle(viewRef.current);
+}
+
+/**
+ * Expand: background grows from card bounds to fullscreen while
+ * card snapshot moves to targetRef's position. Content fades in at the end.
+ *
+ * Call this AFTER navigating to the detail screen (so the target is mounted).
+ */
+export async function morphExpand(
+  sourceRef: React.RefObject<any>,
+  targetRef: React.RefObject<any>,
+): Promise<boolean> {
+  const sourceTag = findNodeHandle(sourceRef.current);
+  const targetTag = findNodeHandle(targetRef.current);
+  if (!sourceTag || !targetTag) return false;
+  return NativeMorphCardModule.expand(sourceTag, targetTag);
+}
+
+/**
+ * Collapse: content fades out, background shrinks from fullscreen back
+ * to card bounds while card snapshot moves from target back to card position.
+ * Uses the target stored from the last expand call.
+ */
+export async function morphCollapse(sourceTag: number): Promise<boolean> {
+  return NativeMorphCardModule.collapse(sourceTag);
+}

package/src/MorphCardTarget.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import {
+  requireNativeComponent,
+  type ViewProps,
+  type StyleProp,
+  type ViewStyle,
+  type DimensionValue,
+  View,
+  findNodeHandle,
+  type LayoutChangeEvent,
+} from 'react-native';
+import NativeMorphCardModule from './specs/NativeMorphCardModule';
+
+let NativeTargetView: React.ComponentType<
+  ViewProps & {
+    sourceTag?: number;
+    targetWidth?: number;
+    targetHeight?: number;
+    targetBorderRadius?: number;
+  }
+>;
+
+try {
+  NativeTargetView = requireNativeComponent('RNCMorphCardTarget');
+} catch {
+  NativeTargetView = View;
+}
+
+export interface MorphCardTargetProps {
+  /** The sourceTag from route params — triggers expand on mount. */
+  sourceTag: number;
+  /** Optional width override (number or '100%'). If omitted, source width is used. */
+  width?: DimensionValue;
+  /** Optional height override (number or '100%'). If omitted, source height is used. */
+  height?: DimensionValue;
+  /** Optional border radius override. If omitted, source border radius is used. Set to 0 for no rounding. */
+  borderRadius?: number;
+  /** Vertical offset for the content snapshot inside the expanded wrapper (wrapper mode only). */
+  contentOffsetY?: number;
+  /** Center the content snapshot horizontally inside the expanded wrapper (wrapper mode only). */
+  contentCentered?: boolean;
+  /** Optional style for positioning (margin, position, etc). */
+  style?: StyleProp<ViewStyle>;
+}
+
+export const MorphCardTarget = ({
+  sourceTag,
+  width,
+  height,
+  borderRadius,
+  contentOffsetY,
+  contentCentered,
+  style,
+  ...rest
+}: MorphCardTargetProps) => {
+  const nativeRef = React.useRef<any>(null);
+  const expandedRef = React.useRef(false);
+  const [sourceSize, setSourceSize] = React.useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  // Fetch source size for auto-sizing when width/height not provided
+  React.useEffect(() => {
+    let cancelled = false;
+    if (sourceTag && (width == null || height == null)) {
+      NativeMorphCardModule.getSourceSize(sourceTag)
+        .then((size: { width: number; height: number }) => {
+          if (!cancelled) setSourceSize(size);
+        })
+        .catch(() => {});
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [sourceTag, width, height]);
+
+  // Use onLayout to get resolved pixel dimensions, then trigger expand
+  const handleLayout = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      if (expandedRef.current) return;
+      if (!sourceTag) return;
+
+      const { width: lw, height: lh } = e.nativeEvent.layout;
+      const targetTag = findNodeHandle(nativeRef.current);
+      if (!targetTag) return;
+
+      expandedRef.current = true;
+
+      NativeMorphCardModule.setTargetConfig(
+        sourceTag,
+        lw,
+        lh,
+        borderRadius != null ? borderRadius : -1,
+        contentOffsetY ?? 0,
+        contentCentered ?? false
+      );
+      NativeMorphCardModule.expand(sourceTag, targetTag);
+    },
+    [sourceTag, borderRadius, contentOffsetY, contentCentered]
+  );
+
+  const sizeStyle: ViewStyle = {};
+  if (width != null) {
+    sizeStyle.width = width;
+  } else if (sourceSize) {
+    sizeStyle.width = sourceSize.width;
+  }
+  if (height != null) {
+    sizeStyle.height = height;
+  } else if (sourceSize) {
+    sizeStyle.height = sourceSize.height;
+  }
+
+  return (
+    <NativeTargetView
+      ref={nativeRef}
+      sourceTag={sourceTag}
+      targetWidth={0}
+      targetHeight={0}
+      targetBorderRadius={borderRadius != null ? borderRadius : -1}
+      style={[style, sizeStyle]}
+      onLayout={handleLayout}
+      {...rest}
+    />
+  );
+};

package/src/index.tsx

@@ -0,0 +1,10 @@
+export {
+  MorphCardSource,
+  morphExpand,
+  morphCollapse,
+  getViewTag,
+} from './MorphCardSource';
+export type { MorphCardSourceProps, ScaleMode } from './MorphCardSource';
+export { MorphCardTarget } from './MorphCardTarget';
+export type { MorphCardTargetProps } from './MorphCardTarget';
+export { useMorphTarget } from './useMorphTarget';

package/src/specs/NativeMorphCardModule.ts

@@ -0,0 +1,21 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  prepareExpand(sourceTag: number): void;
+  expand(sourceTag: number, targetTag: number): Promise<boolean>;
+  setTargetConfig(
+    sourceTag: number,
+    targetWidth: number,
+    targetHeight: number,
+    targetBorderRadius: number,
+    contentOffsetY: number,
+    contentCentered: boolean
+  ): void;
+  collapse(sourceTag: number): Promise<boolean>;
+  getSourceSize(
+    sourceTag: number
+  ): Promise<{ width: number; height: number }>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNCMorphCardModule');

package/src/specs/NativeMorphCardSource.ts

@@ -0,0 +1,20 @@
+import type { ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeMorphCardSourceProps extends ViewProps {
+  onMorphStart?: DirectEventHandler<{}>;
+  onMorphComplete?: DirectEventHandler<{}>;
+  onDismissComplete?: DirectEventHandler<{}>;
+  duration?: Double;
+  scaleMode?: WithDefault<'aspectFill' | 'aspectFit' | 'stretch', 'aspectFill'>;
+  cardBorderRadius?: Double;
+}
+
+export default codegenNativeComponent<NativeMorphCardSourceProps>(
+  'RNCMorphCardSource',
+);

package/src/specs/NativeMorphCardTarget.ts

@@ -0,0 +1,38 @@
+import type { ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+interface MorphCompleteEvent {
+  finished: boolean;
+}
+
+export interface NativeMorphCardTargetProps extends ViewProps {
+  /**
+   * Duration of the morph animation in milliseconds.
+   */
+  duration?: Double;
+
+  /**
+   * The react tag of the source card to morph from.
+   */
+  sourceTag?: Int32;
+
+  onMorphComplete?: DirectEventHandler<MorphCompleteEvent>;
+
+  /** Explicit target width. 0 = use source width. */
+  targetWidth?: Double;
+
+  /** Explicit target height. 0 = use source height. */
+  targetHeight?: Double;
+
+  /** Target border radius. -1 = use source border radius. */
+  targetBorderRadius?: Double;
+}
+
+export default codegenNativeComponent<NativeMorphCardTargetProps>(
+  'RNCMorphCardTarget',
+);

package/src/useMorphTarget.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import NativeMorphCardModule from './specs/NativeMorphCardModule';
+
+interface UseMorphTargetOptions {
+  sourceTag: number;
+  navigation: { goBack: () => void };
+}
+
+/**
+ * Hook for detail screens using MorphCardTarget.
+ *
+ * Returns a `dismiss()` that collapses the morph and navigates back.
+ */
+export function useMorphTarget({ sourceTag, navigation }: UseMorphTargetOptions) {
+  const dismiss = React.useCallback(async () => {
+    await NativeMorphCardModule.collapse(sourceTag);
+    navigation.goBack();
+  }, [sourceTag, navigation]);
+
+  return { dismiss };
+}