react-native-maps: showsMyLocationButton not showing up on Android

onMapReady={() => this.setState({ bottomPadding: 0 })}

Doesn’t work for me. But it works with margin. Thank you!

_onMapReady = () => this.setState({marginBottom: 0})

.........

<MapView
    style={{flex: 1, marginBottom: this.state.marginBottom}}
    onMapReady={this._onMapReady}

And this.state.marginBottom’s initial value should be 1.

I tried @2DKot solution but it doesn’t work for me. After few hours trying everything, I came up with a similar solution:

` constructor(props){ super(props); this.state= { mapMargin:1 } }

setMargin = () => { this.setState({mapMargin:0}) }

<MapView style={{marginBottom: this.state.mapMargin}} region={{ //Put your coords here }} showsUserLocation provider=“google” showsMyLocationButton onMapReady={this.setMargin} > </MapView> ` I tried this in 3 different Android devices and it worked. It should look something like this:

So, on emulator works solution with changing margin, bottom or flex, but on real device for me works only this:

  _onMapReady() {
    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION)
      .then(granted => {
        this.setState({ paddingTop: 0 });
      });
  }
   <View style={{ width: "100%", height: "100%", paddingTop: this.state.paddingTop }}>
        <MapView
          style={{ flex: 1 }}
          showsUserLocation={true}
          showsMyLocationButton={true}
          onMapReady={this._onMapReady}
        >
        </MapView>
   </View>

This issue needs an actual fix please

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

I have same issue on iOS, using apple map provider. showsMyLocationButton={true} is not showing up the button.

react-native 0.52. react-native-maps 0.20.1

related to this issue#1033 I also faced the same issue and find the workaround here just try to repaint the map with padding or margin of 1. e.g. load your map with some specific coordinates and get the location from navigator.geolocation.getCurrentPosition and on settings current location on map set just set the map view with padding: 1 or margin: 1 it will show the show my location button.

Any ideas when this would be fixed?

You can do something like this.

componentDidMount(){
        setTimeout(()=>this.setState({flex: 1}),100);
}

Then in your mapview, you can put the style referring to the state <MapView style={{flex: this.state.flex}} />

I am using the flex box style property justifyContent:'center' on the mapView to solve this problem. Works on both android and iOS.

  mapContainer: {
    justifyContent: 'center',
    position: 'absolute',
    height: Dimensions.get("window").height,
    width: Dimensions.get("window").width
  }

I keep seeing this topic, and it’s a lot easier than people are making it out to be. My suggestion is to make it yourself.

Simply:

1. create a button
2. keep the current region of the user in either component or app state
3. use the animateToRegion() function provided by RN Maps to go to the user’s position

@davychhouk I’ve tried many different ways since I asked, but it was faster to code my own ShowMyLocation button, but thanks for replying. Can anyone else test this to close the issue?

For me, I notice the button will become visible when I focus on a react-native-elements Input. I have an Input in my header used as a search box and when I tap in it as if I am going to search for something, I notice the “go to current location” button becomes visible. For now I am calling it a “feature” …but it obviously isn’t right. 😉

SDK 32 in expo same problem. Tried all the solution above and they don’t work…

How can I do that? this.state.marginBottom’s initial value should be 1. I am new to React Native

Inside the constructor, add this.state = { marginBottom : 1 } In case you don’t understand what I’m talking about or want to see some sample code, please read React docs. If you happen to see React code without a constructor, this blog: The constructor is dead, long live the constructor! will clarify you.

same the button not showing My environment :

“expo”: “~45.0.0”, “react-native”: “0.68.2”, “react-native-maps”: “0.30.2”,

showsMyLocationButton not showing anything

this my sample code

     <MapView
              showsUserLocation={true}
              provider={PROVIDER_GOOGLE}
              initialRegion={region}
              showsMyLocationButton={true}
              showsScale={true}
         >

Can this issue be reopned? What is the point of using library for maps if basic functionality like centering location is not working?

I have tried @JakeHadley code & it worked but I have made few modifications. Instead of marginBottom , I have just used margin & it really worked for me. I am sharing my codes below for your reference.

const [mapMargin, setMapMargin] = useState(1)

const setMargin = () => {
    setMapMargin(0)
}

style={{ ...styles.mapView, margin: mapMargin }}

onMapReady={setMargin}

@crespoxx I’ve been dealing with this for a while now and I tried what you did with no luck (glad you got it to work though!). I set up react native maps with react-native link react-native-maps which worked out of the box for me with android. But the showsMyLocationButton is not working. Here’s my code. I don’t think it’s very different from the solutions given here…Any ideas?

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = { mapMargin: 1 };
  }

  setMargin = () => {
    this.setState({ mapMargin: 0 });
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ ...styles.map, marginBottom: this.state.mapMargin }}
          onMapReady={this.setMargin}
          provider="google"
          showsMyLocationButton
          initialRegion={{
            latitude: 49.7370,
            longitude: -111.8338,
            latitudeDelta: 0.001,
            longitudeDelta: 0.04,
          }}
        />
      </View>
    );
  }
}

const styles = {
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  }
};

export default Map;

Maybe the issue is related to showsUserLocation? From the docs, it says “You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, otherwise it is going to fail silently!”

I’m having this issue right now and I haven’t add the key into Info.plist. Plus, I haven’t seen anyone suggesting this, so is it a possibility?

@HarshitMadhav Yup, check here https://imgur.com/37HF6H5, main Q , https://stackoverflow.com/questions/55738286/how-to-fix-show-location-button-in-android-react-native-map

@anastely try the @2DKot solution above, it is still working I have tried and tested it myself.

@2DKot not working for me 😕 Any Update Guys?

Tried the solution @PurnimaNaik was suggesting. On Android Simulator with react-native: 0.57.8 it doesn’t show the button. I was also trying the solutions with marginBottom, paddingBottom and all the others suggested above, but unfortunately on Android Simulator I’m not able to display the button