react-native-morph-card 0.2.3 → 0.2.5
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 +122 -13
- package/lib/commonjs/MorphCardTarget.js +5 -12
- package/lib/commonjs/MorphCardTarget.js.map +1 -1
- package/lib/module/MorphCardTarget.js +6 -13
- 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 +3 -24
package/README.md
CHANGED
|
@@ -1,17 +1,30 @@
|
|
|
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
|
-
- Native animations on both platforms (UIKit `UIViewPropertyAnimator` / Android
|
|
5
|
+
- Native animations on both platforms (UIKit `UIViewPropertyAnimator` / Android `ValueAnimator`)
|
|
6
6
|
- No JS-driven animation, no webview, no experimental flags
|
|
7
|
-
- Works with any navigation setup
|
|
8
|
-
- Supports
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
- Works with any navigation setup (React Navigation, expo-router, etc.)
|
|
8
|
+
- Supports React Native new architecture (Fabric)
|
|
9
|
+
|
|
10
|
+
## Table of Contents
|
|
11
|
+
|
|
12
|
+
- [Installation](#installation)
|
|
13
|
+
- [Usage](#usage)
|
|
14
|
+
- [API](#api)
|
|
15
|
+
- [`<MorphCardSource>`](#morphcardsource)
|
|
16
|
+
- [`<MorphCardTarget>`](#morphcardtarget)
|
|
17
|
+
- [`useMorphTarget`](#usemorphtargetoptions)
|
|
18
|
+
- [Imperative API](#imperative-api)
|
|
19
|
+
- [Running the Example App](#running-the-example-app)
|
|
20
|
+
- [Troubleshooting](#troubleshooting)
|
|
21
|
+
- [License](#license)
|
|
11
22
|
|
|
12
23
|
## Installation
|
|
13
24
|
|
|
14
25
|
```sh
|
|
26
|
+
npm install react-native-morph-card
|
|
27
|
+
# or
|
|
15
28
|
yarn add react-native-morph-card
|
|
16
29
|
```
|
|
17
30
|
|
|
@@ -27,18 +40,114 @@ No additional steps required.
|
|
|
27
40
|
|
|
28
41
|
## Usage
|
|
29
42
|
|
|
43
|
+
Wrap your card content in `MorphCardSource`. On the detail screen, use `MorphCardTarget` where the card should land. Use `useMorphTarget` for easy collapse handling.
|
|
44
|
+
|
|
45
|
+
> **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.
|
|
46
|
+
|
|
30
47
|
```tsx
|
|
31
|
-
import
|
|
48
|
+
import React from 'react';
|
|
49
|
+
import { View, Image, Text, Pressable } from 'react-native';
|
|
50
|
+
import { MorphCardSource, MorphCardTarget, useMorphTarget } from 'react-native-morph-card';
|
|
32
51
|
|
|
33
|
-
|
|
52
|
+
// ── List screen ──
|
|
53
|
+
const ListScreen = ({ navigation }) => {
|
|
34
54
|
return (
|
|
35
|
-
<MorphCardSource
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
<MorphCardSource
|
|
56
|
+
width={200}
|
|
57
|
+
height={150}
|
|
58
|
+
borderRadius={16}
|
|
59
|
+
expandDuration={350}
|
|
60
|
+
onPress={(sourceTag) => navigation.navigate('Detail', { sourceTag })}
|
|
61
|
+
>
|
|
62
|
+
<Image source={albumArt} style={{ width: 200, height: 150 }} />
|
|
39
63
|
</MorphCardSource>
|
|
40
64
|
);
|
|
41
|
-
}
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
// ── Detail screen ──
|
|
68
|
+
const DetailScreen = ({ route, navigation }) => {
|
|
69
|
+
const { dismiss } = useMorphTarget({
|
|
70
|
+
sourceTag: route.params.sourceTag,
|
|
71
|
+
navigation,
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<View style={{ flex: 1 }}>
|
|
76
|
+
<MorphCardTarget
|
|
77
|
+
sourceTag={route.params.sourceTag}
|
|
78
|
+
width={'100%'}
|
|
79
|
+
height={300}
|
|
80
|
+
collapseDuration={200}
|
|
81
|
+
borderRadius={0}
|
|
82
|
+
/>
|
|
83
|
+
<Pressable onPress={dismiss}>
|
|
84
|
+
<Text>Close</Text>
|
|
85
|
+
</Pressable>
|
|
86
|
+
</View>
|
|
87
|
+
);
|
|
88
|
+
};
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## API
|
|
92
|
+
|
|
93
|
+
### `<MorphCardSource>`
|
|
94
|
+
|
|
95
|
+
Wraps the card content on the list/grid screen. Captures a snapshot and drives the expand animation.
|
|
96
|
+
|
|
97
|
+
| Prop | Type | Default | Description |
|
|
98
|
+
|------|------|---------|-------------|
|
|
99
|
+
| `width` | `DimensionValue` | — | Card width |
|
|
100
|
+
| `height` | `DimensionValue` | — | Card height |
|
|
101
|
+
| `borderRadius` | `number` | `0` | Corner radius of the card |
|
|
102
|
+
| `backgroundColor` | `string` | — | Background color (enables "wrapper mode" where the background expands separately from the content) |
|
|
103
|
+
| `duration` | `number` | `300` | Default animation duration in ms (used for both expand and collapse if specific durations are not set) |
|
|
104
|
+
| `expandDuration` | `number` | — | Duration of the expand animation in ms. Overrides `duration` for expand. |
|
|
105
|
+
| `scaleMode` | `'aspectFill' \| 'aspectFit' \| 'stretch'` | `'aspectFill'` | How the snapshot scales during no-wrapper mode animation |
|
|
106
|
+
| `onPress` | `(sourceTag: number) => void` | — | Called on tap with the native view tag. Use this to navigate to the detail screen. |
|
|
107
|
+
|
|
108
|
+
### `<MorphCardTarget>`
|
|
109
|
+
|
|
110
|
+
Placed on the detail screen where the card should land. Triggers the expand animation on mount.
|
|
111
|
+
|
|
112
|
+
| Prop | Type | Default | Description |
|
|
113
|
+
|------|------|---------|-------------|
|
|
114
|
+
| `sourceTag` | `number` | **required** | The source view tag from navigation params |
|
|
115
|
+
| `width` | `DimensionValue` | source width | Target width after expand |
|
|
116
|
+
| `height` | `DimensionValue` | source height | Target height after expand |
|
|
117
|
+
| `borderRadius` | `number` | source radius | Target corner radius. Set to `0` for no rounding. |
|
|
118
|
+
| `collapseDuration` | `number` | — | Duration of the collapse animation in ms. Falls back to the source's `duration`. |
|
|
119
|
+
| `contentOffsetY` | `number` | `0` | Vertical offset for content snapshot in wrapper mode |
|
|
120
|
+
| `contentCentered` | `boolean` | `false` | Center content snapshot horizontally in wrapper mode |
|
|
121
|
+
|
|
122
|
+
### `useMorphTarget(options)`
|
|
123
|
+
|
|
124
|
+
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.
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
const { dismiss } = useMorphTarget({
|
|
128
|
+
sourceTag: route.params.sourceTag,
|
|
129
|
+
navigation,
|
|
130
|
+
});
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
> **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.
|
|
134
|
+
|
|
135
|
+
### Imperative API
|
|
136
|
+
|
|
137
|
+
For more control, use the imperative functions:
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
import { morphExpand, morphCollapse, getViewTag } from 'react-native-morph-card';
|
|
141
|
+
|
|
142
|
+
// Expand from source to target
|
|
143
|
+
await morphExpand(sourceRef, targetRef);
|
|
144
|
+
|
|
145
|
+
// Collapse back (pass the sourceTag)
|
|
146
|
+
await morphCollapse(sourceTag);
|
|
147
|
+
|
|
148
|
+
// Get the native view tag from a ref
|
|
149
|
+
const tag = getViewTag(viewRef);
|
|
150
|
+
```
|
|
42
151
|
```
|
|
43
152
|
|
|
44
153
|
## Running the example app
|
|
@@ -7,15 +7,11 @@ exports.MorphCardTarget = void 0;
|
|
|
7
7
|
var React = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _NativeMorphCardModule = _interopRequireDefault(require("./specs/NativeMorphCardModule"));
|
|
10
|
+
var _NativeMorphCardTarget = _interopRequireDefault(require("./specs/NativeMorphCardTarget"));
|
|
10
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
-
|
|
14
|
-
try {
|
|
15
|
-
NativeTargetView = (0, _reactNative.requireNativeComponent)('RNCMorphCardTarget');
|
|
16
|
-
} catch {
|
|
17
|
-
NativeTargetView = _reactNative.View;
|
|
18
|
-
}
|
|
14
|
+
const NativeTargetView = _NativeMorphCardTarget.default ?? _reactNative.View;
|
|
19
15
|
const MorphCardTarget = ({
|
|
20
16
|
sourceTag,
|
|
21
17
|
collapseDuration,
|
|
@@ -23,9 +19,7 @@ const MorphCardTarget = ({
|
|
|
23
19
|
height,
|
|
24
20
|
borderRadius,
|
|
25
21
|
contentOffsetY,
|
|
26
|
-
contentCentered
|
|
27
|
-
style,
|
|
28
|
-
...rest
|
|
22
|
+
contentCentered
|
|
29
23
|
}) => {
|
|
30
24
|
const nativeRef = React.useRef(null);
|
|
31
25
|
const expandedRef = React.useRef(false);
|
|
@@ -76,9 +70,8 @@ const MorphCardTarget = ({
|
|
|
76
70
|
targetWidth: 0,
|
|
77
71
|
targetHeight: 0,
|
|
78
72
|
targetBorderRadius: borderRadius != null ? borderRadius : -1,
|
|
79
|
-
style:
|
|
80
|
-
onLayout: handleLayout
|
|
81
|
-
...rest
|
|
73
|
+
style: sizeStyle,
|
|
74
|
+
onLayout: handleLayout
|
|
82
75
|
});
|
|
83
76
|
};
|
|
84
77
|
exports.MorphCardTarget = MorphCardTarget;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_NativeMorphCardModule","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NativeTargetView","
|
|
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":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAOA,IAAAE,sBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAD,sBAAA,CAAAH,OAAA;AAAiE,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAG,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAO,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAEjE,MAAMgB,gBAAgB,GAAGC,8BAAoB,IAAIC,iBAAI;AAmB9C,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,SAAS;EACTC,gBAAgB;EAChBC,KAAK;EACLC,MAAM;EACNC,YAAY;EACZC,cAAc;EACdC;AACoB,CAAC,KAAK;EAC1B,MAAMC,SAAS,GAAGtC,KAAK,CAACuC,MAAM,CAAM,IAAI,CAAC;EACzC,MAAMC,WAAW,GAAGxC,KAAK,CAACuC,MAAM,CAAC,KAAK,CAAC;EACvC,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAG1C,KAAK,CAAC2C,QAAQ,CAGxC,IAAI,CAAC;;EAEf;EACA3C,KAAK,CAAC4C,SAAS,CAAC,MAAM;IACpB,IAAIC,SAAS,GAAG,KAAK;IACrB,IAAId,SAAS,KAAKE,KAAK,IAAI,IAAI,IAAIC,MAAM,IAAI,IAAI,CAAC,EAAE;MAClDY,8BAAqB,CAACC,aAAa,CAAChB,SAAS,CAAC,CAC3CiB,IAAI,CAAEC,IAAuC,IAAK;QACjD,IAAI,CAACJ,SAAS,EAAEH,aAAa,CAACO,IAAI,CAAC;MACrC,CAAC,CAAC,CACDC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACpB;IACA,OAAO,MAAM;MACXL,SAAS,GAAG,IAAI;IAClB,CAAC;EACH,CAAC,EAAE,CAACd,SAAS,EAAEE,KAAK,EAAEC,MAAM,CAAC,CAAC;;EAE9B;EACA,MAAMiB,YAAY,GAAGnD,KAAK,CAACoD,WAAW,CACnC5C,CAAoB,IAAK;IACxB,IAAIgC,WAAW,CAACa,OAAO,EAAE;IACzB,IAAI,CAACtB,SAAS,EAAE;IAEhB,MAAM;MAAEE,KAAK,EAAEqB,EAAE;MAAEpB,MAAM,EAAEqB;IAAG,CAAC,GAAG/C,CAAC,CAACgD,WAAW,CAACC,MAAM;IACtD,MAAMC,SAAS,GAAG,IAAAC,2BAAc,EAACrB,SAAS,CAACe,OAAO,CAAC;IACnD,IAAI,CAACK,SAAS,EAAE;IAEhBlB,WAAW,CAACa,OAAO,GAAG,IAAI;IAE1BP,8BAAqB,CAACc,eAAe,CACnC7B,SAAS,EACTuB,EAAE,EACFC,EAAE,EACFpB,YAAY,IAAI,IAAI,GAAGA,YAAY,GAAG,CAAC,CAAC,EACxCC,cAAc,IAAI,CAAC,EACnBC,eAAe,IAAI,KACrB,CAAC;IACDS,8BAAqB,CAACe,MAAM,CAAC9B,SAAS,EAAE2B,SAAS,CAAC;EACpD,CAAC,EACD,CAAC3B,SAAS,EAAEI,YAAY,EAAEC,cAAc,EAAEC,eAAe,CAC3D,CAAC;EAED,MAAMyB,SAAoB,GAAG,CAAC,CAAC;EAC/B,IAAI7B,KAAK,IAAI,IAAI,EAAE;IACjB6B,SAAS,CAAC7B,KAAK,GAAGA,KAAK;EACzB,CAAC,MAAM,IAAIQ,UAAU,EAAE;IACrBqB,SAAS,CAAC7B,KAAK,GAAGQ,UAAU,CAACR,KAAK;EACpC;EACA,IAAIC,MAAM,IAAI,IAAI,EAAE;IAClB4B,SAAS,CAAC5B,MAAM,GAAGA,MAAM;EAC3B,CAAC,MAAM,IAAIO,UAAU,EAAE;IACrBqB,SAAS,CAAC5B,MAAM,GAAGO,UAAU,CAACP,MAAM;EACtC;EAEA,oBACE,IAAA3B,WAAA,CAAAwD,GAAA,EAACpC,gBAAgB;IACfqC,GAAG,EAAE1B,SAAU;IACfP,SAAS,EAAEA,SAAU;IACrBC,gBAAgB,EAAEA,gBAAiB;IACnCiC,WAAW,EAAE,CAAE;IACfC,YAAY,EAAE,CAAE;IAChBC,kBAAkB,EAAEhC,YAAY,IAAI,IAAI,GAAGA,YAAY,GAAG,CAAC,CAAE;IAC7DiC,KAAK,EAAEN,SAAU;IACjBO,QAAQ,EAAElB;EAAa,CACxB,CAAC;AAEN,CAAC;AAACmB,OAAA,CAAAxC,eAAA,GAAAA,eAAA","ignoreList":[]}
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { View, findNodeHandle } from 'react-native';
|
|
5
5
|
import NativeMorphCardModule from './specs/NativeMorphCardModule';
|
|
6
|
+
import NativeTargetViewSpec from './specs/NativeMorphCardTarget';
|
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
|
|
8
|
-
try {
|
|
9
|
-
NativeTargetView = requireNativeComponent('RNCMorphCardTarget');
|
|
10
|
-
} catch {
|
|
11
|
-
NativeTargetView = View;
|
|
12
|
-
}
|
|
8
|
+
const NativeTargetView = NativeTargetViewSpec ?? View;
|
|
13
9
|
export const MorphCardTarget = ({
|
|
14
10
|
sourceTag,
|
|
15
11
|
collapseDuration,
|
|
@@ -17,9 +13,7 @@ export const MorphCardTarget = ({
|
|
|
17
13
|
height,
|
|
18
14
|
borderRadius,
|
|
19
15
|
contentOffsetY,
|
|
20
|
-
contentCentered
|
|
21
|
-
style,
|
|
22
|
-
...rest
|
|
16
|
+
contentCentered
|
|
23
17
|
}) => {
|
|
24
18
|
const nativeRef = React.useRef(null);
|
|
25
19
|
const expandedRef = React.useRef(false);
|
|
@@ -70,9 +64,8 @@ export const MorphCardTarget = ({
|
|
|
70
64
|
targetWidth: 0,
|
|
71
65
|
targetHeight: 0,
|
|
72
66
|
targetBorderRadius: borderRadius != null ? borderRadius : -1,
|
|
73
|
-
style:
|
|
74
|
-
onLayout: handleLayout
|
|
75
|
-
...rest
|
|
67
|
+
style: sizeStyle,
|
|
68
|
+
onLayout: handleLayout
|
|
76
69
|
});
|
|
77
70
|
};
|
|
78
71
|
//# sourceMappingURL=MorphCardTarget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
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,8 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {
|
|
3
|
-
requireNativeComponent,
|
|
4
|
-
type ViewProps,
|
|
5
|
-
type StyleProp,
|
|
6
3
|
type ViewStyle,
|
|
7
4
|
type DimensionValue,
|
|
8
5
|
View,
|
|
@@ -10,22 +7,9 @@ import {
|
|
|
10
7
|
type LayoutChangeEvent,
|
|
11
8
|
} from 'react-native';
|
|
12
9
|
import NativeMorphCardModule from './specs/NativeMorphCardModule';
|
|
10
|
+
import NativeTargetViewSpec from './specs/NativeMorphCardTarget';
|
|
13
11
|
|
|
14
|
-
|
|
15
|
-
ViewProps & {
|
|
16
|
-
sourceTag?: number;
|
|
17
|
-
collapseDuration?: number;
|
|
18
|
-
targetWidth?: number;
|
|
19
|
-
targetHeight?: number;
|
|
20
|
-
targetBorderRadius?: number;
|
|
21
|
-
}
|
|
22
|
-
>;
|
|
23
|
-
|
|
24
|
-
try {
|
|
25
|
-
NativeTargetView = requireNativeComponent('RNCMorphCardTarget');
|
|
26
|
-
} catch {
|
|
27
|
-
NativeTargetView = View;
|
|
28
|
-
}
|
|
12
|
+
const NativeTargetView = NativeTargetViewSpec ?? View;
|
|
29
13
|
|
|
30
14
|
export interface MorphCardTargetProps {
|
|
31
15
|
/** The sourceTag from route params — triggers expand on mount. */
|
|
@@ -42,8 +26,6 @@ export interface MorphCardTargetProps {
|
|
|
42
26
|
contentOffsetY?: number;
|
|
43
27
|
/** Center the content snapshot horizontally inside the expanded wrapper (wrapper mode only). */
|
|
44
28
|
contentCentered?: boolean;
|
|
45
|
-
/** Optional style for positioning (margin, position, etc). */
|
|
46
|
-
style?: StyleProp<ViewStyle>;
|
|
47
29
|
}
|
|
48
30
|
|
|
49
31
|
export const MorphCardTarget = ({
|
|
@@ -54,8 +36,6 @@ export const MorphCardTarget = ({
|
|
|
54
36
|
borderRadius,
|
|
55
37
|
contentOffsetY,
|
|
56
38
|
contentCentered,
|
|
57
|
-
style,
|
|
58
|
-
...rest
|
|
59
39
|
}: MorphCardTargetProps) => {
|
|
60
40
|
const nativeRef = React.useRef<any>(null);
|
|
61
41
|
const expandedRef = React.useRef(false);
|
|
@@ -124,9 +104,8 @@ export const MorphCardTarget = ({
|
|
|
124
104
|
targetWidth={0}
|
|
125
105
|
targetHeight={0}
|
|
126
106
|
targetBorderRadius={borderRadius != null ? borderRadius : -1}
|
|
127
|
-
style={
|
|
107
|
+
style={sizeStyle}
|
|
128
108
|
onLayout={handleLayout}
|
|
129
|
-
{...rest}
|
|
130
109
|
/>
|
|
131
110
|
);
|
|
132
111
|
};
|