[Bug]: Error when running on iOS

[sluther]

Mapbox Implementation

Mapbox

Mapbox Version

11

React Native Version

0.79.3

Platform

iOS

@rnmapbox/maps version

10.1.39

Standalone component to reproduce

import React from 'react';
import { StyleSheet } from 'react-native';

import EditScreenInfo from '@/components/EditScreenInfo';
import { Text, View } from '@/components/Themed';

import Mapbox from "@rnmapbox/maps";

Mapbox.setAccessToken("key here");

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView style={styles.map} />
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: 300,
    width: 300,
  },
  map: {
    flex: 1
  }
});

Observed behavior and steps to reproduce

After running the following commands:
npx expo install @rnmapbox/maps
npx expo install expo-dev-client
npx expo prebuild --clean
npx expo run:ios

I get the following error:

❌ (ios/Pods/MapboxMaps/Sources/MapboxMaps/Annotations/ViewAnnotationManager.swift:79:19)
77 | @available(*, deprecated, message: "Use ViewAnnotation")
78 | public var annotations: [UIView: ViewAnnotationOptions] {
79 | idsByView.compactMapValues { [mapboxMap] id in
| ^ cannot convert return expression of type '[UIView : ViewAnnotationOptions]' to return type 'Dictionary<String, Optional>.RawValue'
80 | try? mapboxMap.options(forViewAnnotationWithId: id)
81 | }
82 | }

Expected behavior

I expect the app to build and run without any errors.

Notes / preliminary analysis

No response

Additional links and references

[v12golfcart]

I tried a brand new expo react native build, followed the github guide to the t, and can sorta reproduce, but in general the boiler plate component on the getting started guide doesn't work.

i ran the same commands, and replaced my App.tsx file with

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken(process.env.EXPO_PUBLIC_MAPBOX_ACCESS_TOKEN);

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView style={styles.map} />
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: 300,
    width: 300,
  },
  map: {
    flex: 1
  }
});

And I get a black screen in the center and the following errors in console:
[MapboxCommon] [Error]: Invalid size is used for setting the map view, fall back to the default size{64, 64}.
[MapboxCommon] [Error]: Invalid size is used for setting the map view, fall back to the default size{64, 64}.

manually setting a style doesn't resolve this and I can't fix the black screen

[mfazekas]

Should be addressed in latest versions

[mosman4]

I solved it by doing the following:
In my app.json I had "RNMapboxMapsVersion": "11.15.2"
So I added the following to the podfile:

Update this line to match app.json version

$RNMapboxMapsVersion = '11.15.2'

Then below replace post_install do |installer|:

post_install do |installer|
    $RNMapboxMaps.post_install(installer)
# @generated end @rnmapbox/maps-post_installer
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      :ccache_enabled => ccache_enabled?(podfile_properties),
    )
    
    # Add build settings fixes for Mapbox 11.15.2
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        # Ensure consistent iOS deployment target
        if config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'].to_f < 12.0
          config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
        end
        
        # Fix Swift compilation issues
        config.build_settings['SWIFT_VERSION'] = '5.0'
        config.build_settings['ENABLE_BITCODE'] = 'NO'
        
        # Fix modular headers
        config.build_settings['CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES'] = 'YES'
        
        # Fix for newer Mapbox versions
        if target.name.include?('Mapbox') || target.name.include?('Turf')
          config.build_settings['CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER'] = 'NO'
        end
      end
    end
end
end

THEN

Clean iOS build cache

cd ios
rm -rf Pods Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData

Reinstall pods with the updated version

pod install --repo-update

Clean Metro cache

cd ..
npm start -- --clear