Customizing my location button in airbnb/react-native-maps

Question

I have used airbnb/react-native-maps for designing a tracking based apps. I have designed a custom search box. But the problem is, the search box overlaps my location button. Is there any way to customize my location button and changing its alignment position? I have attached a photo for more specification.

Here is the sample code which I have used

 <MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    region={{
        latitude: this.props.initialPosition.latitude,
        longitude: this.props.initialPosition.longitude,
        latitudeDelta: Latitude_Delta,
        longitudeDelta: Longitude_Delta
    }}
    zoomEnabled={true}
    minZoomLevel={5}
    maxZoomLevel={20}
    showsMyLocationButton={true}
    showsUserLocation={true}
    ... ... ...
   >
   {... ... ... ...}
 </MapView>

Disgust

figured it out yet? – Wills

Answer 1

A quick solution would be to add a padding to the top of your map with the height of your custom-search-box to push the myLocationButton below it.

I went through its Docs but could't find any way to customize its position or alignment.

There is a similar issue in the github regarding this raised more than 6 months ago which suggests the similar solution:

https://github.com/airbnb/react-native-maps/issues/1094

Abbyabbye

I have seen that issue. But in my case it is not appropriate. Moreover I just want to customize myLocationButton . And need help to do that – Disgust