react-native-carplay icon indicating copy to clipboard operation
react-native-carplay copied to clipboard

Make changes required to support Expo config plugin

Open valtyr opened this issue 1 year ago • 1 comments

I'm looking at integrating react-native-carplay into an EAS-powered Expo app. For some background, Expo started supporting custom native code for managed projects recently, and the mechanism that allows this to work is something called an Expo Config Plugin. That should theoretically allow this plugin to be used in custom Expo dev clients (which is very exciting).

The setup

Here's a link to a plugin file I've created which performs all the modifications specified by the readme: https://gist.github.com/valtyr/48eca6a1b5e3d54d865e2352a6127b6a

This file is transpiled into js and referenced in the app.json config:

{
  "expo": {
    // ...
    "plugins": ["./plugins/carplay.js"]
  }
}

Here's my eas.json file for good measure (notice the simulator: true flag, this is convenient for testing on apps that haven't yet been granted the CarPlay capability):

{
  "cli": {
    "version": ">= 0.57.0"
  },
  "build": {
    "simulator": {
      "ios": {
        "developmentClient": true,
        "simulator": true
      }
    },
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

I then run a build using this command:

eas build --local --platform=ios --profile=simulator

The build command then spits out details about the working directory near the top which lets us inspect the source files and make sure the correct modifications have been made:

[SETUP_WORKINGDIR] Preparing workingdir [PATH_HERE]

The changes

Expo's app delegate file is a bit different to vanilla React Native app delegate files:

- @interface AppDelegate : UIResponder <UIApplicationDelegate, CPApplicationDelegate>
+ @interface AppDelegate : EXAppDelegateWrapper <RCTBridgeDelegate, CPApplicationDelegate>

The issue

The build goes fine until it starts compiling the RNCPStore.h header file. It seems that the client is being built in an ObjectiveC++ environment instead of just ObjectiveC (this is my uneducated assumption) so the keyword template is reserved. Here's the error it spits out:

❌  (ios/Pods/Headers/Public/react-native-carplay/RNCPStore.h:14:71)

  12 | + (id)sharedManager;
  13 | - (CPTemplate*) findTemplateById: (NSString*)templateId;
> 14 | - (NSString*) setTemplate:(NSString*)templateId template:(CPTemplate*)template;
     |                                                                       ^ expected identifier; 'template' is a keyword in Objective-C++
  15 | - (CPTrip*) findTripById: (NSString*)tripId;
  16 | - (NSString*) setTrip:(NSString*)tripId trip:(CPTrip*)trip;
  17 | - (CPNavigationSession*) findNavigationSessionById:(NSString*)navigationSessionId;

My hunch is that this would all work, if another variable name was used.

It would be awesome if a maintainer could help me get this working. I would of course contribute my expo-config-plugin to the codebase. I think react-native-carplay and Expo could be an absolutely killer combo!

valtyr avatar Aug 08 '22 16:08 valtyr