Blur

React Native · Reference cheat sheet

📋 Overview

Blurred glass effects use platform views: Expo @react-native-community/blur alternatives or expo-blur (BlurView). Common for headers, tab bars, and modal scrims. Performance varies—avoid huge animated blurs on low-end Android.

🔧 Core concepts

Blur only affects views behind it in the native hierarchy—not React siblings painted later without proper ordering.

💡 Examples

import { BlurView } from "expo-blur";
import { StyleSheet, Text, View } from "react-native";

export function FrostedHeader({ title }: { title: string }) {
  return (
    <View style={styles.wrap}>
      <BlurView intensity={60} tint="light" style={StyleSheet.absoluteFill} />
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    height: 56,
    justifyContent: "center",
    paddingHorizontal: 16,
    overflow: "hidden",
  },
  title: { fontSize: 17, fontWeight: "600" },
});

Config plugin (Expo): ensure expo-blur is installed; prebuild if needed.

⚠️ Pitfalls

• Expecting BlurView to blur its own children—it blurs what’s behind.
• Heavy blur + frequent re-renders → jank on Android.
• Missing fallback UI on web/unsupported targets.
• Stacking multiple full-screen blurs.

🔗 Related

• styling.md — translucent UI
• modal.md — overlays
• navigation.md — translucent headers
• Expo config — plugins
• animation.md — animated opacity