Question 199380 in React native Question posted in
The official React Native documentation can be found here.

React native – How to make a mask with blur effect?

I’m trying to reproduce the following layout in React Native/Expo, I found the @react-native-masked-view/masked-view that seemed, at first glance, to cover my needs.

I need to have a map (I’m using react-native-maps) and cover part of it with some blurry semi-transparent white view.

But I realized it doesn’t properly support semi-transparent masks, because if I use them, any content I put on top of the blur area inherits the mask transparency as well, even if positioned outside the MAskedView component.

Also, it doesn’t seem to support blurring the content behind the mask.

How can I reproduce this on React Native?

Below you can see a mockup to understand what I’m trying to achieve.

mockup

Tags:

2

Answers


  1. 0

    What you ask is not easy. Anyway I found a way which gets close to it:

    <MapView
  style={styles.mapStyle}
  initialRegion={initRegion}
>
  <View style={{ flex: 1 }}>
    <View style={{ flex: 1 }}>
      <BlurView intensity={50} style={[StyleSheet.absoluteFill]}></BlurView>
    </View>
    <View
      style={{
        flex: 1,
        backgroundColor: "transparent",
      }}
    ></View>
  </View>
</MapView>

    This renders a map which is blurred in the upper half and clear in the lower half. Maybe if you play a little with styles, you can obtain what you want!

    Login or Signup to reply.
  2. 0

    Unfortunately, the @react-native-masked-view/masked-view library does not support blurring the content behind the mask, nor does it handle semi-transparent masks well.

    However, there are some other libraries such as @react-native-community/blur that you can try to use instead.

    You can install it with:

    npm install @react-native-community/blur
npx react-native link @react-native-community/blur

    Then you can try this:

    import React from "react";
import { View, Text } from "react-native";
import { BlurView } from "@react-native-community/blur";

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      {/* Map View */}
      <View
        style={{ position: "absolute", top: 0, left: 0, right: 0, height: 100 }}
      >
        <BlurView
          style={{ flex: 1 }}
          blurType="light"
          blurAmount={10}
          reducedTransparencyFallbackColor="white"
        />
        <Text style={{ fontSize: 20 }}>Hello</Text>
      </View>
    </View>
  );
};

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search