react native draw a circle on the map
Here is the working code for anyone else that might be struggling with this:
RADIUS = 500;
class Map extends Component {
state = {
mapRegion: null,
currentLatitude: null,
currentLongitude: null,
LATLNG: {
latitude: -35
longitude: 120
},
}
render() {
return (
<MapContainer>
<MapView
style = { styles.map }
region = { this.state.mapRegion }
showsUserLocation = { true }
followUserLocation = { true }
onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }>
<MapView.Circle
key = { (this.state.currentLongitude + this.state.currentLongitude).toString() }
center = { this.state.LATLNG }
radius = { RADIUS }
strokeWidth = { 1 }
strokeColor = { '#1a66ff' }
fillColor = { 'rgba(230,238,255,0.5)' }
onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }
/>
</MapView>
<MessageBar />
</MapContainer>
)
}
Thank you so much for this! It saved me a lot of time. I was also having issues with adding Components in the MapView. Here's what I've come up with. (Just a simple example in case anyone needs it)
<View style={styles.container} >
<MapView
style={styles.map}
initialRegion={{
latitude: -29.1482491,
longitude: -51.1559028,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<MapView.Circle
center={{
latitude: -29.1471337,
longitude: -51.148951,
}}
radius={20}
strokeWidth={2}
strokeColor="#3399ff"
fillColor="#80bfff"
/>
</MapView>
<View style={styles.allNonMapThings}>
<View style={styles.inputContainer}>
<TextInput
placeholder=" Type some stuff!"
style={ styles.input }
keyboardType="numeric"
/>
</View>
<View style={styles.button} >
<TouchableOpacity >
<Text style = {styles.buttonText} >
Search
</Text>
</TouchableOpacity>
</View>
</View>
</View>