expo-motion-blur
Native Motion Blur for Android & iOS
https://github.com/user-attachments/assets/77cb3937-59c4-4eb8-b522-1c9b5352c7aa
Installation
npx expo install expo-motion-blur
This package contains native code and requires a development build. It is not supported in Expo Go.
Usage
Wrap any moving content in MotionBlurView. The blur follows the view's on-screen velocity, whatever is driving it.
import { MotionBlurView } from 'expo-motion-blur';
<MotionBlurView intensity={40} speedForMaxBlur={1500}>
<Card />
</MotionBlurView>;
API
MotionBlurView accepts all View props, plus the following:
| Prop | Type | Default | Description |
|---|---|---|---|
intensity |
number |
40 |
Maximum streak length, in points, on each side of the content. |
speedForMaxBlur |
number |
1500 |
Speed, in points per second, at which intensity is reached. |
samples |
number |
32 |
Texture reads per pixel (4–64). Higher values are smoother but cost more. |
enabled |
boolean |
true |
When false, children render as in a plain View. |
live |
boolean |
false |
Re-captures children every frame. Use for content that changes mid-motion. |
Platform support
| Platform | Behavior |
|---|---|
| iOS / tvOS 16.4+ | Per-pixel Metal shader |
| Android 13+ | Per-pixel runtime shader |
| Android 12 | Directional blur along the view's center of motion |
| Android 11 and below, Web | No blur; children render normally |
License
MIT