Can't make react-native-maps with borderRadius

Issue

I'm working with react native and i want to add borderRadius into my google map view but didn't work

<View
        style={{
          backgroundColor: "#fff",
          flex: 1,
          borderRadius: 30,
          margin: 20,
        }}
      >
        <Map />
      </View>
      <View
        style={{
          marginTop: 40,        
          flexDirection: "column",
          justifyContent: "center",
          height: 300,
          width: 370,
        }}
      >

Map Component :

const Map = () => {
  return (
    <MapView
      style={tw`flex-1`}
      customMapStyle={mapStyle}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
  );
};

result here

So how can i do that correctly?

Solution

You should map the component in a view have a borderRadius and overflow propert set to "hidden" like this :

const Map = () => {
  return (

    <View
      style={
        borderRadius: 50,
        overflow: "hidden"
      }
    >
      <MapView
        style={tw`flex-1`}
        customMapStyle={mapStyle}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
    
  );
};

Answered By - Wawa