> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/expo/expo/llms.txt
> Use this file to discover all available pages before exploring further.

# expo-blur

> Native blur effect component for iOS with Android fallback

# expo-blur

**Version:** 55.0.6

A component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. Commonly used for navigation bars, tab bars, and modals.

## Installation

```bash theme={null}
npx expo install expo-blur
```

## Usage

```tsx theme={null}
import { BlurView } from 'expo-blur';
import { Text, StyleSheet } from 'react-native';

function App() {
  return (
    <BlurView intensity={80} style={styles.blurContainer}>
      <Text>Content with blur background</Text>
    </BlurView>
  );
}

const styles = StyleSheet.create({
  blurContainer: {
    padding: 20,
    borderRadius: 10
  }
});
```

## API Reference

### BlurView Props

<ParamField path="intensity" type="number" default="50">
  Blur intensity from 0 (no blur) to 100 (maximum blur)

  ```tsx theme={null}
  <BlurView intensity={80}>
    <Text>Blurred content</Text>
  </BlurView>
  ```
</ParamField>

<ParamField path="tint" type="'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemMaterial' | 'systemThickMaterial' | 'systemThinMaterial' | 'systemUltraThinMaterial' | 'systemChromeMaterial'" default="default">
  Tint style for the blur effect

  * `light`: Light blur (iOS: light, Android: white overlay)
  * `dark`: Dark blur (iOS: dark, Android: dark overlay)
  * `default`: System default
  * Material styles: iOS 13+ specific blur materials

  ```tsx theme={null}
  <BlurView tint="dark" intensity={80}>
    <Text style={{ color: 'white' }}>Dark blur</Text>
  </BlurView>
  ```
</ParamField>

<ParamField path="style" type="ViewStyle">
  Standard React Native view style

  ```tsx theme={null}
  <BlurView style={{ flex: 1, padding: 20 }} />
  ```
</ParamField>

<ParamField path="experimentalBlurMethod" type="'none' | 'dimezisBlurView'" platform="android">
  **Android only**: Experimental blur implementation

  * `none`: Default semi-transparent overlay
  * `dimezisBlurView`: Real blur effect (experimental)

  ```tsx theme={null}
  <BlurView 
    experimentalBlurMethod="dimezisBlurView"
    intensity={80}
  />
  ```
</ParamField>

## Examples

### Basic Blur Overlay

```tsx theme={null}
import { BlurView } from 'expo-blur';
import { ImageBackground, Text, StyleSheet } from 'react-native';

function App() {
  return (
    <ImageBackground 
      source={require('./background.jpg')} 
      style={styles.background}
    >
      <BlurView intensity={90} style={styles.blurContainer}>
        <Text style={styles.text}>Blurred Overlay</Text>
      </BlurView>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  blurContainer: {
    padding: 40,
    borderRadius: 20,
    overflow: 'hidden'
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000'
  }
});
```

### Light and Dark Blur

```tsx theme={null}
import { BlurView } from 'expo-blur';
import { View, Text, StyleSheet } from 'react-native';

function BlurExample() {
  return (
    <View style={styles.container}>
      <BlurView intensity={80} tint="light" style={styles.blur}>
        <Text style={styles.darkText}>Light Blur</Text>
      </BlurView>
      
      <BlurView intensity={80} tint="dark" style={styles.blur}>
        <Text style={styles.lightText}>Dark Blur</Text>
      </BlurView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    gap: 20
  },
  blur: {
    padding: 20,
    borderRadius: 10,
    overflow: 'hidden'
  },
  darkText: {
    color: '#000',
    fontSize: 18
  },
  lightText: {
    color: '#fff',
    fontSize: 18
  }
});
```

### Bottom Tab Bar

```tsx theme={null}
import { BlurView } from 'expo-blur';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

function TabBar() {
  return (
    <BlurView intensity={95} tint="light" style={styles.tabBar}>
      <TouchableOpacity style={styles.tab}>
        <Text>🏠</Text>
        <Text style={styles.tabLabel}>Home</Text>
      </TouchableOpacity>
      
      <TouchableOpacity style={styles.tab}>
        <Text>🔍</Text>
        <Text style={styles.tabLabel}>Search</Text>
      </TouchableOpacity>
      
      <TouchableOpacity style={styles.tab}>
        <Text>⚙️</Text>
        <Text style={styles.tabLabel}>Settings</Text>
      </TouchableOpacity>
    </BlurView>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    flexDirection: 'row',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: 'rgba(0,0,0,0.1)'
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    gap: 4
  },
  tabLabel: {
    fontSize: 12,
    color: '#000'
  }
});
```

### Modal with Blur Background

