maps: Fresh Install Failing on iOS

Describe the bug Created new react-native project and immediately after creating the project, attempted to install react-native-mapbox-gl version 7.0.7.

Navigated to the iOS folder of the project and ran pod install everything was installed successfully

Run react-native run-ios and get the following error:

Error: Requiring module "node_modules/@react-native-mapbox-gl/maps/javascript/index.js", which threw an exception: TypeError: null is not an object (evaluating 'MapboxGL.StyleURL')

loadModuleImplementation
    require.js:269:27
<global>
    App.js:27
loadModuleImplementation
    require.js:322:6
guardedLoadModule
    require.js:201:45
runUpdatedModule
    require.js:657:17
metroHotUpdateModule
    require.js:533:8
define
    require.js:53:24
global code
    App.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:4
<unknown>
    [native code]:0
inject
    injectUpdate.js:62:35
forEach
    [native code]:0
injectUpdate
    injectUpdate.js:71:26
on$argument_1
    HMRClient.js:40:21
emit
    index.js:202:37
_ws.onmessage
    WebSocketHMRClient.js:72:20
EventTarget.prototype.dispatchEvent
    event-target-shim.js:818:39
_eventEmitter.addListener$argument_1
    WebSocket.js:232:27
emit
    EventEmitter.js:190:12
callFunctionReturnFlushedQueue
    [native code]:0

Package.json

  "name": "mapboxReactNative",
  "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 ."
  },
  "dependencies": {
    "@react-native-mapbox-gl/maps": "^7.0.7",
    "react": "16.9.0",
    "react-native": "0.61.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.3",
    "@babel/runtime": "^7.6.3",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

The only code I’ve added to my App.js file pertaining to this package thus far has been the following:

import MapboxGL from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken('<ACCESS_TOKEN>');

To Reproduce Steps to reproduce the behavior

Create new react-native project
Attempt to install react-native-mapbox-gl
cd into ios & run pod install (should be successful)
Add import MapboxGL from '@react-native-mapbox-gl/maps'; to default App.js file
Try to run react-native run-ios

Review the errors outlined above

Expected behavior Mapbox should load without errors

Screenshots Simulator Screen Shot - iPhone X - 2019-10-08 at 22 01 44

Versions (please complete the following information):

Platfrom: iOS
Device: All iOS devices
OS: N/A
SDK Version react-native-mapbox-gl: 7.0.7
React Native Version 0.61.2

Additional context Any insight would be greatly appreciated 😃

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (10 by maintainers)

Most upvoted comments

@keithgulbro our docs should have isntructions for workaround without use_frameworks! that works with 0.62.1 too.

react-native init rnmbgltest --version 0.62.1
cd rnmbgltest
npm install @react-native-mapbox-gl/maps --save

cd ios 
edit Podfile
# add pod 'NoUseFrameworks-MapboxMobileEvents',  :podspec => '../node_modules/@react-native-mapbox-gl/maps/ios/NoUseFrameworks-MapboxMobileEvents/NoUseFrameworks-MapboxMobileEvents.podspec.json'
pod install ; cd ..
edit App.js
# import MapboxGL from '@react-native-mapbox-gl/maps';
# MapboxGL.setAccessToken('<ACCESS_TOKEN>');
# ...
react-native start
react-native run-ios

mfazekas on Apr 6, 2020

@keithgulbro in particular this runs for me just fine:

react-native init rnmbgltest --version 0.61.5
cd rnmbgltest
npm install @react-native-mapbox-gl/maps --save

cd ios 
edit Podfile
# add 'use_frameworks!'
pod install ; cd ..
edit App.js
# import MapboxGL from '@react-native-mapbox-gl/maps';
# MapboxGL.setAccessToken('<ACCESS_TOKEN>');
# ...
react-native start
react-native run-ios

mfazekas on Apr 5, 2020

@keithgulbro repeated the steps u provided and got the same error. May I ask your xcode version?

otaviosoares on Oct 10, 2019

@mfazekas Why did you close this issue? It’s a valid problem!

Steps to reproduce:

1.) Create new React Native Project: react-native init mapboxSampleProject 2.) cd mapboxSampleProject 3.) Run in terminal: npm install @react-native-mapbox-gl/maps --save 4.) Run: react-native link @react-native-mapbox-gl/maps 5.) Run: react-native run-ios (Default React Native App Loads Successfully) 5.) Open App.js and add: import MapboxGL from "@react-native-mapbox-gl/maps"; 6.) Refresh the application & notice the error’s listed above.

Please advise.

keithgulbro on Oct 9, 2019