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 git@github.com: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]

[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

[yasirlateef]

I was facing the same issue and tried everything. The only solution that worked for me was to run Xcode with Rosetta and it builds fine for the iOS simulator.

[noway]

@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: maplibre/maplibre-gl-native#4

Unfortunately I couldn't build rn mapbox gl with maplibre due to this issue: https://github.com/react-native-mapbox-gl/maps/issues/1472

[zbeucler2018]

I was able to find a workaround on my 2020 M1 macbook air. My solution was to open Xcode with Rosetta, and then build and run the react native project from there. This allowed me to get the demo in the README to run correctly

[noway]

this is not a workaround. you are just running your xcode on rosetta

[zbeucler2018]

this is not a workaround. you are just running your xcode on rosetta

My bad! I thought it constituted as a workaround because it allowed me to use the package and run my app in the iOS simulator without any errors or problems. Why would this not count as a workaround?

[noway]

This is an issue which you can only reproduce on Apple Silicon. If you're not using Apple Silicon but rather simulating running x86, of course the issue wouldn't be there. It's kinda redundant to say it works on Rosetta. We can run our whole dev environments on Rosetta, but you'd be sacrificing performance and not moving forward.

[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: maplibre/maplibre-gl-native#4

Unfortunately I couldn't build rn mapbox gl with maplibre due to this issue: #1472

@noway , does building with MapLibre work for you now with the help of the comments in #1472 ?

[noway]

@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: maplibre/maplibre-gl-native#4

Unfortunately I couldn't build rn mapbox gl with maplibre due to this issue: #1472

@noway , does building with MapLibre work for you now with the help of the comments in #1472 ?

I've tried it out just now. It compiles and runs!! This is as furthest I've gotten so far. This is great!!

But, the map is REALLY slow. When I try to interact with the map, I get a visual response around 5 seconds later, my app consumes 100% CPU in Activity Monitor.

The stdout is also spammed with the following:

'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)
'cyclone' is not a recognized processor for this target (ignoring processor)

To me it seems like the library doesn't turn on accelerated GPU rendering and falls back to software rendering... Not sure if that's something Mapbox even does though.

This is awesome progress, great job on getting this workaround to work!

[noway]

I'd say for the scope of just getting it to run, this GitHub issue is resolved. To make it usable, we can create a separate issue.

[ferdicus]

did you only try on simulator or also on device?

[noway]

only tried on simulator

[noway]

ok, tried on real device and it works too. on the real device, performance is fine btw.

[SkylerSeamans]

Running into this issue as well.

[sanatem]

Any news on this issue ? Is there any workaround ?

[ferdicus]

workaround is described above - try using MapLibre 5.11.0

[doylemark]

@noway Did you ever manage to either build without maplibre or solve the performance issues in iOS simulator?

[noway]

@doylemark I was only able to build with maplibre. That was really slow on Simulator.

I currently have a script which rips out react-native-mapbox-gl completely out of the project for simulator builds and replaces all MapViews/ShapeSources etc to () => null components.

[minkhantlu]

Any update on this issue ?

[mfazekas]

I don't have an M1 but I'd assume the main branch should work fine on an M1 with either MapLibre or v10 Mapbox. ($RNMapboxMapsImpl="mapbox")

Closing the issue, please open new issue if it's still relevant with the #main branch.

[okaybeydanol]

I'm having the same problem, no one has given a proper answer, I tried them all, it didn't work. Do they plan to fix this?

[rastapasta]

@okaybeydanol try using the current version on #main together with v10 - it works very fine on M1.

[okaybeydanol]

I'm already trying the current version, but it gives the same error. When I convert it to arm64, this time libpods starts to give an error. I didn't know what to do.

[t0ma5h]

I've had the same problem with trying to run it on M1.