ZoomTransition
A push that grows out of the view it was opened from, and shrinks back into it.
Import
import {ZoomTransition, ZOOM_TRANSITION_PARAM, useZoomTransitionParam, useZoomTransitionSourceId, withZoomTransition} from '@hzblj/kara-ui/router'ZoomTransition.Source
| Prop | Type | Description |
|---|---|---|
| children* | ReactElement | A single view — the photo or card the zoom grows from. |
| android | ZoomTransitionSourceAndroidOptions | Android-only settings. |
| identifier | string | Unset renders |
A single view — the photo or card the zoom grows from.
Android-only settings.
Unset renders children alone: no zoom from here. Use useZoomTransitionSourceId for one unique per item.
ZoomTransition.Enabler
| Prop | Type | Description |
|---|---|---|
| android | ZoomTransitionEnablerAndroidOptions | Android-only settings: Material's container transform. |
| ios | ZoomTransitionEnablerIosOptions | iOS-only settings: UIKit's zoom. |
| scrim | ColorToken | Laid over the screen behind the zoomed one. Unset: UIKit's own dimming on iOS, none on Android. |
| sourceIdentifier | string | The source's identifier, handed over in the route params. Unset renders nothing: the push stays the stack's own. |
Android-only settings: Material's container transform.
iOS-only settings: UIKit's zoom.
Laid over the screen behind the zoomed one. Unset: UIKit's own dimming on iOS, none on Android.
The source's identifier, handed over in the route params. Unset renders nothing: the push stays the stack's own.
ZoomTransition.Target
| Prop | Type | Description |
|---|---|---|
| children* | ReactElement | A single view — what the source lands on in the pushed screen. |
| android | ZoomTransitionTargetAndroidOptions | Android-only settings. |
| identifier | string | The source's identifier, handed over in the route params. Unset renders |
| ios | ZoomTransitionTargetIosOptions | iOS-only settings. |
A single view — what the source lands on in the pushed screen.
Android-only settings.
The source's identifier, handed over in the route params. Unset renders children alone.
iOS-only settings.
Platform notes
- iOS 18: UIKit’s zoom transition, with the interactive dismissal. Below iOS 18 the push stays a slide. Android: Material’s container transform, both ways.
- Three pieces tied by one identifier, which travels in the route params.
- The enabler renders first and unconditionally — behind a loading state, the push is already a slide.
- Zooming into a modal, give it no native header on iOS: a modal’s bar lives in a nested stack, which the zoom does not reach. Draw a close of your own; a drag down closes it too.
- Settings both platforms honour sit at the top; the rest is typed apart under
iosandandroid.