Very bad performance on iOS Simulator

[SikoraKam]

Describe the bug
There is very bad performance on iOS simulator for maplibre and main branch with v10. On physical devices everything works fine.

To Reproduce
Just install following instructions for v10 using maplibre

Screenshots

https://user-images.githubusercontent.com/56279488/164708545-87609b47-936c-4999-9cad-2b8cb09606b3.mov

I moved the screen at the beginning of video and it took a lot of time to move it.

Versions (please complete the following information):

• Platform: ios
• Platform OS: 15.0
• Device: every simulator
• Emulator/ Simulator: yes
• Dev OS: macOS 12
• @rnmapbox/maps Version v10 main branch - from readme
• Mapbox GL version 5.12.0 (default, not changed in configuration)
• React Native Version 0.64.3

Additional context
Im using Mac with M1. Maybe it is important, because I expected a lot of problem when trying to implement Mapbox or Mapbox-gl instead of maplibre. I could't because of errors connected to arch arm64. If you want to see my other discussion about that topic follow issue https://github.com/rnmapbox/maps/issues/1851. I would be thankful for some advices

[naftalibeder]

What happens if you install the Mapbox SDK instead of Maplibre? Would you be willing to test that?

[SikoraKam]

What happens if you install the Mapbox SDK instead of Maplibre? Would you be willing to test that?

I would like but as I mentioned in the bottom I cannot

[MichaelDanielTom]

For what it's worth, this also occurs for us on the v8 branch - everything works completely fine on actual device, but the simulator can barely move. One other interesting thing to note, is that if you go to a high zoom level (like 15 or higher) the performance is ok.

[1mike12]

the simulator isn't good at drawing tons and tons of polygons probably. This is normal behavior

EDIT

Actually now that I just tried the v10 mapbox, the performance is really good on emulator. It must be some optimizations the mapbox team did for their new version

[ryder-terraformation]

Like @1mike12 mentioned, the performance on the Mapbox iOS native SDK samples in the simulator is excellent

[jamesloper]

I may have had the same performance issue but it's solved now. You should confirm that your app is running natively for Apple Silicon architecture from Activity Monitor. If it is running under Rosetta, that would be cause of your slow downs. For me, as soon as I upgraded to Expo 45, I have been able to build my app without errors! You will need to remove any previously found workarounds such as EXCLUDED_ARCHS.

[jpetera54]

This is still an issue for me, tried multiple map versions (modified from MapboxGL.StyleURL) to no avail. Platform: ios Platform OS: 15.2 Simulator: yes @rnmapbox/maps main branch (10.0.0-beta.24) - from readme Mapbox GL default version, not changed in configuration RN version: 0.69.3

Also using M1 macbook, not running in rosetta or using EXCLUDED_ARCHS. Any pointers?

[naftalibeder]

@jpetera54 is this an issue with the Example project, or just your own project? Can you try several of the examples and see if any perform smoothly? What if you comment out any layers? Use the default styleUrl?

[jpetera54]

@naftalibeder It is in my own project. Is there an example repo that i can fork and try it out there? I used default styleUrl, I also tried following values:

• mapbox://styles/mapbox/dark-v10
• mapbox://styles/mapbox/satellite-streets-v11
• mapbox://styles/mapbox/outdoors-v11
• mapbox://styles/mapbox/satellite-v9

I am also calling MapboxGL.setWellKnownTileServer("mapbox"), could that be related?

Here is the preview of my map component, if that is of any help.

import MapboxGL from '@rnmapbox/maps';
import React, { useRef } from 'react';
import { Platform, View } from 'react-native';

MapboxGL.setWellKnownTileServer(Platform.OS === 'android' ? 'Mapbox' : 'mapbox');
MapboxGL.setAccessToken('xx.xxxxxxxxxxx.xxxxxxxxx');

const MapScreen = () => {
  const mapRef = useRef<MapboxGL.MapView>(null);
  return (
    <View style={{ flex: 1 }}>
      <MapboxGL.MapView
        ref={mapRef}
        styleURL={'mapbox://styles/mapbox/dark-v10'}
        style={{ flex: 1 }}
        zoomEnabled
        localizeLabels
      />
    </View>
  );
};

[naftalibeder]

Good to know - to isolate the problem, I would definitely try the built-in example here.

git clone [email protected]:rnmapbox/maps.git
cd maps
yarn install
cd example
echo [your Mapbox access token] > accesstoken
yarn install

And then run with Xcode or via command line.

[jpetera54]

Ran the examples and they work without an issue. I am not really sure where to look next. Are there some libraries that are known to interfere with the library? Here are my dependencies from package.json

{
    "@react-native-firebase/analytics": "^15.2.0",
    "@react-native-firebase/app": "^15.2.0",
    "@react-native-firebase/in-app-messaging": "^15.2.0",
    "@react-native-firebase/messaging": "^15.2.0",
    "@react-native-firebase/remote-config": "^15.2.0",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/elements": "^1.3.3",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "@rnmapbox/maps": "rnmapbox/maps#main",
    "axios": "^0.27.2",
    "mobx": "^6.6.0",
    "mobx-react-lite": "^3.4.0",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.69.3",
    "react-native-device-info": "^8.7.1",
    "react-native-error-boundary": "^1.1.15",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-localize": "^2.2.2",
    "react-native-safe-area-context": "^4.2.5",
    "react-native-screens": "^3.13.1",
    "react-native-vector-icons": "^9.2.0"
  }

Any other pointers? I will play around with it and come back if I find any solutions.

[naftalibeder]

Well that's actually good news - so it's something in your project (instead of... the weather?). This won't be an easy answer, but my best suggestion would be to comment out all of the non-default modifications (e.g. Camera and Map props) in your project - basically reduce your project to the simplest possible, and see if that "fixes" it. Then gradually add back in those props and see when the performance starts taking a hit.

I don't recognize any of those libraries as problematic, but I don't really know.

[1mike12]

@jpetera54 that's a pretty standard list of dependencies, I don't really foresee any of them having bad interactions. But of course with RN you never know. Did you have any luck getting down to just RN and mapbox, then adding in the dependencies few at a time? BTW for anyone else reading this, I get really good performance even though I am not on m1. Regular intel macbook.