showsMyLocationButton and marker issues

[nohagazzaz]

Bug report

Summary

show my location button doesn't work in android along with showing a marker on user press throws an error

Environment info

  react-native: 0.64.3
  react: 17.0.1
  react-native-maps: 0.28.1

react-native info output:

System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 131.48 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
    Watchman: 2022.01.03.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 31.0.0, 32.0.0
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7784292
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.3 => 0.64.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. modal opens
   on map view
2. click on map
   on press
   Describe what you expected to happen:
3. map should have show my location button
4. on map click user shouldn't see error message

Describe what you actually happens:

1. map doesn't show my location button
2. on map click user see's error message

Reproducible sample code

here's the code

import React, { memo, useState } from 'react';
import { View, Text, Modal, Dimensions, TextInput, TouchableOpacity } from 'react-native';
import MapView, { Callout, Marker, PROVIDER_GOOGLE } from 'react-native-maps';
import { mapModalStyles } from "./mapModal.styles";
import * as en from '../../../assets/i18n/en.json';
import * as ar from '../../../assets/i18n/ar.json';
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
import { useSelector } from 'react-redux';
import SubmitButton from '../submitButton/submitButton';
import { CloseIcon } from '../../../assets/icons/close';
i18n.translations = {
    en,
    ar,
};
const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 23.8859;
const LONGITUDE = 45.0792;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const MapModal = (props: any) => {
    const user = useSelector((state: any) => state.user);
    const {
        modalVisible,
        setModalVisible,
        setOrderForm
    } = props;
    const [state, setState] = useState({
        region: {
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
        },
        poi: null,

    });
    const mapSelect = (event: any) => {
        const poi = event.nativeEvent;
        setOrderForm({
            lat: event.nativeEvent.coordinate.latitude,
            lng: event.nativeEvent.coordinate.longitude,
            locationName: event.nativeEvent.name || `${event.nativeEvent.position.x},${event.nativeEvent.position.y}`
        })
        console.log(poi.coordinate)
        setState({
            region: {
                ...poi.coordinate,
                latitudeDelta: poi.coordinate.latitude,
                longitudeDelta: poi.coordinate.longitude,
            },
            poi,
        });

    }


    return (

        <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}
        >
            <View style={mapModalStyles.modalStyle}>
                <View style={mapModalStyles.modalHeader}>
                    <TouchableOpacity style={mapModalStyles.btn} onPress={() => setModalVisible(false)}>
                        <CloseIcon style={mapModalStyles.closebtn} ></CloseIcon>
                    </TouchableOpacity>
                    <Text style={mapModalStyles.title}>
                        {i18n.t('Pick Location')}
                    </Text>
                </View>
                <View style={mapModalStyles.modalContent}>
                    <MapView showsUserLocation={true} style={mapModalStyles.mapStyle}
                        provider={PROVIDER_GOOGLE}
                        showsMyLocationButton={true}
                        userLocationPriority={'high'}
                        followsUserLocation={true}
                        showsScale={false}
                        onUserLocationChange={(val: any) => setState({
                            ...state, region: {
                                latitude: val.nativeEvent.coordinate.latitude,
                                longitude: val.nativeEvent.coordinate.longitude,
                                latitudeDelta: val.nativeEvent.coordinate.latitude,
                                longitudeDelta: val.nativeEvent.coordinate.longitude,
                            }
                        })}
                        // onDoublePress={mapSelect}
                        onPress={mapSelect}
                        onPoiClick={mapSelect}
                        initialRegion={state.region}
                    >
                        <View style={{ position: 'absolute', top: 10, width: '100%' }}>
                            <TextInput
                                style={{
                                    borderRadius: 10,
                                    margin: 10,
                                    color: '#000',
                                    borderColor: '#666',
                                    backgroundColor: '#FFF',
                                    borderWidth: 1,
                                    height: 45,
                                    paddingHorizontal: 10,
                                    fontSize: 18,
                                }}
                                placeholder={'Search'}
                                placeholderTextColor={'#666'}
                            />
                        </View>
                        {state.poi && (
                            <Marker coordinate={{ longitude: (state.poi as any).coordinate.longitude, latitude: (state.poi as any).coordinate.latitude }} draggable={false}  >
                                <Callout>
                                    <View>
                                        <Text>Place Id: {(state.poi as any).placeId}</Text>
                                        <Text>Name: {(state.poi as any).name}</Text>
                                    </View>
                                </Callout>
                            </Marker>
                        )}
                    </MapView>
                </View>
                <View style={mapModalStyles.modalFooter}>
                    <SubmitButton
                        label={i18n.t('Clear')}
                        buttonStyle={mapModalStyles.clearbtn}
                        disabled={!state.poi}
                        onPress={() => setState({
                            region: {
                                latitude: 0,
                                longitude: 0,
                                latitudeDelta: 0,
                                longitudeDelta: 0,
                            },
                            poi: null,
                        })}
                    >

                    </SubmitButton>

                    <SubmitButton
                        label={i18n.t('OK')}
                        buttonStyle={mapModalStyles.clearbtn}
                        disabled={!state.poi}
                        onPress={() => setModalVisible(false)}
                    >

                    </SubmitButton>
                </View>
            </View>
        </Modal>

    )
};
export default React.forwardRef((props: any, ref) => <MapModal {...props} innerRef={ref} />);

