'react native maps - showsMyLocationButton not working on IOS using MapKit
If I use enter the provider
prop in MapView
component as provider="google"
..then my OIS app happily uses google maps and the showsMyLocationButton
works (i.e. a button is present that takes map back to where user is).
However Ive found that the map navigation is much better on IOS if you use MapKit instead of google maps, so I remove the provider
prop.....but then I lose the location button.
Below is my MapView component
<MapView
region={this.props.locationOfInterest}
showsUserLocation
showsMyLocationButton
style={[styles.map, {marginBottom: this.state.mapMargin}]}
onMapReady={this.setMargin}
onRegionChangeComplete={this.props._onMoveMap}>
</MapView>
Xcode version = 13.3.1
ios platform = 11.0
RN version = 0.67.0
RN maps version = 0.31.0
Below is my package.json
{
"name": "xs",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"flow": "flow",
"flow start": "flow start",
"flow stop": "flow stop",
"flow status": "flow status",
"flow coverage": "flow coverage"
},
"dependencies": {
"@react-native-community/geolocation": "^2.0.2",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-community/push-notification-ios": "^1.10.1",
"@react-native-firebase/app": "^14.5.1",
"@react-native-firebase/auth": "^14.5.1",
"@react-native-firebase/database": "^14.5.1",
"@react-native-firebase/storage": "^14.5.1",
"@react-native-google-signin/google-signin": "^7.2.2",
"@react-native-picker/picker": "^2.3.1",
"@sentry/react-native": "^3.3.0",
"firebase-functions": "^3.20.1",
"flow": "^0.2.3",
"flow-bin": "^0.173.0",
"prop-types": "^15.8.1",
"react": "17.0.2",
"react-native": "0.67.0",
"react-native-background-timer": "^2.4.1",
"react-native-crypto-js": "^1.0.0",
"react-native-elements": "^3.4.2",
"react-native-fbsdk": "^3.0.0",
"react-native-form-validator": "^0.5.1",
"react-native-fs": "^2.19.0",
"react-native-gesture-handler": "^2.3.0",
"react-native-gifted-chat": "^0.16.3",
"react-native-google-places-autocomplete": "^2.4.1",
"react-native-image-crop-picker": "^0.37.3",
"react-native-maps": "^0.30.1",
"react-native-permissions": "^3.3.0",
"react-native-phone-number-input": "^2.1.0",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "^1.13.4",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "^3.13.1",
"react-native-sound": "^0.11.2",
"react-native-switch": "^1.5.1",
"react-native-vector-icons": "^9.1.0",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.2",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"symbol-observable": "^4.0.0",
"twitter-lite": "^1.1.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-eslint": "^8.2.6",
"babel-jest": "^26.6.3",
"babel-preset-flow": "^6.23.0",
"eslint": "^7.14.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.27.1",
"jest": "^26.6.3",
"jetifier": "^1.6.8",
"metro-react-native-babel-preset": "^0.66.2",
"prettier-eslint": "^8.8.2",
"react-native-codegen": "^0.0.7",
"react-native-flipper": "^0.143.0",
"react-test-renderer": "17.0.2",
"redux-flipper": "^2.0.1"
},
"jest": {
"preset": "react-native"
}
}
..and here is my podfile
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target 'xs' do
# React Native Maps dependencies
rn_maps_path = '../node_modules/react-native-maps'
pod 'react-native-google-maps', :path => rn_maps_path
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => true
)
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications/Permission-Notifications.podspec"
pod 'Permission-Camera', :path => "#{permissions_path}/Camera/Permission-Camera.podspec"
pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways/Permission-LocationAlways.podspec"
pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse/Permission-LocationWhenInUse.podspec"
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary/Permission-PhotoLibrary.podspec"
pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary/Permission-MediaLibrary.podspec"
pod 'RNSound', :path => '../node_modules/react-native-sound'
target 'xsTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
# below added to stop arm64 being removed from excluded architecture in build settings
installer.pods_project.build_configurations.each do |config|
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
end
end
end
Solution 1:[1]
As per @Javascript Hupp Technologies comment......this functionality simply doesnt exist when using MapKit
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | james murphy |