Expo

Documentation

BlurView

A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
Platform Compatibility
Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

For managed apps, you'll need to run expo install expo-blur. To use it in a bare React Native app, follow its installation instructions.

import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { BlurView } from 'expo-blur';
const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png';

export default class BlurViewExample extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={{ width: 192, height: 192 }} source={{ uri }} />

        {/* Adjust the tint and intensity */}
        <BlurView tint="light" intensity={50} style={styles.notBlurred}>
          <Image style={{ width: 96, height: 96 }} source={{ uri }} />
        </BlurView>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  notBlurred: {
    ...StyleSheet.absoluteFill,
    top: Constants.statusBarHeight,
  }
});

import { BlurView } from 'expo-blur';

  • tint (string) -- light, default or dark.
  • intensity (number) -- A number from 1 to 100 to control the intensity of the blur effect.