react-native-maps: react-native-maps does not support the New Architecture

Hello @cipolleschi. Thank you for reaching out.

I’ve already started doing some of the prerequisites, and I’m definitely planning to migrate as soon as my calendar allows me to. I spent some time looking into the migration a couple of weeks ago and wrote down a few notes/questions that I was planning to post in the new architecture workgroup.

I see that the documentation got a major overhaul, so I’ll revisit the subject and get back to you if my questions are still relevant after reading the updated docs 😃

@midrizi @kalyantm I’ve had very limited time to spend on react-native-maps in the previous months, but the time I had, I spent on supporting the new architecture. I’ve had no “behind the scenes” communication with the RN team, so the issue I mentioned in my latest comment is very much still applicable. But since findNodeHandle seems to stick around, I’ve moved on to the next step(s).

I’ve just applied for access to the new architecture working group as I’ve stumbled upon a couple of features that doesn’t seem to be supported when codegenerating typescript specs in the new architecture and am currently awaiting access 😃

The fix is here:

• https://github.com/facebook/react-native/pull/38352

I’ll have it reviewed and merged in the upcoming stable for 0.72

Hi @ravindraguptacapgemini, Thanks for providing a reproducer, this was really valuable for me. I identified a scenario in the interop layer where direct (non-bubbling) events, like the one fired from react-native-maps are not properly handled. I’ll work on a fix, and this should hopefully land in the next point release of 0.72

and am currently awaiting access 😃

You should have access by now 👍

@Simon-TechForm Are you still working on the new arch?

A quick update for everyone interested. The status of this is the same as mentioned in https://github.com/react-native-maps/react-native-maps/issues/4383#issuecomment-1435786037 😃

@ravindraguptacapgemini thanks for testing that. For 0.72.0, we are aware of a bug in the iOS interop layer, for which legacy components with ViewManagers not starting with the RCT prefix were crashing the app. The bug has been fixed in 0.72.1, so now that should be ok. Commit for reference.

Let me know if you have time to try with 72.1! 😄

@cortinico Thank you and apologies for the late reply 😃

I’ve just commented in the Codegen Missing features discussion, raising the issues that’s currently blocking migration of react-native-maps.

@Simon-TechForm Hey, hope you are doing well 😃 Like @midrizi, I also wanted to see if there was an update around the usage of the new architecture? Is there a place where pending tasks are listed? More than happy to contribute!

@cipolleschi I feel sorry now, I was quite exhausted with the issue for quite sometime. You all are doing fantastic, I really appreciate. Will try to keep the pings at the least now.

@ravindraguptacapgemini: Please, stop pinging us continuously. We are dedicating already all the time that we can to these issues, but they are not our only priority.

The New Architecture is experimental: you should NOT use it in your production application already. We appreciate that you and the company you work for are experimenting with it and providing feedback, we really value it and we also shown that we are acting upon it.

Continuously pinging us will not make us faster and, in any case, the fix you are requiring can’t arrive before the release crew prepare another release and you are not helping us with all this noise.

The fix is here:

• Fabric Interop - Also normalize direct events facebook/react-native#38352

I’ll have it reviewed and merged in the upcoming stable for 0.72

i think that fix is not going to work since the event already is called topOnMapReady. I’ve tried it locally and i’m still getting the same error.

@Simon-TechForm please update if you are now planning the add new architecture support for the library.

@cipolleschi Actually there I am using createIconSetFromIcoMoon from react-native-vector-icons as

const { createIconSetFromIcoMoon } = require('react-native-vector-icons');
const icoMoonConfig = require('../stylesheets/ilxIconSelection.json');

const IXIcon = createIconSetFromIcoMoon(icoMoonConfig);

<Marker coordinate={{latitude: latitude, longitude: longitude}}>
  < IXIcon name='room' size={30}/>
</Marker>

This IXIcon or createIconSetFromIcoMoon is not added to Interop layer (react-native.config.js)

module.exports = {
  project: {
    android: {
      unstable_reactLegacyComponentNames: ['AIRMap', 'RNSketchCanvas', 'RNCamera'],
    },
    ios: {
      unstable_reactLegacyComponentNames: ['AIRGoogleMap', 'AIRGoogleMapMarker', 'AIRMap', 'RNSketchCanvas', 'RNCamera'],
    },
  },
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};

