react-native-morph-card 0.2.5 → 0.2.7
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 +16 -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,8 @@ 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
|
+
- [Contributing](#contributing)
|
|
24
|
+
- [Roadmap](#roadmap)
|
|
21
25
|
- [License](#license)
|
|
22
26
|
|
|
23
27
|
## Installation
|
|
@@ -130,7 +134,7 @@ const { dismiss } = useMorphTarget({
|
|
|
130
134
|
});
|
|
131
135
|
```
|
|
132
136
|
|
|
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.
|
|
137
|
+
> **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
138
|
|
|
135
139
|
### Imperative API
|
|
136
140
|
|
|
@@ -238,6 +242,17 @@ yarn build:android
|
|
|
238
242
|
| Metro can't find `react-native-morph-card` | Run `yarn install` at the repo root first |
|
|
239
243
|
| Duplicate module errors | Delete `node_modules` in both root and `example/`, then reinstall |
|
|
240
244
|
|
|
245
|
+
## Contributing
|
|
246
|
+
|
|
247
|
+
Contributions are welcome! If you find a bug or have a feature request, please open an issue. Pull requests are appreciated — just make sure to open an issue first so we can discuss the approach.
|
|
248
|
+
|
|
249
|
+
## Roadmap
|
|
250
|
+
|
|
251
|
+
- Support for more screen presentation styles (e.g. iOS modal sheet, page sheet)
|
|
252
|
+
- Shared element transitions between arbitrary views
|
|
253
|
+
- Gesture-driven collapse (drag to dismiss)
|
|
254
|
+
- Spring physics configuration props
|
|
255
|
+
|
|
241
256
|
## License
|
|
242
257
|
|
|
243
258
|
MIT
|
package/package.json
CHANGED