WIP: fabric codegen test

[mfazekas]

Current state:

• This PR is a prototype to understand what kind of changes are required for Fabric/TurboModules

Issues:

• looking for sponsor: It's a non trivial task, and I cannot afford it doing from my free time, looking for sponsors.
• codegen limitations: codegen has severe limitations - like commands cannot accept arrays at the moment. One workaround for this is serialising JSON as string and passing through that way, but it will not be neither pretty nor fast
• layer style properties generator for fabric - this is a missing thing in the POC

Milestones:

• iOS initial POC (how to use swift, how to reuse original MapView code)
• iOS experiment with swift C++ integration to simplify swift usage
• Android initial POC
• implement MapView with a property, command and callback [iOS]
• implement MapView with a property command and callback [Android]
• implement Camera with a property, that can be added to Map
• implement a source/layer without styles
• implement layer with style, generate codes for style * [iOS]
• implement layer with style, generate codes for style * [Android]
• implement all layers
• implement all map view features
• implement all camera features
• implement Images/Image component
• implement userLocation, offlineManager components

---

Some documentation links:

• https://reactnative.dev/blog/2022/06/16/resources-migrating-your-react-native-library-to-the-new-architecture

• https://reactnative.dev/docs/next/new-architecture-intro

• https://github.com/react-native-community/RNNewArchitectureLibraries

• https://github.com/reactwg/react-native-new-architecture/discussions

• 3rd party libraries - updates and requests reactwg/react-native-new-architecture#6

• mateusz1913/react-native-avoid-softinput@4e7d974

• https://github.com/callstack/react-native-pager-view/blob/master/src/PagerViewNativeComponent.ts

• https://github.com/facebook/react-native/tree/HEAD/packages/react-native-codegen

• Use dummy typescript spec for map view

• Generate component using codegen

• Build example with fabric

• ~??? RCTMBXMapView.mm doesn't have RCT_NEW_ARCH_ENABLED defined.

  • Not sure who set's this for other libs, for example for https://github.com/react-native-image-picker/react-native-image-picker/blob/main/react-native-image-picker.podspec
  • I do see that RCT_FABRIC_ENABLED is set but not DRCT_NEW_ARCH_ENABLED.
  • See also https://github.com/software-mansion/react-native-screens/blob/main/RNScreens.podspec which has -DRCT_NEW_ARCH_ENABLED also see install_modules_dependencies in
    facebook/react-native@82e9c6a#diff-adcf572f001c2b710d14f409c14763f1a50b08369b3034548f1602685d21f67f~ solved by install_modules_dependencies

• implement simple mapbox map view component implented in Swift

• send some message to native component

• call callback from native component

• handle props update in native component

• display existing MapView component using Fabric.

Things are a bit compilicated as we use swift. And fabric is C++. While Objective-C has great C++ interop via objective-C++, swift C++ interop is still in progress . Swift has great interop with pure objectve-C classes and protocols, but it doesn't have interop with objective-c classes which has c++ members base of fabric component: RCTViewComponentView. Alternative would be implementing RCTComponentViewProtocol directly, but since it's operates on C++ object, it's problematic to porvide swift implementations

flowchart TD
    A[MapView.tsx]-->|"uses(if fabric)"| B
    B[RNMBXMapView.tsx] -->|codegen| C("@rnmapbox_maps/*.h,*.cpp (c++)")
    D["RNMBXMapView.h,.mm (obj-c++)"] -->|includes, implements| C
    D --> |contentView| E["RCTMGMapView (swift)"]
    E --> |implements| F["RNMBXMapViewImplProtocol from RNMBXMapViewImpl.h (obj-c)"]
    D --> |includes, uses| F
    G[RNMBXMapViewImplFactory] --> |creates| E["RCTMGMapView (swift)"]

Loading

Current state:

Issues:

• Arrays is not supported by command generated by Codegen - see codegenNativeCommands, ReadonlyArray Unsupported param type error facebook/react-native#36817

[j-piasecki]

Hi! Together with @WoLewicki, we would like to help with implementing the new architecture support on behalf of Expensify.

I wanted to ask about android setup - the source files are located under android/rctmgl/ instead of just android/, what is the reason for this? It's a bit problematic with codegen, which looks for package.json with config exactly one directory above the android project (currently it ends up looking for package.json in android/).

[mfazekas]

@j-piasecki thanks much for looking into it. I don't really see why it's in android/rctmgl instead of using just android.

We can move that to the android. But let's do that on main, before fabric. (To make comparing changes easier.)

[j-piasecki]

@mfazekas Great! I've made a PR doing that - #3011. Could you make sure I didn't miss anything?