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?

CodePudding user response：

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>
    
  );
};

CodePudding user response：

This worked for me, adding overflow and centering with alightItems

            <View style={{ 
                height: moderateScale(300) - 60, 
                zIndex: -1, 
                borderRadius: 10, 
                borderWidth: 1, 
                borderColor: userInterface.buttonSelectedFill, 
                overflow: 'hidden',
                alignItems: 'center',
                justifyContent: 'center'}}>

                <MapView 
                    style={{flex: 1, height: '100%', width: '100%', borderRadius: 10, }} 
                    //ref={ map => {currentMap = map }}
                    //region={props.region}
                    rotateEnabled={false}
                    loadingEnabled={true}
                ></MapView>                
            </View>