Blur the background behind a modal in React Native

Dim and blur the screen behind a modal, popup or bottom sheet while the modal content stays sharp, on both iOS and Android.

GitHubnpmChangelogllms.txt

Install

React Native CLI

npm install @nguyenduy1412/react-native-blur
cd ios && pod install

Rebuild the app. Autolinking picks the library up; no Expo packages are needed.

Expo

npx expo install @nguyenduy1412/react-native-blur
npx expo run:ios
npx expo run:android

It contains native code, so it does not run in Expo Go. Use a development build or EAS Build.

In-screen overlay (iOS and Android)

Render the overlay in the same screen, absolutely positioned, and put a backdrop BlurView behind its content:

import BlurView from "@nguyenduy1412/react-native-blur";

<View style={{ flex: 1 }}>
  <Screen />
  {visible && (
    <View style={StyleSheet.absoluteFill}>
      <Pressable style={StyleSheet.absoluteFill} onPress={close}>
        <BlurView mode="backdrop" intensity={60} tint="dark" style={StyleSheet.absoluteFill} />
      </Pressable>
      <ModalCard />
    </View>
  )}
</View>

Animate the blur in

Keep the BlurView mounted and drive intensity; every value from 0 to 100 is a real blur, not an opacity fade.

const [intensity, setIntensity] = useState(0);
useEffect(() => setIntensity(visible ? 60 : 0), [visible]);

<BlurView mode="backdrop" intensity={intensity} style={StyleSheet.absoluteFill} />

Bottom sheet backdrop

Libraries such as @gorhom/bottom-sheet render in the same window, so a backdrop BlurView works as the sheet's backdrop component:

<BottomSheet
  backdropComponent={({ style }) => (
    <BlurView mode="backdrop" intensity={50} tint="systemMaterial" style={[style, StyleSheet.absoluteFill]} />
  )}
>
  {content}
</BottomSheet>

Inside React Native <Modal>

Backdrop mode also works inside <Modal transparent> on iOS and Android. Keep the modal's root view transparent, or the blur only sees that background:

<Modal transparent visible={visible}>
  <View style={{ flex: 1 }}>
    <BlurView mode="backdrop" intensity={60} tint="dark" style={StyleSheet.absoluteFill} />
    <ModalCard />
  </View>
</Modal>

On Android a <Modal> is a separate window. The library copies the activity window behind it with PixelCopy (about 30 fps, half resolution) and blurs the copy, so the screen behind the modal is blurred like on iOS.

FAQ