title: Change Radius of Circle component in react-native-maps dynamically and update latitudeDelta and longitudeDelta values accordingly
body: <p>I am trying to set radius value in  component dynamically using select. The initial value of the radius is set to '500' when I change it to '1000' the radius of circle changes but when I again select '500' nothing happens.</p>
  <p>Also, how can I control the zoom value of the map so that if the radius of 10km is selected the circle component fits into the screen?</p>
  <p>Code:</p>
  <pre><code>import React, { useState } from 'react';
  import {View, Text, StyleSheet, SafeAreaView, Image } from 'react-native';
  import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
  import {Picker} from '@react-native-community/picker';
  
  import marker from '../assets/icons8-marker.png';
  
  
  const LocationSearchScreen = props =&gt; {
  
      const locParam = props.navigation.getParam('locParam');
  
      const locParamLat = locParam.location.lat;
      const locParamLng = locParam.location.lng;
  
      const [loc, setLoc] = useState({
          latitudeDelta: 0.025,
          longitudeDelta: 0.025,
          latitude: locParam ? locParamLat : 28.6466773,
          longitude: locParam ? locParamLng : 76.813073
      });
  
      const [radius, setRadius] = useState(500);
  
      const regionChangeHandler = (region ) =&gt; {
          setLoc(region);
      }
  
      const radiusChangeHandler = (rad) =&gt; {
          setRadius(rad);
      }
  
      return(
          &lt;View style={styles.screen}&gt;
              &lt;MapView
                  initialRegion={loc}
                  onRegionChangeComplete={regionChangeHandler}
                  style={styles.map}
              &gt;
                  &lt;MapView.Circle
                          key = { (loc.latitude + loc.longitude).toString() }
                          center = { {
                              latitude: loc.latitude,
                              longitude: loc.longitude
                          } }
                          radius = { radius }
                          strokeWidth = { 1 }
                          strokeColor = { '#1a66ff' }
                          fillColor = { 'rgba(230,238,255,0.5)' }
                          //onRegionChangeComplete = { regionChangeHandler }
                  /&gt;
              &lt;/MapView&gt;
              &lt;View style={styles.markerFixed}&gt;
                  &lt;Image style={styles.marker} source={marker} /&gt;
              &lt;/View&gt;
              &lt;SafeAreaView style={styles.locFooter}&gt;
                  {/*===== Radius Container Start =====*/}
  
                  &lt;View style={styles.radContainer}&gt;
                      &lt;Text style={styles.radTitle}&gt;Radius:&lt;/Text&gt;
                      &lt;View  style={styles.radBtnContainer}&gt;
                          &lt;Picker
                              selectedValue={radius}
                              style={{height: 50, width: 100}}
                              onValueChange={(itemValue, itemIndex) =&gt;{
                                  let itemValueNum = Number(itemValue);
                                  radiusChangeHandler(itemValueNum)
                              }}
                          &gt;
                              &lt;Picker.Item label=&quot;500m&quot; value=&quot;500&quot; /&gt;
                              &lt;Picker.Item label=&quot;1Km&quot; value=&quot;1000&quot; /&gt;
                              &lt;Picker.Item label=&quot;2Km&quot; value=&quot;2000&quot; /&gt;
                              &lt;Picker.Item label=&quot;5Km&quot; value=&quot;5000&quot; /&gt;
                              &lt;Picker.Item label=&quot;10Km&quot; value=&quot;10000&quot; /&gt;
                          &lt;/Picker&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
  
                  {/*==== Radius Container End ====*/}
              &lt;/SafeAreaView&gt;
          &lt;/View&gt;
      )
  }
  
  const styles = StyleSheet.create({
      screen: {
          flex: 1
      },
      map: {
          width: '100%',
          height: '80%'
      },
      markerFixed: {
          left: '50%',
          marginLeft: -24,
          marginTop: -48,
          position: 'absolute',
          top: '40%'
      },
      marker: {
          height: 48,
          width: 48
      },
      locFooter: {
          backgroundColor: 'rgb(255, 255, 255)',
          bottom: 0,
          position: 'absolute',
          width: '100%',
          padding: 15,
      },
      radContainer: {
          flex: 1,
          marginBottom: 10
      },
      radTitle: {
          fontSize: 16,
          fontWeight: 'bold',
          marginBottom: 5
      },
      radBtnContainer: {
          flexDirection: 'row',
          flex: 1,
          justifyContent: 'space-between',
          flexWrap: 'wrap'
      }
  })
  
  export default LocationSearchScreen;
  </code></pre>