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

[R1ckye]

Is this a bug report?

YES

Have you read the Installation Instructions?

YES

Environment

react-native: 0.52.0
react: 16.2.0
react-native-maps: 0.19.0 

GoogleMaps, but it works on iOS, Android-only issue

Devices:
    Huawei Mate 9 running Android 7.0
    OnePlus One running Android 5.1.1 (Cyanogen - Factory OS on this phone)

Steps to Reproduce

1. Create a MapView, with no options specified

Expected Behavior

showsMyLocationButton to show up

Actual Behavior

showsMyLocationButton not showing up

Reproducible Demo

See https://github.com/react-community/react-native-maps/issues/2003, it has a demo, but it should be reproducible all the time

Other info

I did some digging, on the OnePlus with Android 5 when I call navigator.geolocation.getCurrentPosition (separately) it throws
"Location request timed out" and on the Huawei it never returns. It also never asks for permissions to use my location. I also added every possible location permission one by one to the AndroidManifest, didn't help.

Could it be related to this? https://github.com/facebook/react-native/issues/7495

[rborn]

@alvelig I get a variation of this on a Samsung S6 too - I have two maps in the app, on the first one I can see to button, on the second one I cannot make it work no matter what I try.
I also had to use the RN navigator.geolocation.getCurrentPosition to show the user's current location otherwise it would show up after 10' of waiting or so, no matter what permissions I put in AndroidManifest.xml

[alvelig]

I've reviewed this bug last month, and unfortunately have not found any solution, looks like it is initialized when rerendered, for example when rotating device...

[R1ckye]

Do you know any workaround to this?

[rborn]

Nope :(

[Shhzdmrz]

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.

[kartik0709]

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}} />

[Vetalyo]

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

[MarkOSullivan94]

Has this be fixed? If so please close the issue.

Otherwise it'd be great if someone could post a link to a repo with an example for anyone wanting to help out with this issue.

[darkmantle]

@MarkOSullivan94 It happens in every case.

[yodaheis]

I passed a function as props to MapView component that causes it to rerender once it is ready, for example -
onMapReady={() => this.setState({ bottomPadding: 0 })}

This is a workaround.

[darkmantle]

@yodaheis Not for me - still get the same issue.

Have moved to another library until this is fixed.

[ntelkedzhiev]

Same here...

[prayuditb]

@darkmantle what library do you use?

[darkmantle]

@prayuditb https://github.com/mapbox/react-native-mapbox-gl

But it's not that much better, I've actually moved back to this library.

I did some testing and it works fine on a brand new RN 0.54.4 project, but that is no help to me as I have a pre-existing 0.54.4 project. No errors or any reason why the button is not showing up, but this is a huge problem.

[ivosabev]

Any ideas when this would be fixed?

[2DKot]

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.

[Gytree]

the @2DKot solution works for me. react-native: 0.55.2

[gamertense]

I followed the solution suggested by @2DKot, it's now working!
Tested on a React Native app which was created by expo init command.

[darkmantle]

Still not working on RN 0.54 which I'm using. Also 0.55+ isn't officially supported, so upgrading being the answer would be beyond ridiculous.

[darkmantle]

Updated to RN 0.55.4 and still getting no location button. I also cannot seem to overlay icons properly - in Android I get no top icon but the bottom sheet shows on click, in iOS its the other way around with the close icon showing but the bottom sheet not.

Edit 1: Fixed running onMapReady - now to get the damn button to show up!!

[lfernandoo]

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

[gamertense]

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.

[lfernandoo]

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.

Thank you @gamertense

[MrFoxPro]

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>

[PurnimaNaik]

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
  }

[rborn]

@PurnimaNaik can you confirm it works with the styling absoluteFillObject

[zaccariafra]

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

[AbreuLF]

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

Same thing for me here. I've tried all the approaches suggested above as well.

[giacomocerquone]

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

[gtatyous]

Any solution for this yet? All of the above does not work on simulator or an actual device!

[giacomocerquone]

@gtatyous You just make a callout with a button in it and you can tie it with an onPress method to get your current position through the expo api and then move the camera manually. But I'm sorry I can't give you an example, I haven't got much free time in these days

Anyway I should make a correction to my statement, the button is showed only when you put the application in background and then you open it again (without closing it from the "task manager").
This behaviour smells like a js lib problem, this means that it could be fixed fast enough without touching native code.

[spencore]

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. ;)

[anshumanburman]

@spencore i am facing the same issue did you get any solution for this??

[spencore]

@anshumanburman Not the solution you and I want (to make it show up by default on it's own). But I just noticed that I was able to get it to show up when I tapped on my search bar on the same screen. Not sure if that means it shows up if focus is off the map or what.

[anastely]

@2DKot not working for me :/
Any Update Guys?

[HarshitMadhav]

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

[anastely]

@Harshitmadhav It's work fine But when I rotate screen * Landscape * the map it will be in the middle don't take the whole screen.

[HarshitMadhav]

@anastely have you tried giving map style flex:1?

[anastely]

@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

[golaod]

Showing any button or location still doesn't work. I tried to put state styles both on parent View and MapView elements. Those styles were margin top/bottom, padding top/bottom and all combinations. flex:1 was set to both of them. I also added a button to change margin/padding values on click to see if rerendering will help. I followed suggestion to try with input field and with rotating the phone, but map simply doesn't show buttons or user location. I am more than sure app can read the location, because when I print navigator.geolocation.getCurrentLocation(result) I see where I am right now and when I move, it updates. It looks like just...any icons are not displayed.

[crespoxx]

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})
}

