iOS: shape animator TurboModules return another module's SpecJSI, crashing on first call (New Architecture)

[mohdayanansari]

Version

@rnmapbox/maps 10.3.5, React Native 0.86.2, Expo SDK 57, New Architecture (RN 0.86 has no old architecture to fall back on).

What happens

Calling __experimental.MovePointShapeAnimator on iOS takes the app down at the first call — the new MovePointShapeAnimator([lng, lat]) that reaches NativeRNMBXMovePointShapeAnimatorModule.generate. Android is unaffected.

Cause

Both iOS shape-animator modules return another module's generated spec from getTurboModule::

ios/RNMBX/ShapeAnimators/RNMBXMovePointShapeAnimatorModule.mm

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeRNMBXPointAnnotationModuleSpecJSI>(params);
}

ios/RNMBX/ShapeAnimators/RNMBXChangeLineOffsetsShapeAnimatorModule.mm returns NativeRNMBXShapeSourceModuleSpecJSI in the same place.

Every other module in the package returns its own spec (RNMBXCameraModule, RNMBXImageModule, RNMBXShapeSourceModule, RNMBXViewportModule, RNMBXPointAnnotationModule), so these two look like a copy-paste slip. The effect is that the module is registered but answers to a spec that does not declare generate / moveTo.

The Kotlin modules are registered correctly, which is why this is invisible on Android.

Fix

--- a/ios/RNMBX/ShapeAnimators/RNMBXMovePointShapeAnimatorModule.mm
+++ b/ios/RNMBX/ShapeAnimators/RNMBXMovePointShapeAnimatorModule.mm
-    return std::make_shared<facebook::react::NativeRNMBXPointAnnotationModuleSpecJSI>(params);
+    return std::make_shared<facebook::react::NativeRNMBXMovePointShapeAnimatorModuleSpecJSI>(params);

--- a/ios/RNMBX/ShapeAnimators/RNMBXChangeLineOffsetsShapeAnimatorModule.mm
+++ b/ios/RNMBX/ShapeAnimators/RNMBXChangeLineOffsetsShapeAnimatorModule.mm
-    return std::make_shared<facebook::react::NativeRNMBXShapeSourceModuleSpecJSI>(params);
+    return std::make_shared<facebook::react::NativeRNMBXChangeLineOffsetsShapeAnimatorModuleSpecJSI>(params);

Both spec names come straight from src/specs/NativeRNMBXMovePointShapeAnimatorModule.ts and src/specs/NativeRNMBXChangeLineOffsetsShapeAnimatorModule.ts, and match the naming of the generated Android specs. Happy to send this as a PR if that is easier.

Reproduction

Any New-Architecture iOS app that renders a ShapeSource whose shape is a MovePointShapeAnimator:

const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
<Mapbox.ShapeSource id="v" shape={animator}>
  <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
</Mapbox.ShapeSource>

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: '__experimental' is not defined (no-undef) at example.tsx:2:22:
  1 | 
> 2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
    |                      ^
  3 | <Mapbox.ShapeSource id="v" shape={animator}>
  4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
  5 | </Mapbox.ShapeSource>


error: 'lng' is not defined (no-undef) at example.tsx:2:61:
  1 | 
> 2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
    |                                                             ^
  3 | <Mapbox.ShapeSource id="v" shape={animator}>
  4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
  5 | </Mapbox.ShapeSource>


error: 'lat' is not defined (no-undef) at example.tsx:2:66:
  1 | 
> 2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
    |                                                                  ^
  3 | <Mapbox.ShapeSource id="v" shape={animator}>
  4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
  5 | </Mapbox.ShapeSource>


error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:3:1:
  1 | 
  2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
> 3 | <Mapbox.ShapeSource id="v" shape={animator}>
    | ^
  4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
  5 | </Mapbox.ShapeSource>
  6 | 


error: 'Mapbox' is not defined (react/jsx-no-undef) at example.tsx:3:2:
  1 | 
  2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
> 3 | <Mapbox.ShapeSource id="v" shape={animator}>
    |  ^
  4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
  5 | </Mapbox.ShapeSource>
  6 | 


error: 'Mapbox' is not defined (no-undef) at example.tsx:3:2:
  1 | 
  2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
> 3 | <Mapbox.ShapeSource id="v" shape={animator}>
    |  ^
  4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
  5 | </Mapbox.ShapeSource>
  6 | 


error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:4:3:
  2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
  3 | <Mapbox.ShapeSource id="v" shape={animator}>
> 4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
    |   ^
  5 | </Mapbox.ShapeSource>
  6 | 


error: 'Mapbox' is not defined (react/jsx-no-undef) at example.tsx:4:4:
  2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
  3 | <Mapbox.ShapeSource id="v" shape={animator}>
> 4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
    |    ^
  5 | </Mapbox.ShapeSource>
  6 | 


error: 'Mapbox' is not defined (no-undef) at example.tsx:4:4:
  2 | const animator = new __experimental.MovePointShapeAnimator([lng, lat]);
  3 | <Mapbox.ShapeSource id="v" shape={animator}>
> 4 |   <Mapbox.CircleLayer id="dot" style={{ circleRadius: 8 }} />
    |    ^
  5 | </Mapbox.ShapeSource>
  6 | 


9 errors found.```