title: How to fix show location button in android - React Native Map?
body: <p>I have some issue with Location Button I used react native maps <em>Airbnb</em> in my App,
  when the first time I open the app and a map is rendered the button is disappeared but when I close the app * still in background * and reopen them the button appeared well like this GIF,</p>
  
  <p>Link: <a href="https://imgur.com/37HF6H5" rel="nofollow noreferrer">https://imgur.com/37HF6H5</a></p>
  
  <p><strong>Note</strong></p>
  
  <blockquote>
    <p>I have seen all the issues same in the main repo of react native maps
    but it's not working!</p>
  </blockquote>
  
  <p><strong>And other Q,</strong></p>
  
  <p>The App didn't ask me to open the <strong>GPS</strong> for the first time, just work when I opened <strong>manually</strong>
  I have Android 8 * real device *</p>
  
  <p>Here is my code</p>
  
  <pre><code>import React, { Component } from 'react';
  import MapView, { Marker } from 'react-native-maps';
  import { View, Text, StyleSheet, Dimensions } from 'react-native';
  
  let { width, height } = Dimensions.get('window');
  
  const LATITUDE = 31.78825;
  const LONGITUDE = 34.4324;
  const LATITUDE_DELTA = 0.0922;
  const LONGITUDE_DELTA = 0.0421;
  
  class Map extends Component {
      constructor(props) {
          super(props);
          this.state = {
              error: null,
              width: width,
              marginBottom: 1,
              region: {
                  latitude: LATITUDE,
                  longitude: LONGITUDE,
                  latitudeDelta: LATITUDE_DELTA,
                  longitudeDelta: LONGITUDE_DELTA,
              }
          };
  
      }
      _findMe = async () =&gt; {
  
  
          this.watchID = await navigator.geolocation.watchPosition(
              ({ coords }) =&gt; {
                  const { latitude, longitude } = coords
                  this.setState({
                      region: {
                          latitude,
                          longitude,
                          latitudeDelta: LATITUDE_DELTA,
                          longitudeDelta: LONGITUDE_DELTA,
                      }
                  })
              });
  
          await navigator.geolocation.getCurrentPosition(
              (position) =&gt; {
                  this.setState({
                      region: {
                          latitude: position.coords.latitude,
                          longitude: position.coords.longitude,
                          latitudeDelta: LATITUDE_DELTA,
                          longitudeDelta: LONGITUDE_DELTA,
                      }
                  })
              },
              (error) =&gt; console.log(JSON.stringify(error)),
              { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
          )
      }
  
      componentDidMount() {
          this._findMe();
      }
      componentWillUnmount() {
          navigator.geolocation.clearWatch(this.watchId);
      }
      render() {
          const { region } = this.state;
          return (
              &lt;View style={styles.container}&gt;
                  &lt;MapView
                      style={[styles.map, { width: this.state.width }]}
                      style={StyleSheet.absoluteFill}
                      onMapReady={() =&gt; console.log(this.state.region)}
                      showsUserLocation
                      followsUserLocation={true}
                      region={region}
                      showsMyLocationButton={true}
                      // style={StyleSheet.absoluteFill}
                      textStyle={{ color: '#bc8b00' }}
                      containerStyle={{ backgroundColor: 'white', borderColor: '#BC8B00' }}
                  &gt;
                      &lt;Marker
                          coordinate={this.state.region}
                          title="Hello"
                          description="description"
                      /&gt;
                  &lt;/MapView&gt;
                  {/* &lt;Text&gt;{this.state.region.latitude}&lt;/Text&gt; */}
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-between',
          padding: 30,
          flex: 1,
          alignItems: 'center'
      },
      map: {
          position: 'absolute',
          zIndex: -1,
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
      },
  });
  
  export default Map;
  </code></pre>