reactjs - react native Map not update details, when zoom -

i have problem in react native maps. want add google map in application & when zoom map, map detail show more detail road.. google maps in website.

the problem is, when zoom map. map zoom, not re render component, map detail still same. change state when longitude & latitude changed, map still same. have idea solving problem?

thank you

import react, { component } 'react' import { view, text, stylesheet, touchableopacity, dimensions } 'react-native' import { connect } 'react-redux' import mapview 'react-native-maps'  import * actiontypes '../actions/constant.js' import sampledata '../helper/sampledata.js' // import mapstyle '../helper/mapstyle.json'  const { width, height } = dimensions.get('window') const aspect_ratio = width / height const latitude_delta = 0.0922 const longitude_delta = latitude_delta * aspect_ratio  class getgeolocation extends component {   constructor (props) {     super(props)     this.state = {       region: {         latitude: null,         longitude: null,         latitudedelta: number(0.0922),         longitudedelta: number(0.0922 * aspect_ratio)       }     }   }    componentdidmount () {     navigator.geolocation.getcurrentposition(       (position) => {         this.props.getlocation(position)         this.setstate({           region: {             latitude: this.props.datalocation.latitude,             longitude: this.props.datalocation.longitude,             latitudedelta: number(0.0922),             longitudedelta: number(0.0922 * aspect_ratio)           }         })       },       (error) => { this.setstate({ error: error.message }) },       { enablehighaccuracy: true, timeout: 20000, maximumage: 1000 }     )   }    handleregionchange (newregion) {     // console.log('handle region change: ', newregion)     this.setstate({       region: {         latitude: newregion.latitude,         longitude: newregion.longitude,         latitudedelta: number(newregion.latitudedelta),         longitudedelta: number(newregion.latitudedelta * aspect_ratio)       }     })   }    render () {     // const _this =     return (       <view style={styles.container}>         {this.state.error ? <text>error: { this.state.error } </text> : null}         { (this.state.region.latitude) ? (           <mapview             provide={'googlemaps'}             style={styles.map}             showsbuildings             loadingenabled             scrollenabled             zoomenabled             initialregion={{               latitude: this.state.region.latitude,               longitude: this.state.region.longitude,               latitudedelta: this.state.region.latitudedelta,               longitudedelta: this.state.region.longitudedelta             }}             onregionchangecomplete={(region) => this.handleregionchange(region)}              >             <mapview.marker               coordinate={{                 latitude: this.props.datalocation.latitude,                 longitude: this.props.datalocation.longitude               }}               pincolor={'blue'}               title='u location'               description='u handsome'             />             {/*tambah lokasi marker*/ }             { sampledata.map((item, index) => {               return (                 <mapview.marker                   key={index}                   coordinate={{                     latitude: item.latitude,                     longitude: item.longitude                   }}                   pincolor={'red'}                   title={item.title}                   description={item.description}                 />               )             }) }           </mapview>) : (             <view style={styles.map}>               <text>get u location..</text>             </view>           )}         <touchableopacity           onpress={() => this.animaterandom()}           style={[styles.bubble, styles.button]}>           <text>test</text>         </touchableopacity>         <text>latitude: {this.props.datalocation.latitude}</text>         <text>longitude: {this.props.datalocation.longitude}</text>          <text>latitude coy!!!: {this.state.region.latitude}</text>         <text>longitude coy!!!: {this.state.region.longitude}</text>       </view>     )   } }  const mapstatetoprops = (state) => {   return {     datalocation: state.location   } }  const mapdispatchtoprops = (dispatch) => {   return {     getlocation: (results) => dispatch({       type: actiontypes.get_location,       payload: results     })   } } const styles = stylesheet.create({   container: {     ...stylesheet.absolutefillobject,     height: 400,     width: 400,     justifycontent: 'flex-end',     alignitems: 'center'   },   map: {     ...stylesheet.absolutefillobject   },   bubble: {     backgroundcolor: 'rgba(255,255,255,0.7)',     paddinghorizontal: 18,     paddingvertical: 12,     borderradius: 20   },   button: {     width: 80,     paddinghorizontal: 12,     alignitems: 'center',     marginhorizontal: 10   } })  export default connect(mapstatetoprops, mapdispatchtoprops)(getgeolocation)