Merge pull request #33 from tomdye/carplay-v14

example/.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  bracketSpacing: false,
+  bracketSpacing: true,
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',

example/app.json

@@ -1,4 +1,4 @@
 {
   "name": "test2",
   "displayName": "test2"
-}
+}

example/index.js

@@ -8,4 +8,4 @@ import { App } from './src/App';
 //   )
 // }
 
-AppRegistry.registerComponent("test2", () => App);
+AppRegistry.registerComponent('test2', () => App);

example/ios/Podfile.lock

@@ -236,9 +236,9 @@ PODS:
     - React-cxxreact (= 0.63.3)
     - React-jsi (= 0.63.3)
   - React-jsinspector (0.63.3)
-  - react-native-carplay (1.2.0):
+  - react-native-carplay (2.0.0):
     - React
-  - react-native-safe-area-context (3.1.8):
+  - react-native-safe-area-context (3.1.9):
     - React-Core
   - React-RCTActionSheet (0.63.3):
     - React-Core/RCTActionSheetHeaders (= 0.63.3)
@@ -302,12 +302,12 @@ PODS:
     - React-jsi (= 0.63.3)
   - RNCMaskedView (0.1.10):
     - React
-  - RNGestureHandler (1.8.0):
-    - React
-  - RNReanimated (1.13.1):
-    - React
-  - RNScreens (2.11.0):
-    - React
+  - RNGestureHandler (1.9.0):
+    - React-Core
+  - RNReanimated (1.13.2):
+    - React-Core
+  - RNScreens (2.16.1):
+    - React-Core
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -475,8 +475,8 @@ SPEC CHECKSUMS:
   React-jsi: df07aa95b39c5be3e41199921509bfa929ed2b9d
   React-jsiexecutor: b56c03e61c0dd5f5801255f2160a815f4a53d451
   React-jsinspector: 8e68ffbfe23880d3ee9bafa8be2777f60b25cbe2
-  react-native-carplay: 58b1b4ddbabaeff2ca9154287fe6a23514bc07d1
-  react-native-safe-area-context: 79fea126c6830c85f65947c223a5e3058a666937
+  react-native-carplay: 4105326f4eb8f953f21546bad9a6afb307e995d0
+  react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
   React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa
   React-RCTAnimation: 1befece0b5183c22ae01b966f5583f42e69a83c2
   React-RCTBlob: 0b284339cbe4b15705a05e2313a51c6d8b51fa40
@@ -488,12 +488,12 @@ SPEC CHECKSUMS:
   React-RCTVibration: 8e9fb25724a0805107fc1acc9075e26f814df454
   ReactCommon: 4167844018c9ed375cc01a843e9ee564399e53c3
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
-  RNGestureHandler: 7a5833d0f788dbd107fbb913e09aa0c1ff333c39
-  RNReanimated: dd8c286ab5dd4ba36d3a7fef8bff7e08711b5476
-  RNScreens: 0e91da98ab26d5d04c7b59a9b6bd694124caf88c
+  RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
+  RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
+  RNScreens: 45c457af3d2ee9e08fc01e70da87e653d46b1198
   Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: d61a7768792a5b1c87bd741c978114ce1f7d4f8b
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.9.3

example/ios/test2.xcodeproj/project.pbxproj

