How to give border radius to map in react native?

Question

MapView inside a container view

<View style={styles.container}>
  <MapView style={[styles.map]}
    initialRegion={{
      latitude: 18.978189,
      longitude: 73.024911,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
</View>

To give curved border to my map i gave borderRadius to the container view

const styles = {
 container:{
   marginTop:20,
   borderWidth:1,
   borderRadius:20
 },
 map:{
   height:200,
 },
}

This gave border to my view and my view is actually getting the borderRadius, i cross checked it by giving borderWidth:1. But my map is not getting this border of container. Maps corner get out of the container views border. What should i do to give borderRadius to my map.

Answer 1

You can set

overflow: 'hidden' 

in your container. It should hide the overflow of the mapView.