android config

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="care.client.wtd">
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="android.permission.CAMERA"/>
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.VIBRATE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.ACCESS_COURSE_LOCATION"/>
  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="https"/>
    </intent>
  </queries>
  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
    <meta-data android:name="com.google.android.geo.API_KEY" android:value="API_KEY"/>
    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="43.0.0"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@wtd.care/wtd-expo-client"/>
    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:screenOrientation="portrait">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="myapp"/>
        <data android:scheme="bundID"/>
      </intent-filter>
    </activity>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
    <activity android:name="com.theartofdev.edmodo.cropper.CropImageActivity" android:theme="@style/Base.Theme.AppCompat"/>
    <uses-library android:name="org.apache.http.legacy" android:required="false"/>
  </application>
</manifest>

[SaadBazaz]

Getting issues with:

    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-google-places-autocomplete": "^2.4.1",
    "react-native-maps": "0.29.4",
    "react-native-progress-steps": "^1.3.4",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1",

where the following props are not working:

                showsUserLocation={true}
                showsMyLocationButton={true}

I am unable to see the blue circle for my location, and also the button for recentering the location does not appear.

Here is the full reproducible code of the component:

import React, {
    memo,
    useCallback,
    useState,
    useRef,
} from 'react';

import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';


import { StyleSheet, Text, View, Dimensions } from 'react-native';

import { PermissionsAndroid } from 'react-native';
import * as Permission from 'expo-permissions';

function Tab() {

    const [isMapReady, setMapReady] = useState(false);

    const mapRef = useRef(null);

    const handleMapReady = useCallback(() => {
        setMapReady(true);
    }, [mapRef, setMapReady]);

    
    // I needed this in Expo for the user location to show
    const _getLocationPermissionAsync = async () => {
        const { status } = await Permissions.askAsync(Permissions.LOCATION)
        if (status !== 'granted') {
            // display an error
            alert("Could not get permissions for Map.")
        }
        else {
            alert("You have permissions.")
        }
    }

    const onRegionChange = (region) => {
        console.log({ region });
    }
    return (
        <View style={styles.container}>
            <MapView

                //   Useful events
                //   Found at: https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md

                ref={mapRef}

                onRegionChange={onRegionChange}
                region={{
                  latitude: 33.52153144183546,
                  longitude: 73.16365599632265,
                  latitudeDelta: 0.0922,
                  longitudeDelta: 0.0421,
                }}

                provider={PROVIDER_GOOGLE}
                showsUserLocation={true}
                showsMyLocationButton={true}
                onMapReady={handleMapReady}

                style={isMapReady ? styles.map : {}}
            />

        </View>
    );
}

export const MapScreen = memo(Tab);

const styles = StyleSheet.create({
    container: {
        position: 'relative',
    },
    map: {
        width: '100%',
        height: '100%',
    },
});

Note:

• It works in iOS, but not Android
• The location is already allowed, according to the alert I get. (It shows status 'granted')

[monholm]

@nohagazzaz please look into how to provide a minimal reproducible example. I would love to help, but I can't spend the time looking through several hundred lines of code and on top of that having to make several changes to even make them run on my end, as there are countless dependencies, local assets and so on. Could you also make sure to check the bug against the latest version of react-native-maps?

@SaadBazaz are you commenting on the same error, or something else? If it's the same, maybe the two of you could arrange opening a new issue together? And if not, please open a new issue regarding your problem.

I'm going to close this for now, but please feel free to open a new issue, following the issue template if this is still relevant.

[SaadBazaz]

It's the same issue. I'll open a new issue then with the proper format. Thanks for the heads up @Simon-TechForm

[marcoamt]

Hi, anyone find a fix for this issue, also the popup for requesting access to position not appears only on android.