How to make a mask with blur effect?

Question

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.

Answer 1

I have nearly achieved what you needed. Nearly because react-native-svg currently doesn't support filters and @react-native-community/blur doesn't work with react-native-maps as pointed out by Rohit S K in comments. We are using SVG shape. Just understand this cubic cruves from mozilla and you will be able to control it more as per your needs. Here is the code of my App.tsx file

    import React, {JSX} from 'react';
    import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
    
    import {Colors} from 'react-native/Libraries/NewAppScreen';
    import {BlurView} from '@react-native-community/blur';
    import MapView from 'react-native-maps';
    import Svg, {Path} from 'react-native-svg';
    
    function App(): JSX.Element {
      return (
        <SafeAreaView style={styles.safeArea}>
          <StatusBar
            backgroundColor="rgba(245,245,245,0.3)"
            barStyle={'dark-content'}
          />
          <MapView
            style={styles.mapView}
            initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
          />
          <View style={styles.svgWrapper}>
            <Svg
              preserveAspectRatio="xMinYMax slice"
              height="100%"
              width="100%"
              viewBox="0 0 100 100">
              <Path
                d="M 0 85 C 20 60, 80 60, 100 85 L 100 0 0 0"
                fill="rgba(255,255,255,0.5)"
              />
              <Path
                d="M 0 85 C 20 60, 80 60, 100 85"
                stroke="rgba(221,221,221,1)"
                strokeWidth={0.5}
                fill="transparent"
              />
            </Svg>
            <BlurView
              style={styles.blurView}
              blurType="light"
              blurAmount={10}
              reducedTransparencyFallbackColor="white"
            />
          </View>
        </SafeAreaView>
      );
    }
    
    const styles = StyleSheet.create({
      safeArea: {
        backgroundColor: Colors.lighter,
        height: '100%',
        position: 'relative',
      },
      mapView: {
        minHeight: '100%',
      },
      blurView: {
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
      },
      svgWrapper: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        width: '100%',
        height: '55%',
        aspectRatio: 1,
      },
    });
    export default App;

Here is the screenshot.

Update

As pointed out by Nikolas Charalambidis, there's a flaw in this solution. The background isn't blurred, so it's an incomplete solution. I hope that someone comes up with a better solution or we wait for react-native-svg to support filters or @react-native-community/blur to work with maps.