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

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 😃

[mfazekas]

@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]

@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