react-native-morph-card 0.2.4 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -13
- package/lib/commonjs/MorphCardTarget.js +3 -6
- package/lib/commonjs/MorphCardTarget.js.map +1 -1
- package/lib/module/MorphCardTarget.js +3 -6
- package/lib/module/MorphCardTarget.js.map +1 -1
- package/lib/typescript/src/MorphCardTarget.d.ts +2 -4
- package/lib/typescript/src/MorphCardTarget.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/MorphCardTarget.tsx +1 -7
package/README.md
CHANGED
|
@@ -1,17 +1,33 @@
|
|
|
1
1
|
# react-native-morph-card
|
|
2
2
|
|
|
3
|
-
Native card-to-modal morph transition for React Native.
|
|
3
|
+
Native card-to-modal morph transition for React Native. Smoothly animates a card from a list into a fullscreen detail view, morphing size, position, and corner radius — then collapses back.
|
|
4
4
|
|
|
5
|
-
-
|
|
6
|
-
- No JS-driven animation, no webview, no experimental flags
|
|
7
|
-
- Works with any navigation setup
|
|
8
|
-
- Supports old and new React Native architecture (Paper + Fabric)
|
|
5
|
+
https://github.com/user-attachments/assets/93f0c1f6-e203-496e-bb56-c994e1500e32
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
- Native animations on both platforms (UIKit `UIViewPropertyAnimator` / Android `ValueAnimator`)
|
|
8
|
+
- No JS-driven animation, no webview, no experimental flags
|
|
9
|
+
- Works with any navigation setup (React Navigation, expo-router, etc.)
|
|
10
|
+
- Supports React Native new architecture (Fabric)
|
|
11
|
+
|
|
12
|
+
## Table of Contents
|
|
13
|
+
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Usage](#usage)
|
|
16
|
+
- [API](#api)
|
|
17
|
+
- [`<MorphCardSource>`](#morphcardsource)
|
|
18
|
+
- [`<MorphCardTarget>`](#morphcardtarget)
|
|
19
|
+
- [`useMorphTarget`](#usemorphtargetoptions)
|
|
20
|
+
- [Imperative API](#imperative-api)
|
|
21
|
+
- [Running the Example App](#running-the-example-app)
|
|
22
|
+
- [Troubleshooting](#troubleshooting)
|
|
23
|
+
- [Roadmap](#roadmap)
|
|
24
|
+
- [License](#license)
|
|
11
25
|
|
|
12
26
|
## Installation
|
|
13
27
|
|
|
14
28
|
```sh
|
|
29
|
+
npm install react-native-morph-card
|
|
30
|
+
# or
|
|
15
31
|
yarn add react-native-morph-card
|
|
16
32
|
```
|
|
17
33
|
|
|
@@ -27,18 +43,114 @@ No additional steps required.
|
|
|
27
43
|
|
|
28
44
|
## Usage
|
|
29
45
|
|
|
46
|
+
Wrap your card content in `MorphCardSource`. On the detail screen, use `MorphCardTarget` where the card should land. Use `useMorphTarget` for easy collapse handling.
|
|
47
|
+
|
|
48
|
+
> **Important:** `MorphCardSource` can wrap any React Native component (images, views, text, etc.), but during the animation the content is captured as a **bitmap snapshot**. This means dynamic or observable values (timers, animated values, live data) will freeze at the moment of capture. Design your card content with this in mind.
|
|
49
|
+
|
|
30
50
|
```tsx
|
|
31
|
-
import
|
|
51
|
+
import React from 'react';
|
|
52
|
+
import { View, Image, Text, Pressable } from 'react-native';
|
|
53
|
+
import { MorphCardSource, MorphCardTarget, useMorphTarget } from 'react-native-morph-card';
|
|
32
54
|
|
|
33
|
-
|
|
55
|
+
// ── List screen ──
|
|
56
|
+
const ListScreen = ({ navigation }) => {
|
|
34
57
|
return (
|
|
35
|
-
<MorphCardSource
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
58
|
+
<MorphCardSource
|
|
59
|
+
width={200}
|
|
60
|
+
height={150}
|
|
61
|
+
borderRadius={16}
|
|
62
|
+
expandDuration={350}
|
|
63
|
+
onPress={(sourceTag) => navigation.navigate('Detail', { sourceTag })}
|
|
64
|
+
>
|
|
65
|
+
<Image source={albumArt} style={{ width: 200, height: 150 }} />
|
|
39
66
|
</MorphCardSource>
|
|
40
67
|
);
|
|
41
|
-
}
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// ── Detail screen ──
|
|
71
|
+
const DetailScreen = ({ route, navigation }) => {
|
|
72
|
+
const { dismiss } = useMorphTarget({
|
|
73
|
+
sourceTag: route.params.sourceTag,
|
|
74
|
+
navigation,
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<View style={{ flex: 1 }}>
|
|
79
|
+
<MorphCardTarget
|
|
80
|
+
sourceTag={route.params.sourceTag}
|
|
81
|
+
width={'100%'}
|
|
82
|
+
height={300}
|
|
83
|
+
collapseDuration={200}
|
|
84
|
+
borderRadius={0}
|
|
85
|
+
/>
|
|
86
|
+
<Pressable onPress={dismiss}>
|
|
87
|
+
<Text>Close</Text>
|
|
88
|
+
</Pressable>
|
|
89
|
+
</View>
|
|
90
|
+
);
|
|
91
|
+
};
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## API
|
|
95
|
+
|
|
96
|
+
### `<MorphCardSource>`
|
|
97
|
+
|
|
98
|
+
Wraps the card content on the list/grid screen. Captures a snapshot and drives the expand animation.
|
|
99
|
+
|
|
100
|
+
| Prop | Type | Default | Description |
|
|
101
|
+
|------|------|---------|-------------|
|
|
102
|
+
| `width` | `DimensionValue` | — | Card width |
|
|
103
|
+
| `height` | `DimensionValue` | — | Card height |
|
|
104
|
+
| `borderRadius` | `number` | `0` | Corner radius of the card |
|
|
105
|
+
| `backgroundColor` | `string` | — | Background color (enables "wrapper mode" where the background expands separately from the content) |
|
|
106
|
+
| `duration` | `number` | `300` | Default animation duration in ms (used for both expand and collapse if specific durations are not set) |
|
|
107
|
+
| `expandDuration` | `number` | — | Duration of the expand animation in ms. Overrides `duration` for expand. |
|
|
108
|
+
| `scaleMode` | `'aspectFill' \| 'aspectFit' \| 'stretch'` | `'aspectFill'` | How the snapshot scales during no-wrapper mode animation |
|
|
109
|
+
| `onPress` | `(sourceTag: number) => void` | — | Called on tap with the native view tag. Use this to navigate to the detail screen. |
|
|
110
|
+
|
|
111
|
+
### `<MorphCardTarget>`
|
|
112
|
+
|
|
113
|
+
Placed on the detail screen where the card should land. Triggers the expand animation on mount.
|
|
114
|
+
|
|
115
|
+
| Prop | Type | Default | Description |
|
|
116
|
+
|------|------|---------|-------------|
|
|
117
|
+
| `sourceTag` | `number` | **required** | The source view tag from navigation params |
|
|
118
|
+
| `width` | `DimensionValue` | source width | Target width after expand |
|
|
119
|
+
| `height` | `DimensionValue` | source height | Target height after expand |
|
|
120
|
+
| `borderRadius` | `number` | source radius | Target corner radius. Set to `0` for no rounding. |
|
|
121
|
+
| `collapseDuration` | `number` | — | Duration of the collapse animation in ms. Falls back to the source's `duration`. |
|
|
122
|
+
| `contentOffsetY` | `number` | `0` | Vertical offset for content snapshot in wrapper mode |
|
|
123
|
+
| `contentCentered` | `boolean` | `false` | Center content snapshot horizontally in wrapper mode |
|
|
124
|
+
|
|
125
|
+
### `useMorphTarget(options)`
|
|
126
|
+
|
|
127
|
+
Hook that provides a `dismiss` function for collapsing back to the source card. The `navigation` object must support `goBack()` — works with React Navigation, expo-router, or any navigator that implements it.
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
const { dismiss } = useMorphTarget({
|
|
131
|
+
sourceTag: route.params.sourceTag,
|
|
132
|
+
navigation,
|
|
133
|
+
});
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
> **Note:** The detail screen should be presented as a modal (e.g. `transparentModal` or `fullScreenModal` in React Navigation) so the source screen remains mounted underneath during the animation. Make sure to disable any built-in navigation transitions (e.g. `animation: 'none'` in React Navigation) — the morph animation replaces the screen transition entirely, and combining both will look broken.
|
|
137
|
+
|
|
138
|
+
### Imperative API
|
|
139
|
+
|
|
140
|
+
For more control, use the imperative functions:
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
import { morphExpand, morphCollapse, getViewTag } from 'react-native-morph-card';
|
|
144
|
+
|
|
145
|
+
// Expand from source to target
|
|
146
|
+
await morphExpand(sourceRef, targetRef);
|
|
147
|
+
|
|
148
|
+
// Collapse back (pass the sourceTag)
|
|
149
|
+
await morphCollapse(sourceTag);
|
|
150
|
+
|
|
151
|
+
// Get the native view tag from a ref
|
|
152
|
+
const tag = getViewTag(viewRef);
|
|
153
|
+
```
|
|
42
154
|
```
|
|
43
155
|
|
|
44
156
|
## Running the example app
|
|
@@ -129,6 +241,13 @@ yarn build:android
|
|
|
129
241
|
| Metro can't find `react-native-morph-card` | Run `yarn install` at the repo root first |
|
|
130
242
|
| Duplicate module errors | Delete `node_modules` in both root and `example/`, then reinstall |
|
|
131
243
|
|
|
244
|
+
## Roadmap
|
|
245
|
+
|
|
246
|
+
- Support for more screen presentation styles (e.g. iOS modal sheet, page sheet)
|
|
247
|
+
- Shared element transitions between arbitrary views
|
|
248
|
+
- Gesture-driven collapse (drag to dismiss)
|
|
249
|
+
- Spring physics configuration props
|
|
250
|
+
|
|
132
251
|
## License
|
|
133
252
|
|
|
134
253
|
MIT
|
|
@@ -19,9 +19,7 @@ const MorphCardTarget = ({
|
|
|
19
19
|
height,
|
|
20
20
|
borderRadius,
|
|
21
21
|
contentOffsetY,
|
|
22
|
-
contentCentered
|
|
23
|
-
style,
|
|
24
|
-
...rest
|
|
22
|
+
contentCentered
|
|
25
23
|
}) => {
|
|
26
24
|
const nativeRef = React.useRef(null);
|
|
27
25
|
const expandedRef = React.useRef(false);
|
|
@@ -72,9 +70,8 @@ const MorphCardTarget = ({
|
|
|
72
70
|
targetWidth: 0,
|
|
73
71
|
targetHeight: 0,
|
|
74
72
|
targetBorderRadius: borderRadius != null ? borderRadius : -1,
|
|
75
|
-
style:
|
|
76
|
-
onLayout: handleLayout
|
|
77
|
-
...rest
|
|
73
|
+
style: sizeStyle,
|
|
74
|
+
onLayout: handleLayout
|
|
78
75
|
});
|
|
79
76
|
};
|
|
80
77
|
exports.MorphCardTarget = MorphCardTarget;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_NativeMorphCardModule","_interopRequireDefault","_NativeMorphCardTarget","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NativeTargetView","NativeTargetViewSpec","View","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","
|
|
1
|
+
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_NativeMorphCardModule","_interopRequireDefault","_NativeMorphCardTarget","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NativeTargetView","NativeTargetViewSpec","View","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","nativeRef","useRef","expandedRef","sourceSize","setSourceSize","useState","useEffect","cancelled","NativeMorphCardModule","getSourceSize","then","size","catch","handleLayout","useCallback","current","lw","lh","nativeEvent","layout","targetTag","findNodeHandle","setTargetConfig","expand","sizeStyle","jsx","ref","targetWidth","targetHeight","targetBorderRadius","style","onLayout","exports"],"sourceRoot":"../../src","sources":["MorphCardTarget.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -13,9 +13,7 @@ export const MorphCardTarget = ({
|
|
|
13
13
|
height,
|
|
14
14
|
borderRadius,
|
|
15
15
|
contentOffsetY,
|
|
16
|
-
contentCentered
|
|
17
|
-
style,
|
|
18
|
-
...rest
|
|
16
|
+
contentCentered
|
|
19
17
|
}) => {
|
|
20
18
|
const nativeRef = React.useRef(null);
|
|
21
19
|
const expandedRef = React.useRef(false);
|
|
@@ -66,9 +64,8 @@ export const MorphCardTarget = ({
|
|
|
66
64
|
targetWidth: 0,
|
|
67
65
|
targetHeight: 0,
|
|
68
66
|
targetBorderRadius: borderRadius != null ? borderRadius : -1,
|
|
69
|
-
style:
|
|
70
|
-
onLayout: handleLayout
|
|
71
|
-
...rest
|
|
67
|
+
style: sizeStyle,
|
|
68
|
+
onLayout: handleLayout
|
|
72
69
|
});
|
|
73
70
|
};
|
|
74
71
|
//# sourceMappingURL=MorphCardTarget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","findNodeHandle","NativeMorphCardModule","NativeTargetViewSpec","jsx","_jsx","NativeTargetView","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","
|
|
1
|
+
{"version":3,"names":["React","View","findNodeHandle","NativeMorphCardModule","NativeTargetViewSpec","jsx","_jsx","NativeTargetView","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","nativeRef","useRef","expandedRef","sourceSize","setSourceSize","useState","useEffect","cancelled","getSourceSize","then","size","catch","handleLayout","useCallback","e","current","lw","lh","nativeEvent","layout","targetTag","setTargetConfig","expand","sizeStyle","ref","targetWidth","targetHeight","targetBorderRadius","style","onLayout"],"sourceRoot":"../../src","sources":["MorphCardTarget.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { type
|
|
2
|
+
import { type DimensionValue } from 'react-native';
|
|
3
3
|
export interface MorphCardTargetProps {
|
|
4
4
|
/** The sourceTag from route params — triggers expand on mount. */
|
|
5
5
|
sourceTag: number;
|
|
@@ -15,8 +15,6 @@ export interface MorphCardTargetProps {
|
|
|
15
15
|
contentOffsetY?: number;
|
|
16
16
|
/** Center the content snapshot horizontally inside the expanded wrapper (wrapper mode only). */
|
|
17
17
|
contentCentered?: boolean;
|
|
18
|
-
/** Optional style for positioning (margin, position, etc). */
|
|
19
|
-
style?: StyleProp<ViewStyle>;
|
|
20
18
|
}
|
|
21
|
-
export declare const MorphCardTarget: ({ sourceTag, collapseDuration, width, height, borderRadius, contentOffsetY, contentCentered,
|
|
19
|
+
export declare const MorphCardTarget: ({ sourceTag, collapseDuration, width, height, borderRadius, contentOffsetY, contentCentered, }: MorphCardTargetProps) => React.JSX.Element;
|
|
22
20
|
//# sourceMappingURL=MorphCardTarget.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MorphCardTarget.d.ts","sourceRoot":"","sources":["../../../src/MorphCardTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"MorphCardTarget.d.ts","sourceRoot":"","sources":["../../../src/MorphCardTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,cAAc,CAAC;AAMtB,MAAM,WAAW,oBAAoB;IACnC,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oFAAoF;IACpF,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gGAAgG;IAChG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,GAAI,gGAQ7B,oBAAoB,sBAwEtB,CAAC"}
|
package/package.json
CHANGED
package/src/MorphCardTarget.tsx
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {
|
|
3
|
-
type StyleProp,
|
|
4
3
|
type ViewStyle,
|
|
5
4
|
type DimensionValue,
|
|
6
5
|
View,
|
|
@@ -27,8 +26,6 @@ export interface MorphCardTargetProps {
|
|
|
27
26
|
contentOffsetY?: number;
|
|
28
27
|
/** Center the content snapshot horizontally inside the expanded wrapper (wrapper mode only). */
|
|
29
28
|
contentCentered?: boolean;
|
|
30
|
-
/** Optional style for positioning (margin, position, etc). */
|
|
31
|
-
style?: StyleProp<ViewStyle>;
|
|
32
29
|
}
|
|
33
30
|
|
|
34
31
|
export const MorphCardTarget = ({
|
|
@@ -39,8 +36,6 @@ export const MorphCardTarget = ({
|
|
|
39
36
|
borderRadius,
|
|
40
37
|
contentOffsetY,
|
|
41
38
|
contentCentered,
|
|
42
|
-
style,
|
|
43
|
-
...rest
|
|
44
39
|
}: MorphCardTargetProps) => {
|
|
45
40
|
const nativeRef = React.useRef<any>(null);
|
|
46
41
|
const expandedRef = React.useRef(false);
|
|
@@ -109,9 +104,8 @@ export const MorphCardTarget = ({
|
|
|
109
104
|
targetWidth={0}
|
|
110
105
|
targetHeight={0}
|
|
111
106
|
targetBorderRadius={borderRadius != null ? borderRadius : -1}
|
|
112
|
-
style={
|
|
107
|
+
style={sizeStyle}
|
|
113
108
|
onLayout={handleLayout}
|
|
114
|
-
{...rest}
|
|
115
109
|
/>
|
|
116
110
|
);
|
|
117
111
|
};
|