```tsx theme={null}
import { BlurView } from 'expo-blur';
import { Modal, View, Text, Button, StyleSheet } from 'react-native';
import { useState } from 'react';

function App() {
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={() => setVisible(true)} />
      
      <Modal
        visible={visible}
        transparent
        animationType="fade"
        onRequestClose={() => setVisible(false)}
      >
        <BlurView intensity={90} tint="dark" style={styles.modalBackground}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>Modal Title</Text>
            <Text style={styles.modalText}>This is a modal with blurred background</Text>
            <Button title="Close" onPress={() => setVisible(false)} />
          </View>
        </BlurView>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  modalBackground: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 20,
    gap: 15,
    minWidth: 300
  },
  modalTitle: {
    fontSize: 24,
    fontWeight: 'bold'
  },
  modalText: {
    fontSize: 16
  }
});
```

### Navigation Header

```tsx theme={null}
import { BlurView } from 'expo-blur';
import { View, Text, StyleSheet, SafeAreaView } from 'react-native';

function Screen() {
  return (
    <View style={styles.container}>
      <BlurView intensity={95} tint="light" style={styles.header}>
        <SafeAreaView>
          <View style={styles.headerContent}>
            <Text style={styles.headerTitle}>Screen Title</Text>
          </View>
        </SafeAreaView>
      </BlurView>
      
      {/* Screen content */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: 'rgba(0,0,0,0.1)'
  },
  headerContent: {
    height: 44,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '600',
    color: '#000'
  }
});
```

### Card with Blur Effect

```tsx theme={null}
import { BlurView } from 'expo-blur';
import { ImageBackground, Text, StyleSheet } from 'react-native';

function Card() {
  return (
    <ImageBackground 
      source={require('./card-bg.jpg')} 
      style={styles.card}
      imageStyle={styles.cardImage}
    >
      <BlurView intensity={70} tint="dark" style={styles.cardContent}>
        <Text style={styles.cardTitle}>Card Title</Text>
        <Text style={styles.cardDescription}>
          This card has a blurred background overlay
        </Text>
      </BlurView>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  card: {
    width: '100%',
    height: 200,
    borderRadius: 15,
    overflow: 'hidden'
  },
  cardImage: {
    borderRadius: 15
  },
  cardContent: {
    flex: 1,
    padding: 20,
    justifyContent: 'flex-end'
  },
  cardTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 8
  },
  cardDescription: {
    fontSize: 14,
    color: '#fff',
    opacity: 0.9
  }
});
```

### iOS Material Styles

```tsx theme={null}
import { BlurView } from 'expo-blur';
import { ScrollView, View, Text, StyleSheet } from 'react-native';

function MaterialShowcase() {
  const materials: Array<{
    tint: any;
    label: string;
  }> = [
    { tint: 'systemMaterial', label: 'System Material' },
    { tint: 'systemThickMaterial', label: 'Thick Material' },
    { tint: 'systemThinMaterial', label: 'Thin Material' },
    { tint: 'systemUltraThinMaterial', label: 'Ultra Thin' },
    { tint: 'systemChromeMaterial', label: 'Chrome Material' },
  ];

  return (
    <ScrollView style={styles.container}>
      {materials.map((material) => (
        <BlurView 
          key={material.label}
          intensity={100} 
          tint={material.tint}
          style={styles.materialCard}
        >
          <Text style={styles.materialLabel}>{material.label}</Text>
        </BlurView>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  materialCard: {
    padding: 20,
    marginBottom: 15,
    borderRadius: 10,
    overflow: 'hidden'
  },
  materialLabel: {
    fontSize: 16,
    fontWeight: '600'
  }
});
```

## TypeScript

```typescript theme={null}
import { BlurView } from 'expo-blur';
import type { BlurTint } from 'expo-blur';

const tint: BlurTint = 'dark';
const intensity: number = 80;

<BlurView tint={tint} intensity={intensity} />;
```

## Platform Support

| Platform | Blur Effect           | Fallback                 |
| -------- | --------------------- | ------------------------ |
| iOS      | ✅ Native              | -                        |
| Android  | 🚧 Experimental       | Semi-transparent overlay |
| Web      | ✅ CSS backdrop-filter | Semi-transparent overlay |

<Note>
  **iOS**: Uses `UIVisualEffectView` for native blur

  **Android**: By default, renders a semi-transparent view. Use `experimentalBlurMethod="dimezisBlurView"` for real blur (may have performance issues)

  **Web**: Uses CSS `backdrop-filter` with fallback for unsupported browsers
</Note>

## Best Practices

1. **Use Overflow Hidden**: Always add `overflow: 'hidden'` to parent containers with `borderRadius`
2. **Performance**: Blur effects can be expensive on Android; use sparingly
3. **Intensity**: Start with 80-90 intensity for good visual effect
4. **Tint Selection**: Match tint with content color (dark tint for light text)
5. **Test on Android**: Always test Android fallback appearance

<Warning>
  Avoid animating BlurView intensity or nesting multiple BlurViews, as this can cause performance issues.
</Warning>

## Resources

* [Official Documentation](https://docs.expo.dev/versions/latest/sdk/blur-view/)
* [GitHub Repository](https://github.com/expo/expo/tree/main/packages/expo-blur)