Maps: Chip Apple M1, unable to compile the example project in IOS simulator

[babeone]

Describe the bug

Error in compiling for IOS simulator in new mac M1 chip. The project compile and run correctly on physical devices for both IOS/ANDROID (ipad and android phone). This is the error i'm getting on Xcode when trying to compile for a simulator : building for iOS Simulator, but linking in dylib built for iOS, file '/Users/xxxx/xxxx/xxxx/xxxx/maps/example/ios/Pods/@react-native-mapbox-gl-mapbox-static/dynamic/MapboxMobileEvents.framework/MapboxMobileEvents' for architecture arm64

To Reproduce
1) git clone [email protected]:react-native-mapbox-gl/maps.git
2) cd maps
3) yarn add @react-native-mapbox-gl/maps
4) cd example
5) yarn
6) try to run example folder on an IOS simulator in new mac M1 chip

maps Package.json

{ "name": "@react-native-mapbox-gl/maps", "description": "A Mapbox GL react native module for creating custom maps", "version": "8.1.0-rc10", "publishConfig": { "access": "public" }, "author": "React Native Mapbox Team", "main": "./javascript/index.js", "keywords": [ "gl", "ios", "android", "mapbox", "react-native" ], "license": "MIT", "repository": { "type": "git", "url": "https://github.com/react-native-mapbox-gl/maps" }, "scripts": { "fetch:style:spec": ". ./scripts/download-style-spec.sh", "generate": "node ./scripts/autogenerate", "test": "npm run lint && npm run unittest", "unittest": "jest", "unittest:single": "jest --testNamePattern", "format": "npm run lint -- --fix", "lint": "eslint . --ignore-pattern 'example' --fix && cd example/ && eslint ./src --fix" }, "peerDependencies": { "prop-types": ">=15.5.8", "react": "^16.6.1", "react-native": ">=0.59.9" }, "dependencies": { "@mapbox/geo-viewport": ">= 0.4.0", "@react-native-mapbox-gl/maps": "^8.1.0-rc10", "@turf/along": ">= 4.0.0 <7.0.0", "@turf/distance": ">= 4.0.0 <7.0.0", "@turf/helpers": ">= 4.6.0 <7.0.0", "@turf/length": ">= 4.6.0 <7.0.0", "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0", "@types/geojson": "^7946.0.7", "debounce": "^1.2.0" }, "devDependencies": { "@babel/core": "7.5.0", "@babel/plugin-proposal-class-properties": "7.10.4", "@babel/plugin-transform-exponentiation-operator": "7.10.4", "@babel/plugin-transform-runtime": "7.11.5", "@babel/runtime": "7.11.2", "@react-native-community/eslint-config": "^2.0.0", "@sinonjs/fake-timers": "^6.0.0", "babel-core": "6.26.3", "babel-eslint": "^10.0.1", "documentation": "13.1.0", "ejs": "^3.1.3", "ejs-lint": "^1.1.0", "eslint": "^7.3.0", "eslint-plugin-fp": "^2.3.0", "eslint-plugin-import": "2.22.1", "husky": "4.3.0", "jest": "25.5.4", "jest-cli": "25.5.4", "lint-staged": "^10.1.3", "metro-react-native-babel-preset": "0.49.1", "node-dir": "0.1.17", "prettier": "^2.0.4", "react": "16.8.6", "react-docgen": "^5.0.0-beta.1", "react-native": "0.59.10", "react-native-testing-library": "^6.0.0", "react-test-renderer": "16.8.3", "typescript": "4.0.5" }, "jest": { "preset": "react-native", "collectCoverageFrom": [ "javascript/**/*.js" ], "setupFiles": [ "./setup-jest.js", "./__tests__/__mocks__/react-native.mock.js" ], "modulePathIgnorePatterns": [ "example", "__tests__/__mocks__" ] }, "husky": { "hooks": { "pre-commit": "lint-staged && npm run generate" } }, "lint-staged": { "*.js": [ "yarn lint" ] } }

example Package.json

