Drag across a layered scene: near layers slide further while it tilts in 3D.
Pro<ParallaxLayers />3 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| children Layers, back to front. | ParallaxLayer[] | — |
| height Scene height. | number | 260 |
| travel How far a depth-1 layer moves, in points. | number | 22 |
| tilt Scene tilt in degrees; 0 for flat parallax. | number | 8 |
| idle Drift on its own while untouched. | boolean | true |
| clip Clip layers to the scene's rounded box. | boolean | true |
| accessibilityLabel Describes the scene for screen readers. | string | — |
| radius Corner radius of the scene. | number | 24 |
| style Style for the scene. | StyleProp<ViewStyle> | — |
| ParallaxLayer.depth 0 stays put, 1 moves the full travel, negative moves the other way. | number | 0.5 |
| ParallaxLayer.scale Extra scale; far layers (depth ≤ 0.35) grow just enough to hide their edges. | number | far layers grow slightly |
| ParallaxLayer.style Style for the layer (it fills the scene). | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- The finger position steers the scene and release springs it back to centre. A parent ScrollView can still take over a scroll that starts on it.
- Motion
- Each layer moves by its depth times travel while the whole scene tilts in perspective. Left alone, it drifts slowly on a loop.
- Screen readers
- With accessibilityLabel the scene is one image element with that label; without it, it is not exposed.
- Platforms
- Transforms run on the native driver with PanResponder, so it works on iOS, Android and web with no native modules.
Source
Did you like the content?