This change is not released yet. It will be included in 0.72.4

@ravindraguptacapgemini thank you so much for testing this! In your message, you wrote:

I tried with React Native 0.72.1, and it did work fine for android but somehow it’s breaking up for android

I guess that the first android was actually ios, as the image you linked with the error is of an Android device.

@cortinico this seems to be a problem with the events (surprise surprise).

@ravindraguptacapgemini can you create a repro using this repo?

@ravindraguptacapgemini you can try the new interop layer https://github.com/reactwg/react-native-new-architecture/discussions/135 but I’m not sure if it will work with react-native-maps

You need to register the AIRMap component into the interop layer, following these steps: https://github.com/reactwg/react-native-new-architecture/discussions/135

It doesn’t work out-of-the-box. Automatic Interop layers should arrive in 0.74.

Alternatively, can you provide a reproducer using this template? 🙏

Hi there! In 0.73, we released an improved version of the Interop Layers. Could you try using react-native-maps with them, by registering all the components you are using?

any update Android maker is not displayed module.exports = { project: { android: { unstable_reactLegacyComponentNames: [ ‘AIRGoogleMap’, ‘AIRMap’, ‘AIRMapMarker’, ], }, ios: { unstable_reactLegacyComponentNames: [ ‘AIRGoogleMap’, ‘AIRGoogleMapMarker’, ‘AIRMap’, ], }, }, };

Just fyi for everyone following this, Fabric / RN seems to have backward compatability for old arch components: https://reactnative.dev/docs/the-new-architecture/backward-compatibility-fabric-components

this might be worth looking into incase some projects want to update to the new arch and blocked by this library.

@Simon-TechForm do you need help with the migration?

@ravindraguptacapgemini Yes, it’s only with new architecture.

Hi, In my case getting crash when use View or any other component inside Marker. So custom Marker getting crash.

@cortinico ☝️

@cipolleschi I have created a repro for you, please check it out from here.

yes, please! If any of you had chance, let’s try to use the interop layer and report failures. We are actively working on that and any feedback is super valuable. We are committing on fixing most of the basic failures to try and support most of the use cases with the interop layer!

I have figured out how to display google maps for both android as well, if interested check it out https://www.youtube.com/watch?v=ZpYDzLGJTXY

I am also willing to help. I am author of this summer hack(https://github.com/michbil/react-native-maps/tree/feature/new-architecture-exp) to make library work on new architecture iOS. @Simon-TechForm Is there any branch where help is needed?

Any updates? We still earnestly waiting for it 🥹

Hi!

Thank you for this awesome library! It’s really one of the most helpful I’ve ever used on RN 😄

Is there any news regarding this issue ? I’m currently working with RN 0.71.2 with the new Architecture and I really miss react-native-maps 😬 I forked @michbil’s fork (https://github.com/michbil/react-native-maps/tree/feature/new-architecture-exp) where he tried to add support for the new architecture, and I got it working on iOS but not on Android yet, and my knowledge of native code is…well, not enough sadly! I just tried to command some stuff but of course I suppose this is not enough even though it compiles and run on dev env for iOS 😄 (https://github.com/michbil/react-native-maps/tree/feature/new-architecture-exp)

Is the anything I can do to help make react-native-maps support the new architecture ?

Will this fix web support for Expo SDK 46? 🥺

Uncaught TypeError: react_native_1.UIManager.getViewManagerConfig is not a function
    at ../node_modules/react-native-maps/lib/decorateMapComponent.js (decorateMapComponent.js:29:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ../node_modules/react-native-maps/lib/MapMarker.js (MapMarker.js:29:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ../node_modules/react-native-maps/lib/index.js (index.js:37:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ./routes/ride/FindBeep.tsx (Report.tsx:66:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ./navigators/Drawer.tsx (index.js:8:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ./App.tsx (App.tsx:1:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ./index.js (index.js:1:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at 1 (useValidationErrors.tsx:38:1)
    at __webpack_require__ (bootstrap:789:1)
    at bootstrap:856:1
    at bootstrap:856:1

That’s an amazing news! Thank you so much. Feel free to reach out anytime with any question you may have! 😄