The latest articles on DEV Community by Nguyễn Ngọc Duy (@nguyn_ngcduy_266304752). https://dev.to/nguyn_ngcduy_266304752 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4169429%2F868d92be-6d4d-42bd-8eaa-49f743059e3d.png https://dev.to/nguyn_ngcduy_266304752 en Nguyễn Ngọc Duy Wed, 07 Oct 2026 16:09:38 +0000 https://dev.to/nguyn_ngcduy_266304752/how-to-blur-playing-videos-on-android-in-react-native-without-skia-or-workarounds-40d8 https://dev.to/nguyn_ngcduy_266304752/how-to-blur-playing-videos-on-android-in-react-native-without-skia-or-workarounds-40d8 <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftko7ohe16hg1xg18ag60.webp" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftko7ohe16hg1xg18ag60.webp" alt="Backdrop Blur Demo" width="200" height="196"></a><br> <em>Backdrop blur on iOS and Android: frosted button over a playing video, frosted popup over a map, and frosted sticky header over a scrolling list.</em></p> <h2> The Problem: Why Video Escapes The Blur on Android </h2> <p>On iOS, <code>UIVisualEffectView</code> handles blur at the system compositor level, blurring everything underneath—including live video.</p> <p>On Android, players like <code>expo-video</code> and <code>react-native-video</code> default to <strong><code>SurfaceView</code></strong> for hardware playback:</p> <ul> <li>The WindowManager punches a hole in the app window.</li> <li>Video frames are composited directly by Android's <code>SurfaceFlinger</code> outside the standard View hierarchy.</li> <li>Standard blur libraries (which rely on taking snapshots of the View tree) <strong>cannot see the SurfaceView</strong>. The video stays 100% sharp behind the glass.</li> </ul> <h2> The Logic: Native PixelCopy + RenderEffect </h2> <p>To solve this in <strong><code>@nguyenduy1412/react-native-blur</code></strong>, we implemented a native pipeline for the New Architecture (Fabric):</p> <ol> <li> <strong><code>PixelCopy</code> Frame Capture:</strong> The native view finds child <code>SurfaceView</code> instances, captures frames via Android's <code>PixelCopy</code> API (downscaled 4× at ~30 FPS on a worker thread), and replaces the transparent hole with the captured stream.</li> <li> <strong><code>RenderEffect</code> Blur (Android 12+):</strong> Applies a hardware-accelerated Gaussian blur to the stream on the GPU.</li> <li> <strong>Color Matrix Calibration:</strong> Gaussian blurs wash out luminance and contrast. We recreated Apple's internal <code>.materialrecipe</code> specs using a <code>ColorMatrix</code> chain. It matches native iOS materials with a mean color error of only <strong>1.95 / 255</strong> (instead of a flat, washed-out grey tint).</li> </ol> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftw5xg86r6swpelii7fil.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftw5xg86r6swpelii7fil.jpg" alt="Color Calibration Comparison" width="800" height="413"></a><br> <em>Four ways: No blur, this library on Android, this library on iOS, and standard Expo blur on Android.</em></p> <h2> Quick Comparison </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Feature</th> <th><code>@nguyenduy1412/react-native-blur</code></th> <th><code>expo-blur</code></th> <th><code>@react-native-community/blur</code></th> </tr> </thead> <tbody> <tr> <td><strong>New Architecture (Fabric)</strong></td> <td>✅ Native Fabric Component</td> <td>⚠️ Expo Module</td> <td>❌ Deprecated / Legacy Bridge</td> </tr> <tr> <td><strong>Blurs Playing Video (Android SurfaceView)</strong></td> <td>✅ Yes (<code>PixelCopy</code> + <code>RenderEffect</code>)</td> <td>❌ Video stays sharp</td> <td>❌ Video stays sharp</td> </tr> <tr> <td><strong>Backdrop Overlays (Headers, Popups)</strong></td> <td>✅ Yes (<code>mode="backdrop"</code>)</td> <td>⚠️ Limited / Tint only</td> <td>⚠️ Inconsistent</td> </tr> <tr> <td><strong>iOS Material Match on Android</strong></td> <td>✅ Color-calibrated (1.95/255 error)</td> <td>❌ Flat grey tint</td> <td>❌ Flat grey tint</td> </tr> <tr> <td><strong>Works with RN CLI &amp; Expo</strong></td> <td>✅ Standalone Fabric library</td> <td>⚠️ Primarily Expo</td> <td>⚠️ Complex setup</td> </tr> </tbody> </table></div> <h2> Code &amp; Documentation </h2> <p>Full installation instructions, props API, and examples are available on GitHub and npm:</p> <ul> <li>⭐️ <strong>GitHub:</strong> <a href="https://github.com/nguyenduy1412/react-native-blur" rel="noopener noreferrer">https://github.com/nguyenduy1412/react-native-blur</a> </li> <li>📦 <strong>npm:</strong> <a href="https://www.npmjs.com/package/@nguyenduy1412/react-native-blur" rel="noopener noreferrer">https://www.npmjs.com/package/@nguyenduy1412/react-native-blur</a> </li> </ul> reactnative android ios webdev