'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