{ "name": "RNMapboxGLExample", "version": "1.0.0", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ./src", "postinstall": "node ./scripts/set_access_token.js && jetifier" }, "dependencies": { "@mapbox/geo-viewport": "^0.4.0", "@mapbox/mapbox-sdk": "^0.6.0", "@react-native-community/masked-view": "^0.1.7", "@turf/along": "^5.1.5", "@turf/bbox-polygon": "^6.0.1", "@turf/bearing": "^5.1.5", "@turf/distance": "^5.1.5", "@turf/helpers": "^6.1.4", "@turf/length": "^6.0.2", "@turf/line-distance": "^4.7.3", "@turf/nearest": "^4.7.3", "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0", "buffer": "^5.1.0", "debounce": "^1.2.0", "install": "^0.12.2", "moment": "^2.24.0", "npm": "^6.13.4", "prop-types": "^15.7.2", "react": "16.13.1", "react-native": "0.63.3", "react-native-elements": "^2.2.1", "react-native-gesture-handler": "^1.6.1", "react-native-safe-area-context": "^0.7.3", "react-native-safe-area-view": "^0.13.1", "react-native-screens": "^2.4.0", "react-native-svg": "^12.1.0", "react-native-vector-icons": "6.6.0", "react-navigation": "^4.3.7", "react-navigation-stack": "^2.3.11", "url": "^0.11.0" }, "devDependencies": { "@babel/core": "^7.8.4", "@babel/runtime": "^7.8.4", "@react-native-community/eslint-config": "^1.1.0", "@types/jest": "^26.0.0", "@types/react": "^16.9.36", "@types/react-native": "^0.62.13", "@types/react-test-renderer": "^16.9.2", "@typescript-eslint/eslint-plugin": "^3.0.0", "@typescript-eslint/parser": "^3.0.0", "babel-jest": "^25.1.0", "babel-plugin-module-resolver": "^3.2.0", "eslint": "^7.3.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-import": "^2.22.0", "glob-to-regexp": "^0.4.0", "jest": "^25.1.0", "jetifier": "^1.6.4", "metro-react-native-babel-preset": "^0.59.0", "react-test-renderer": "16.13.1", "typescript": "^4.0.3" }, "jest": { "preset": "react-native", "setupFilesAfterEnv": [ "../setup-jest" ] } }

Expected behavior
Example run without a problem in IOS simulator on M1 mac

Actual behavior
Compiling error

Screenshots

• Platform: [IOS]
• Platform OS: [IOS 10]
• Simulator: [yes]
• Dev OS: [Mac Os Big Sur 11.1]
• Mac: [Apple MacBook Pro 13 M1 2020]
• Xcode: [12.3]
• react-native-mapbox-gl Version: [8.1.0-rc10]
• React Native Version: [0.63.3]

[CaldeDaniele]

Same here

[mfazekas]

Two things you can try:

1. Mapbox 6.3.0
2. try with use_frameworks!

[babeone]

@mfazekas Thank you, i've tried but got the same error.

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, '10.0'

INHIBIT_WARNING_BY_DEFAULT = true

if INHIBIT_WARNING_BY_DEFAULT
ORIG_POD = method(:pod)

def pod(name, *requirements)
options = requirements.last
if options.is_a?(Hash)
options[:inhibit_warnings] = true unless options.has_key?(:inhibit_warnings)
else
requirements.push({inhibit_warnings: true})
end
ORIG_POD[name, *requirements]
end
end

target 'RNMapboxGLExample' do
config = use_native_modules!
use_react_native!(:path => config["reactNativePath"])

pod 'react-native-mapbox-gl', :path => '../../', :inhibit_warnings => false
$ReactNativeMapboxGLIOSVersion = '~> 6.3'

target 'RNMapboxGLExampleTests' do
inherit! :search_paths
end

use_native_modules!
use_frameworks!

end

target 'RNMapboxGLExample-tvOS' do
target 'RNMapboxGLExample-tvOSTests' do
inherit! :search_paths
end

end
`

[mfazekas]

@babeone can you verify it's the correct version in Podfile.lock

I think

pod 'react-native-mapbox-gl', :path => '../../', :inhibit_warnings => false
$ReactNativeMapboxGLIOSVersion = '~> 6.3'

should be reversed. That is $ReactNativeMapboxGLIOSVersion should be before pod

[babeone]

@mfazekas tried and i got the same error, Podfile.lock have the correct version (6.3)

adjusted Podfile like this
$ReactNativeMapboxGLIOSVersion = '~> 6.3' pod 'react-native-mapbox-gl', :path => '../../', :inhibit_warnings => false

[mfazekas]

I guess this is coming from the upstream issue: https://github.com/mapbox/mapbox-gl-native-ios/issues/558

[qu4sar]

Same for me with M1 Chip :(
Tried with all the solution on this link -> https://stackoverflow.com/questions/63607158/xcode-12-building-for-ios-simulator-but-linking-in-object-file-built-for-ios but nothing ...

[babeone]

@mfazekas so at the moment the only solution is to use a physical device, until mapbox fixes the sdk?

[babeone]

@mfazekas Found a workaround, just open Xcode with Rosetta. Right click on Xcode icon -> More information and check "Rosetta".

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[noway]

@stale don't mark it as stale, this issue is a huge blocker for using RN mapbox on M1 chip. Please remove the wontfix label.

[Cucak]

Am I the only one who is experiencing huge issues while coding react native app. First I had issues with cocoapods, then with react-native-maps package... Seems like m1 CPU was a mistake!

[kenjichanhkg]

so anyone got any idea? something to do with cocopod in M1, or mapbox in M1?

[noway]

It looks like the issue in upstream is resolved!!

https://github.com/mapbox/mapbox-navigation-ios/issues/2672

Can anyone try to get it running with the latest sdk? We going to need to update the sdk dependency in react-native-mapbox-gl and release a new version.

[mfazekas]

@noway we're using mapbox-gl-native-ios ATM. I don't think it's fixed there. It's fixed in the MapboxMaps SDK that replaces MapboxGLNativeIOS, but we're still using the MapboxGLNative libs.

[mfazekas]

FWIW #1311 might solve this. I assume MapLibre does not have this M1 issue. Not sure if Mapbox-gl-ios has SPM distribution, in case it does it might work as well

[kenjichanhkg]

@mfazekas so is it fixed? which library / version should I use now?

[ferdicus]

@kenjichanhkg, what #1311 does is adding support for MapLibre iOS SDKs which are actively maintained compared to Mapbox's "old" SDK.
You can try out MapLibre instead of Mapbox as a native dependency (instructions are in our installation guide for iOS) and report back.

The issue itself is mentioned in this ticket: https://github.com/maplibre/maplibre-gl-native/issues/4