@@ -660,7 +660,7 @@
 				CURRENT_PROJECT_VERSION = 1;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = test2/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.3;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -684,7 +684,7 @@
 				CODE_SIGN_ENTITLEMENTS = test2/test2.entitlements;
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = test2/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.3;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -855,7 +855,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.1;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
 				LIBRARY_SEARCH_PATHS = (
 					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
@@ -908,7 +908,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.1;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
 				LIBRARY_SEARCH_PATHS = (
 					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",

example/ios/test2.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>PreviewsEnabled</key>
+	<false/>
+</dict>
+</plist>

example/ios/test2/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,53 +1,53 @@
 {
-  "images" : [
+  "images": [
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "20x20"
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "20x20"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "20x20"
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "20x20"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "29x29"
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "29x29"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "29x29"
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "29x29"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "40x40"
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "40x40"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "40x40"
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "40x40"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "60x60"
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "60x60"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "60x60"
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "60x60"
     },
     {
-      "idiom" : "ios-marketing",
-      "scale" : "1x",
-      "size" : "1024x1024"
+      "idiom": "ios-marketing",
+      "scale": "1x",
+      "size": "1024x1024"
     }
   ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
+  "info": {
+    "author": "xcode",
+    "version": 1
   }
 }

example/ios/test2/Images.xcassets/Contents.json

@@ -1,6 +1,6 @@
 {
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+  "info": {
+    "version": 1,
+    "author": "xcode"
   }
 }

example/package.json

@@ -7,7 +7,8 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "prettier": "prettier --write '**/*.{json,md,js,jsx,ts,tsx}'"
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",

example/src/App.tsx

@@ -1,39 +1,67 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Text, View } from 'react-native';
 import 'react-native-gesture-handler';
 import { NavigationContainer } from '@react-navigation/native';
-import {createStackNavigator} from '@react-navigation/stack';
-import {Grid} from './screens/Grid';
-import {List} from './screens/List';
-import {Map} from './screens/Map';
-import {Menu} from './screens/Menu';
-import {Search} from './screens/Search';
-import {VoiceControl} from './screens/VoiceControl';
-import {TabBar} from './screens/TabBar';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Grid } from './screens/Grid';
+import { List } from './screens/List';
+import { Map } from './screens/Map';
+import { Menu } from './screens/Menu';
+import { Search } from './screens/Search';
+import { VoiceControl } from './screens/VoiceControl';
+import { TabBar } from './screens/TabBar';
 import { Contact } from './screens/Contact';
 import { ActionSheet } from './screens/ActionSheet';
 import { Alert } from './screens/Alert';
 import { Information } from './screens/Information';
 import { NowPlaying } from './screens/NowPlaying';
 import { POI } from './screens/POI';
+import { CarPlay } from 'react-native-carplay';
 
 const Stack = createStackNavigator();
 
-export const App = () => (
-  <NavigationContainer>
-    <Stack.Navigator initialRouteName="Menu">
-      <Stack.Screen name="List" component={List} />
-      <Stack.Screen name="Search" component={Search} />
-      <Stack.Screen name="Contact" component={Contact} />
-      <Stack.Screen name="VoiceControl" component={VoiceControl} />
-      <Stack.Screen name="Map" component={Map} />
-      <Stack.Screen name="TabBar" component={TabBar} />
-      <Stack.Screen name="Grid" component={Grid} />
-      <Stack.Screen name="ActionSheet" component={ActionSheet} />
-      <Stack.Screen name="Alert" component={Alert} />
-      <Stack.Screen name="Information" component={Information} />
-      <Stack.Screen name="NowPlaying" component={NowPlaying} />
-      <Stack.Screen name="POI" component={POI} />
-      <Stack.Screen name="Menu" component={Menu} />
-    </Stack.Navigator>
-  </NavigationContainer>
-);
+export const App = () => {
+  const [carPlayConnected, setCarPlayConnected] = useState(CarPlay.connected);
+
+  useEffect(() => {
+    function onConnect() {
+      setCarPlayConnected(true);
+    }
+
+    function onDisconnect() {
+      setCarPlayConnected(false);
+    }
+
+    CarPlay.registerOnConnect(onConnect);
+    CarPlay.registerOnDisconnect(onDisconnect);
+
+    return () => {
+      CarPlay.unregisterOnConnect(onConnect);
+      CarPlay.unregisterOnDisconnect(onDisconnect);
+    };
+  });
+
+  return carPlayConnected ? (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Menu">
+        <Stack.Screen name="List" component={List} />
+        <Stack.Screen name="Search" component={Search} />
+        <Stack.Screen name="Contact" component={Contact} />
+        <Stack.Screen name="VoiceControl" component={VoiceControl} />
+        <Stack.Screen name="Map" component={Map} />
+        <Stack.Screen name="TabBar" component={TabBar} />
+        <Stack.Screen name="Grid" component={Grid} />
+        <Stack.Screen name="ActionSheet" component={ActionSheet} />
+        <Stack.Screen name="Alert" component={Alert} />
+        <Stack.Screen name="Information" component={Information} />
+        <Stack.Screen name="NowPlaying" component={NowPlaying} />
+        <Stack.Screen name="POI" component={POI} />
+        <Stack.Screen name="Menu" component={Menu} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  ) : (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Please connect Car Play and open the test app</Text>
+    </View>
+  );
+};

example/src/screens/ActionSheet.tsx

@@ -2,36 +2,40 @@ import React, { useEffect } from 'react';
 import { Text, View } from 'react-native';
 import { CarPlay, ActionSheetTemplate } from 'react-native-carplay';
 
-export function ActionSheet() {
+export function ActionSheet({ navigation }) {
   useEffect(() => {
     const template = new ActionSheetTemplate({
       title: 'Example',
       message: 'This is an message for you',
-      actions: [{
-        id: 'ok',
-        title: 'Ok'
-      },{
-        id: 'cancel',
-        title: 'Cancel',
-        style: 'cancel'
-      }, {
-        id: 'remove',
-        title: 'Remove',
-        style: 'destructive',
-      }],
+      actions: [
+        {
+          id: 'ok',
+          title: 'Ok',
+        },
+        {
+          id: 'cancel',
+          title: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          id: 'remove',
+          title: 'Remove',
+          style: 'destructive',
+        },
+      ],
       onActionButtonPressed(e) {
-        console.log('e', e);
-      }
+        navigation.navigate('Menu');
+      },
     });
     CarPlay.presentTemplate(template);
-    return () => {}
+    return () => {};
   }, []);
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Action Sheet</Text>
     </View>
-  )
+  );
 }
 
 ActionSheet.navigationOptions = {