React Native: Empty circle with background color?

Question

This is what I am trying to do:

I'm trying to put a transparent circle on the map view (like a magnifying glass) with a dark blue overlay on the sides. This is what I have so far (it's purposely black):

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import MapView from 'react-native-maps';

const GEOFENCE_RANGE = 0.01;

const OrderMap = props => {
  return (
    <View style={[props.style, styles.container]} >
      <MapView style={styles.map}
        scrollEnabled={false}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
        }}
      />
      <View style={styles.overlay}>
        <View style={styles.circle}/>
      </View>
    </View>
  )
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  map: {
    flex: 1,
  },
  overlay: {
    backgroundColor: 'rgba(21,31,53, 0.5)',
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
  circle: {
    backgroundColor: 'black', // <---------------------------
    borderRadius: 100,
    alignSelf: 'stretch',
    flex: 1,
    margin: 50,
  }
});

export default OrderMap;

When I try to change styles.overlay to use backgroundColor: 'transparent', it just makes the whole thing dark blue.

Is there a way to do this?

P.S. I'm using react native maps https://github.com/airbnb/react-native-maps

Answer 1

I have tried the above examples but failed to produce any meaningful outcome. So, after a little bit of tinkering, I have managed to solve the issue and able to make a transparent circle with background image. Here is the full working code with screenshot.

Hope this will help someone ending up here.

import React from 'react'
import {
  StyleSheet,
  View,
  ImageBackground,
} from 'react-native';
import { Svg, Defs, Rect, Mask, Circle } from 'react-native-svg';

const SvgCircle = (props) => {
  return (
    <Svg height="100%" width="100%">
      <Defs>
        <Mask id="mask" x="0" y="0" height="100%" width="100%">
          <Rect height="100%" width="100%" fill="#fff" />
          <Circle r="30%" cx="50%" cy="50%"
            fill="black"
          />
        </Mask>
      </Defs>
      <Rect height="100%" width="100%" fill="rgba(0, 0, 0, 0.8)" mask="url(#mask)" fill-opacity="0" />
    </Svg>
  );
}

const App = (props) => {
  return (
    <View style={styles.container}>
      <ImageBackground source={require('./assets/img.jpg')} style={styles.image}>
        <SvgCircle />
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
  text: {
    color: "grey",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default App;

Answer 2

All I could figure out - as an easy way - is to do png with overlay and transparent circle on it.

Here's an example with image as background: https://rnplay.org/apps/mA780Q

Also notice that you need to set pointerEvents={'none'} property for circle image.