Expose size and fix symbol resize issue

apps/example/package.json

@@ -13,7 +13,7 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
     "react": "18.2.0",
-    "react-native": "0.71.8",
+    "react-native": "0.71.13",
     "react-native-carplay": "workspace:*",
     "react-native-gesture-handler": "^2.10.1",
     "react-native-safe-area-context": "^4.5.3",
@@ -31,7 +31,7 @@
     "babel-jest": "^29.2.1",
     "eslint": "^8.19.0",
     "jest": "^29.2.1",
-    "metro-react-native-babel-preset": "0.73.9",
+    "metro-react-native-babel-preset": "0.73.10",
     "prettier": "2.6.2",
     "react-test-renderer": "18.2.0",
     "typescript": "4.8.4"

apps/example/src/screens/Map.tsx

@@ -6,11 +6,11 @@ import {
   Trip,
   NavigationSession,
   MapTemplateConfig,
-  Maneuver,
-  PauseReason,
-  TimeRemainingColor,
-  TravelEstimates,
 } from 'react-native-carplay';
+import { Maneuver } from 'react-native-carplay/src/interfaces/Maneuver';
+import { PauseReason } from 'react-native-carplay/src/interfaces/PauseReason';
+import { TimeRemainingColor } from 'react-native-carplay/src/interfaces/TimeRemainingColor';
+import { TravelEstimates } from 'react-native-carplay/src/interfaces/TravelEstimates';
 
 function MapView() {
   return (
@@ -57,6 +57,11 @@ function getTravelEstimates(): TravelEstimates {
   };
 }
 
+const IconSize = {
+  width: 100,
+  height: 100,
+}
+
 const maneuvers: Maneuver[] = [
   {
     tintSymbolImage: 'yellow',
@@ -66,6 +71,7 @@ const maneuvers: Maneuver[] = [
       distanceUnits: 'meters',
       timeRemaining: 20,
     },
+    symbolImageSize: IconSize,
     symbolImage: require('../images/map/uturn.png'),
   },
   {
@@ -76,6 +82,7 @@ const maneuvers: Maneuver[] = [
       distanceUnits: 'miles',
       timeRemaining: 300,
     },
+    symbolImageSize: IconSize,
     symbolImage: require('../images/map/fork.png'),
   },
   {
@@ -86,6 +93,7 @@ const maneuvers: Maneuver[] = [
       distanceUnits: 'feet',
       timeRemaining: 50,
     },
+    symbolImageSize: IconSize,
     symbolImage: require('../images/map/right.png'),
   },
 ];
@@ -95,13 +103,13 @@ function getRandomManeuver(): Maneuver {
   return { ...maneuvers[randomIndex] };
 }
 
-export function Map({ navigation }) {
-  const [navigationSession, setNavigationSession] = useState<NavigationSession>(null);
+export function Map() {
+  const [navigationSession, setNavigationSession] = useState<NavigationSession | null>(null);
 
   const mapTemplate = useRef<MapTemplate>();
 
   const onShowAlertPress = () => {
-    mapTemplate.current.presentNavigationAlert({
+    mapTemplate.current?.presentNavigationAlert({
       titleVariants: ['Test 1'],
       primaryAction: { title: 'Test 2' },
       secondaryAction: { title: 'Test 3' },
@@ -110,35 +118,35 @@ export function Map({ navigation }) {
   };
 
   const onDismissAlertPress = () => {
-    mapTemplate.current.dismissNavigationAlert(true);
+    mapTemplate.current?.dismissNavigationAlert(true);
   };
 
   const onShowPanningPress = () => {
-    mapTemplate.current.showPanningInterface(true);
+    mapTemplate.current?.showPanningInterface(true);
   };
 
   const onDismissPanningPress = () => {
-    mapTemplate.current.dismissPanningInterface(true);
+    mapTemplate.current?.dismissPanningInterface(true);
   };
 
   const onShowRouteChoicesPreviewPress = () => {
-    mapTemplate.current.showRouteChoicesPreviewForTrip(trip);
+    mapTemplate.current?.showRouteChoicesPreviewForTrip(trip);
   };
 
   const onDismissRouteChoicesPreviewPress = () => {
-    mapTemplate.current.hideTripPreviews();
+    mapTemplate.current?.hideTripPreviews();
   };
 
   const onStartNavigation = async () => {
-    mapTemplate.current.hideTripPreviews();
-    const newNavigationSession = await mapTemplate.current.startNavigationSession(trip);
-    newNavigationSession.updateManeuvers([getRandomManeuver()]);
-    mapTemplate.current.updateTravelEstimates(
+    mapTemplate.current?.hideTripPreviews();
+    const newNavigationSession = await mapTemplate.current?.startNavigationSession(trip);
+    newNavigationSession?.updateManeuvers([getRandomManeuver()]);
+    mapTemplate.current?.updateTravelEstimates(
       trip,
       getTravelEstimates(),
       Math.floor(Math.random() * 4) as TimeRemainingColor,
     );
-    setNavigationSession(newNavigationSession);
+    setNavigationSession(newNavigationSession ?? null);
   };
 
   useEffect(() => {
@@ -210,7 +218,7 @@ export function Map({ navigation }) {
           <Button
             title="Change Trip Estimates"
             onPress={() => {
-              mapTemplate.current.updateTravelEstimates(
+              mapTemplate.current?.updateTravelEstimates(
                 trip,
                 getTravelEstimates(),
                 Math.floor(Math.random() * 4) as TimeRemainingColor,

packages/react-native-carplay/ios/RNCarPlay.m

@@ -153,11 +153,14 @@ -(UIImage*)dynamicImageWithNormalImage:(UIImage*)normalImage darkImage:(UIImage*
 }
 
 - (UIImage *)imageWithSize:(UIImage *)image convertToSize:(CGSize)size {
-    UIGraphicsBeginImageContext(size);
-    [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
-    UIImage *destImage = UIGraphicsGetImageFromCurrentImageContext();
-    UIGraphicsEndImageContext();
-    return destImage;
+    UIGraphicsImageRendererFormat *renderFormat = [UIGraphicsImageRendererFormat defaultFormat];
+    renderFormat.opaque = NO;
+    UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:size format:renderFormat];
+
+    UIImage *resizedImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
+        [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
+    }];
+    return resizedImage;
 }
 
 RCT_EXPORT_METHOD(checkForConnection) {
@@ -1063,15 +1066,12 @@ - (CPManeuver*)parseManeuver:(NSDictionary*)json {
 
     if ([json objectForKey:@"symbolImage"]) {
         UIImage *symbolImage = [RCTConvert UIImage:json[@"symbolImage"]];
-
-        if ([json objectForKey:@"resizeSymbolImage"]) {
-            NSString *resizeType = [RCTConvert NSString:json[@"resizeSymbolImage"]];
-            if ([resizeType isEqualToString: @"primary"]) {
-                symbolImage = [self imageWithSize:symbolImage convertToSize:CGSizeMake(100, 100)];
-            }
-            if ([resizeType isEqualToString: @"secondary"]) {
-                symbolImage = [self imageWithSize:symbolImage convertToSize:CGSizeMake(50, 50)];
-            }
+
+        if ([json objectForKey:@"symbolImageSize"]) {
+            NSDictionary *size = [RCTConvert NSDictionary:json[@"symbolImageSize"]];
+            double width = [RCTConvert double:size[@"width"]];
+            double height = [RCTConvert double:size[@"height"]];
+            symbolImage = [self imageWithSize:symbolImage convertToSize:CGSizeMake(width, height)];
         }
 
         BOOL shouldTint = [RCTConvert BOOL:json[@"tintSymbolImage"]];

packages/react-native-carplay/src/CarPlay.ts

@@ -108,6 +108,7 @@ class CarPlayInterface {
    * Boolean to denote if carplay is currently connected.
    */
   public connected = false;
+  public window: WindowInformation | undefined
 
   /**
    * CarPlay Event Emitter
@@ -124,12 +125,14 @@ class CarPlayInterface {
 
     this.emitter.addListener('didConnect', (window: WindowInformation) => {
       this.connected = true;
+      this.window = window
       this.onConnectCallbacks.forEach(callback => {
         callback(window);
       });
     });
     this.emitter.addListener('didDisconnect', () => {
       this.connected = false;
+      this.window = undefined
       this.onDisconnectCallbacks.forEach(callback => {
         callback();
       });

packages/react-native-carplay/src/interfaces/Maneuver.ts

@@ -9,14 +9,10 @@ export interface Maneuver {
   initialTravelEstimates?: TravelEstimates;
   symbolImage?: ImageSourcePropType;
   /**
-   * Allows the supplied symbol image to be resized
-   * to the suitable scal for it's use as a primary
-   * or secondary image. This functionality would usually
-   * be available via the `<Image>` tag but carplay
-   * requires an image asset, so this resizing is done
-   * on the native side.
+   * The size of the image in points. Please read the CarPlay App Programming Guide
+   * to get the recommended size.
    */
-  resizeSymbolImage?: 'primary' | 'secondary';
+  symbolImageSize?: { width: number, height: number }
   /**
    * Allows the supplied symbol image to be tinted
    * via a color, ie. 'red'. This functionality would usually

packages/react-native-carplay/src/navigation/NavigationSession.ts

@@ -9,7 +9,7 @@ import { Image, processColor } from 'react-native';
 export class NavigationSession {
   public maneuvers: Maneuver[] = [];
 
-  constructor(public id: string, public trip: Trip, public mapTemplate: MapTemplate) {}
+  constructor(public id: string, public trip: Trip, public mapTemplate: MapTemplate) { }
 
   public updateManeuvers(maneuvers: Maneuver[]) {
     this.maneuvers = maneuvers;
@@ -18,7 +18,12 @@ export class NavigationSession {
       this.id,
       maneuvers.map(maneuver => {
         if (maneuver.symbolImage) {
-          maneuver.symbolImage = Image.resolveAssetSource(maneuver.symbolImage);
+          const image = Image.resolveAssetSource(maneuver.symbolImage);
+          maneuver.symbolImage = image
+          maneuver.symbolImageSize = maneuver.symbolImageSize ?? { width: 50, height: 50 }
+          const width = Math.floor((maneuver.symbolImageSize.width * CarPlay.window!.scale) / image.scale)
+          const height = Math.floor((maneuver.symbolImageSize.height * CarPlay.window!.scale) / image.scale)
+          maneuver.symbolImageSize = { width, height }
         }
         if (maneuver.junctionImage) {
           maneuver.junctionImage = Image.resolveAssetSource(maneuver.junctionImage);