react-native-morph-card 0.2.5 → 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 +11 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
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
|
+
https://github.com/user-attachments/assets/93f0c1f6-e203-496e-bb56-c994e1500e32
|
|
6
|
+
|
|
5
7
|
- Native animations on both platforms (UIKit `UIViewPropertyAnimator` / Android `ValueAnimator`)
|
|
6
8
|
- No JS-driven animation, no webview, no experimental flags
|
|
7
9
|
- Works with any navigation setup (React Navigation, expo-router, etc.)
|
|
@@ -18,6 +20,7 @@ Native card-to-modal morph transition for React Native. Smoothly animates a card
|
|
|
18
20
|
- [Imperative API](#imperative-api)
|
|
19
21
|
- [Running the Example App](#running-the-example-app)
|
|
20
22
|
- [Troubleshooting](#troubleshooting)
|
|
23
|
+
- [Roadmap](#roadmap)
|
|
21
24
|
- [License](#license)
|
|
22
25
|
|
|
23
26
|
## Installation
|
|
@@ -130,7 +133,7 @@ const { dismiss } = useMorphTarget({
|
|
|
130
133
|
});
|
|
131
134
|
```
|
|
132
135
|
|
|
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.
|
|
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.
|
|
134
137
|
|
|
135
138
|
### Imperative API
|
|
136
139
|
|
|
@@ -238,6 +241,13 @@ yarn build:android
|
|
|
238
241
|
| Metro can't find `react-native-morph-card` | Run `yarn install` at the repo root first |
|
|
239
242
|
| Duplicate module errors | Delete `node_modules` in both root and `example/`, then reinstall |
|
|
240
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
|
+
|
|
241
251
|
## License
|
|
242
252
|
|
|
243
253
|
MIT
|
package/package.json
CHANGED