feat: lots

README.md

@@ -14,6 +14,157 @@ This version of `react-native-carplay` supports iOS 14. If you need support for
 
 ## CarPlay Entitlement and XCode Project Setup
 
+### Entitlement matrix
+
+<table>
+<tr>
+<thead>
+<th></th>
+
+<th>List</th>
+<th>Grid</th>
+<th>TabBar</th>
+
+<th>Alert</th>
+<th>ActionSheet</th>
+
+<th>VoiceControl</th>
+<th>NowPlaying</th>
+
+<th>Map</th>
+<th>Search</th>
+
+<th>POI</th>
+<th>Information</th>
+
+<th>Contact</th>
+</thead>
+<tbody>
+<tr>
+<td>
+com.apple.developer.carplay-audio
+</td>
+<td>✅</td>
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+<td>❌</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>❌</td>
+</tr>
+<tr>
+<td>com.apple.developer.carplay-communication</td>
+<td>✅</td>
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+<td>❌</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>❌</td>
+<td>✅</td>
+
+<td>✅</td>
+</tr>
+<tr>
+<td>com.apple.developer.carplay-charging</td>
+<td>✅</td>
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+</tr>
+<tr>
+<td>com.apple.developer.carplay-maps</td>
+<td>✅</td>
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+<td>❌</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>❌</td>
+<td>✅</td>
+
+<td>✅</td>
+</tr>
+<tr>
+<td>com.apple.developer.carplay-parking</td>
+<td>✅</td>
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+</tr>
+<tr>
+<td>com.apple.developer.carplay-quick-ordering</td>
+<td>✅</td>
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>❌</td>
+<td>❌</td>
+
+<td>✅</td>
+<td>✅</td>
+
+<td>✅</td>
+</tr>
+</tbody>
+</table>
+
 #### Read this section if you are new to CarPlay!
 
 One of the most useful resources for undertanding the requirements, constraints and capabilities of CarPlay apps is the official [App Programming Guidelines](https://developer.apple.com/carplay/documentation/CarPlay-App-Programming-Guide.pdf) from Apple. It's a 50-page document that clearly lays out steps required and you are strongly encouraged to read it if you are new to CarPlay. Further to the above guide, when developing a CarPlay app or if contributing to this package; you'll find the [CarPlay Documentation](https://developer.apple.com/documentation/carplay?language=objc) invaluable.

example-scenes/index.js

@@ -1,4 +1,4 @@
 import {AppRegistry} from 'react-native';
-import {App} from './App';
+import {App} from './src/App';
 
 AppRegistry.registerComponent('Example', () => App);

example-scenes/ios/Entitlements.plist

@@ -1,15 +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">
-<!--
-   Entitlements.plist
-   RNCarPlayScene
-
-   Created by Birkir Gudjonsson on 21.4.2022.
-   Copyright (c) 2022 ___ORGANIZATIONNAME___. All rights reserved.
--->
 <plist version="1.0">
-  <dict>
-    <key>com.apple.developer.carplay-audio</key>
-    <true />
-  </dict>
+<dict>
+	<key>com.apple.developer.carplay-parking</key>
+	<true/>
+</dict>
 </plist>

example-scenes/ios/Podfile.lock

@@ -284,6 +284,12 @@ PODS:
     - glog
   - react-native-carplay (2.1.0):
     - React
+  - react-native-safe-area-context (4.5.3):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - ReactCommon/turbomodule/core
   - React-perflogger (0.68.1)
   - React-RCTActionSheet (0.68.1):
     - React-Core/RCTActionSheetHeaders (= 0.68.1)
@@ -349,6 +355,11 @@ PODS:
     - React-jsi (= 0.68.1)
     - React-logger (= 0.68.1)
     - React-perflogger (= 0.68.1)
+  - RNGestureHandler (2.10.1):
+    - React-Core
+  - RNScreens (3.20.0):
+    - React-Core
+    - React-RCTImage
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -398,6 +409,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-carplay (from `../node_modules/react-native-carplay`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -410,6 +422,8 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -469,6 +483,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-carplay:
     :path: "../node_modules/react-native-carplay"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-perflogger:
     :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
@@ -493,6 +509,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -529,6 +549,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 218a2503198ff28a085f8e16622a8d8f507c8019
   React-logger: f79dd3cc0f9b44f5611c6c7862badd891a862cf8
   react-native-carplay: c95ba25269364772d115c61c4554ed476559d318
+  react-native-safe-area-context: b8979f5eda6ed5903d4dbc885be3846ea3daa753
   React-perflogger: 30ab8d6db10e175626069e742eead3ebe8f24fd5
   React-RCTActionSheet: 4b45da334a175b24dabe75f856b98fed3dfd6201
   React-RCTAnimation: d6237386cb04500889877845b3e9e9291146bc2e
@@ -541,10 +562,12 @@ SPEC CHECKSUMS:
   React-RCTVibration: 9e344c840176b0af9c84d5019eb4fed8b3c105a1
   React-runtimeexecutor: 7285b499d0339104b2813a1f58ad1ada4adbd6c0
   ReactCommon: bf2888a826ceedf54b99ad1b6182d1bc4a8a3984
+  RNGestureHandler: 42ec7c28dd02d540ed6c9159c57a98ff016492dc
+  RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 17cd9a50243093b547c1e539c749928dd68152da
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: b34ce73fed5681c86f0932be67765e71b6ea9754
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.10.1

example-scenes/package.json

@@ -6,13 +6,19 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
+    "bundle": "cd ..; yarn build; cd -; cp -r ../{ios,lib,src} node_modules/react-native-carplay/.",
     "test": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/stack": "^6.3.16",
     "react": "17.0.2",
     "react-native": "0.68.1",
-    "react-native-carplay": "*"
+    "react-native-carplay": "*",
+    "react-native-gesture-handler": "^2.10.1",
+    "react-native-safe-area-context": "^4.5.3",
+    "react-native-screens": "^3.20.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

example-scenes/src/App.tsx

@@ -0,0 +1,67 @@
+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 { 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 = () => {
+  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>
+  );
+};