region={{ //Put your coords here }}
showsUserLocation
provider="google"
showsMyLocationButton
onMapReady={this.setMargin}
>

`
I tried this in 3 different Android devices and it worked. It should look something like this:

[JakeHadley]

@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;

[crespoxx]

@pianoman730 have you tried adding "showsUserLocation" inside of the MapView component? As you can see I set "showsUserLocation" and "showsMyLocationButton", maybe it only works when both are declared.

[JakeHadley]

@crespoxx I did try to put in showsUserLocation but that doesn't even work. It would be really nice (@ react-native-maps devs) to have a functioning example of very common use cases. I've been working with this library on and off for almost 2 years now and it seems to be the same issues every time.

[oussama9]

Any update about this issue ?

[StebanDev]

@crespoxx 's solution just worked for me, using an expo project.

[oussama9]

thank you very much Esteban !! i've created my own button.

On Sun, Jun 23, 2019 at 1:54 AM Esteban C [e-mail] wrote:

@crespoxx https://github.com/crespoxx 's solution just worked for me,
using an expo project.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/react-native-community/react-native-maps/issues/2010?email_source=notifications&email_token=AEMDN3PR2UUUZ3B7AHUS3WLP323S3A5CNFSM4EO4RQA2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYKTOTY#issuecomment-504706895,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEMDN3KNGH3P2XPHHH3VJ7LP323S3ANCNFSM4EO4RQAQ
.

[darkmantle]

Seems to work for me now!

[virgilcui]

@crespoxx I did try to put in showsUserLocation but that doesn't even work. It would be really nice (@ react-native-maps devs) to have a functioning example of very common use cases. I've been working with this library on and off for almost 2 years now and it seems to be the same issues every time.

with @crespoxx's solution, it works for me. Make sure you grant the location permission first, it doesn't show otherwise.

[juliobguedes]

Any news about this issue? I'm facing this problem when using Android, while iOS works fine. My MapView component is:

<MapView
  provider={PROVIDER_GOOGLE}
  style={styles.mapStyles}
  customMapStyle={mapStyle}
  minZoomLevel={12}
  maxZoomLevel={17}
  followsUserLocation
  showsUserLocation
  showsMyLocationButton
  showsCompass
  initialRegion={{
      ...center,
      latitudeDelta: 0,
      longitudeDelta: 0,
  }}
>

[davychhouk]

@juliobguedes Here is how I do it:
style={[styles.map, { marginBottom: this.state.mapMargin }]}

I'm following @crespoxx's solution with style as above and it works now.

[juliobguedes]

@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?

[JakeHadley]

I also have struggled with this for a while and ended up creating my own button:

return (
    <View style={{ ...StyleSheet.absoluteFillObject }}>
      <MapView
        ref={mapRef}
        provider={PROVIDER_GOOGLE}
        showsUserLocation
        followUserLocation
        style={{ ...StyleSheet.absoluteFillObject }}
        onLayout={() => setReady(true)}
        initialRegion={{
          latitude: 41.7370,
          longitude: -111.8338,
          latitudeDelta: 0.5,
          longitudeDelta: 0.0121,
        }}
      >
          //other stuff here
      </MapView>
      <MemoedUserLocationButton />
    </View>
)

import React, { useGlobal } from 'reactn';
import { Button, Icon } from 'react-native-elements';
import Toast from 'react-native-root-toast';
import { useLocPermissions } from '../utils';

const UserLocationButton = () => {
  const [, setRegion] = useGlobal('region');
  const [location] = useGlobal('location');
  const permission = useLocPermissions();

  const onButtonPress = () => {
    if (permission !== 'authorized') {
      Toast.show('Sorry, you haven\'t given permission to access your location...', {
        duration: Toast.durations.LONG
      });
    } else if (location === null) {
      Toast.show('Sorry, we don\'t have your exact location quite yet...', {
        duration: Toast.durations.LONG,
      });
    } else setRegion(location);
  };

  const locateIcon = () => (
    <Icon
      type='material-community'
      name='crosshairs-gps'
      size={25}
    />
  );

  return (
    <Button
      onPress={onButtonPress}
      icon={locateIcon}
      buttonStyle={styles.buttonStyle}
      containerStyle={styles.containerStyle}
    />
  );
};

const styles = {
  buttonStyle: {
    backgroundColor: 'white',
    borderRadius: 50
  },
  containerStyle: {
    position: 'absolute',
    top: '12%',
    right: '7%',
  }
};

export default UserLocationButton;

[richardbumm]

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

[EtainLove]

@crespoxx solution works for me. thanks.
initially setting marginBottom 1 and setting marginBottom 0 in the OnMapReady.

[jamesdmurphy51]

Works for me :)

[pedrocarlos-ti]

Thanks @crespoxx , works fine here. It's not the perfect way but works.

[saadi-ninjasCode]

@crespoxx , that solution work for me before. But now it's not working on same code. After updating SDK, I am not able to see the button on map screen.

[adrianloh128]

in my case, it is not marginButton but width.. I am on expo

[mathritter]

Some of the features that doesn't work here
showsMyLocationButton
followsUserLocation

[irfanzainudin]

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?

[Bonjamin]

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>

If MyLocationButton is not shown. You try init 1 this.state = { paddingTop: 1, ... } in your constructor.

[ghost]

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;

[stale[bot]]

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.

[maxcct]

This issue needs an actual fix please

[Goldziher]

Verified that this bug is still in place.. :(

Adjusting the style of the map does force a re-render which causes the button to appear - but not always.

[Sarvarr]

Same here...

[GrEg00z]

This issue needs an actual fix please

The workaround given by @2DKot still works with RN 0.63.4 & react-native-maps 0.27.1