Summary

This post demonstrates how to create a stencil-style cutout effect in Expo/React Native: use the live camera as a background and reveal it only through text or UI shapes by combining Expo Camera, MaskedView, and Expo Blur. The pattern renders the camera feed behind a frosted layer and uses a mask to show the feed through specific regions (e.g., text, icons, or custom SVG shapes).

Key Points

• Mount Camera as a full-size background view and keep its frame behind your UI.
• Wrap the camera (or a blurred version of it using BlurView) inside MaskedView and provide a maskElement that defines the visible cutout areas (text, shapes, SVGs).
• Use simple opaque mask shapes for the visible areas and transparent elsewhere; animated masks can be achieved with Animated values if you need motion.
• Performance tips: lower camera resolution or throttle frame updates for mobile; prefer static masks or hardware-accelerated transforms; test on both iOS and Android for mask behavior.
• Keep accessibility in mind: ensure masked content still makes sense for screen readers and provide fallbacks if the camera permission is denied.

Implementation notes

• Typical structure: place Camera as the child of MaskedView (or place a BlurView over the camera and then mask that blurred layer). Use maskElement to render the cutout shapes (text, icons, or react-native-svg paths).
• Handle runtime permissions for the camera and provide a static background fallback when unavailable.

This pattern creates a dynamic, visually striking background while keeping the implementation modular and performant for production apps.