@iternio/react-native-auto-play 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +481 -31
- package/ios/hybrid/HybridAutoPlay.swift +8 -0
- package/ios/scenes/AutoPlayInterfaceController.swift +3 -0
- package/lib/specs/VoiceInput.nitro.d.ts +8 -0
- package/lib/specs/VoiceInput.nitro.js +1 -0
- package/package.json +1 -1
- package/lib/hooks/useIsAutoPlayFocused.d.ts +0 -7
- package/lib/hooks/useIsAutoPlayFocused.js +0 -20
- package/lib/hybrid.d.ts +0 -2
- package/lib/hybrid.js +0 -2
package/README.md
CHANGED
|
@@ -1,38 +1,488 @@
|
|
|
1
|
-
# react-native-nitro-template
|
|
2
1
|
|
|
3
|
-
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
# React Native Auto Play
|
|
7
|
+
|
|
8
|
+
**React Native Auto Play** provides a comprehensive solution for integrating your React Native application with both **Apple CarPlay** and **Android Auto**. This library allows you to build automotive-specific user interfaces using familiar React Native components and concepts.
|
|
9
|
+
|
|
10
|
+
[](https://www.npmjs.com/package/@iternio/react-native-auto-play)
|
|
11
|
+
[](https://www.npmjs.com/package/@iternio/react-native-auto-play)
|
|
12
|
+
[](https://github.com/Iternio-Planning-AB/react-native-auto-play/blob/master/LICENSE.md)
|
|
13
|
+
|
|
14
|
+
## Features
|
|
15
|
+
|
|
16
|
+
- **Cross-Platform:** Write once, run on both Apple CarPlay and Android Auto.
|
|
17
|
+
- **Both Architectures:** Supports both the legacy and the new React Native architecture.
|
|
18
|
+
- **Template-Based UI:** Utilize a rich set of templates like `MapTemplate`, `ListTemplate`, `GridTemplate`, and more to build UIs that comply with automotive design guidelines.
|
|
19
|
+
- **Navigation APIs:** Build full-featured navigation experiences with APIs for trip management, maneuvers, and route guidance.
|
|
20
|
+
- **Dashboard & Cluster Support:** Extend your app's presence to the CarPlay Dashboard (CarPlay only) and instrument cluster displays (CarPlay & Android Auto).
|
|
21
|
+
- **Hooks-Based API:** A modern and intuitive API using React Hooks (`useMapTemplate`, `useVoiceInput`, etc.) for interacting with the automotive system.
|
|
22
|
+
- **Headless Operation:** Runs in the background to keep the automotive experience alive even when the main app is not in the foreground.
|
|
23
|
+
- **Powered by [NitroModules](https://nitro.margelo.com/)**
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
1. **Install the package and its peer dependencies:**
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn add @iternio/react-native-auto-play react-native-nitro-modules
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
2. **For iOS, install the pods:**
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
cd ios && pod install && cd ..
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
3. **For Android, the library will be autolinked.**
|
|
40
|
+
|
|
41
|
+
## Platform Setup
|
|
42
|
+
|
|
43
|
+
### iOS
|
|
44
|
+
|
|
45
|
+
#### Bundle identifier
|
|
46
|
+
To get the CarPlay app showing up you need to set a proper Bundle Identifier:
|
|
47
|
+
- Open `example.xcodeproj`
|
|
48
|
+
- Select the example target, go to the **Signing & Capabilities** tab.
|
|
49
|
+
- Under **Signing > Bundle Identifier**, enter your unique bundle ID (e.g., `at.g4rb4g3.autoplay.example`).
|
|
50
|
+
|
|
51
|
+
#### Entitlements
|
|
52
|
+
Create a `Entitlements.plist` file in your project, paste the content below and adjust the **com.apple.developer.carplay-maps** key to your needs. Check [Apple docs](https://developer.apple.com/documentation/carplay/requesting-carplay-entitlements) for details.
|
|
53
|
+
|
|
54
|
+
```xml
|
|
55
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
56
|
+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
|
57
|
+
<plist version="1.0">
|
|
58
|
+
<dict>
|
|
59
|
+
<key>com.apple.developer.carplay-maps</key>
|
|
60
|
+
<true/>
|
|
61
|
+
<key>application-identifier</key>
|
|
62
|
+
<string>$(AppIdentifierPrefix)$(CFBundleIdentifier)</string>
|
|
63
|
+
</dict>
|
|
64
|
+
</plist>
|
|
65
|
+
```
|
|
66
|
+
- Open `example.xcodeproj`
|
|
67
|
+
- Select the example target, go to the **Build Settings tab** and filter for entitlement.
|
|
68
|
+
- On **Code Signing Entitlements** enter the path to the Entitlements.plist file you just created.
|
|
69
|
+
|
|
70
|
+
#### Scene delegates
|
|
71
|
+
Depending on your needs you need to set up the scene delegates. The library brings following delegates:
|
|
72
|
+
|
|
73
|
+
- WindowApplicationSceneDelegate - The main scene visible on your mobile device
|
|
74
|
+
- HeadUnitSceneDelegate - The main scene on CarPlay device
|
|
75
|
+
- DashboardSceneDelegate - Scene visible on the CarPlay overview screen usualy with some other widgets like calendar, weather or music.
|
|
76
|
+
- ClusterSceneDelegate - Scene visible on a cars instrument cluster.
|
|
77
|
+
|
|
78
|
+
Paste this into your Info.plist and adjust it to your needs. Check [Apple docs](https://developer.apple.com/documentation/carplay/displaying-content-in-carplay) for details.
|
|
79
|
+
```xml
|
|
80
|
+
<key>UIApplicationSceneManifest</key>
|
|
81
|
+
<dict>
|
|
82
|
+
<key>CPSupportsDashboardNavigationScene</key>
|
|
83
|
+
<true/>
|
|
84
|
+
<key>CPSupportsInstrumentClusterNavigationScene</key>
|
|
85
|
+
<true/>
|
|
86
|
+
<key>UIApplicationSupportsMultipleScenes</key>
|
|
87
|
+
<true/>
|
|
88
|
+
<key>UISceneConfigurations</key>
|
|
89
|
+
<dict>
|
|
90
|
+
<key>CPTemplateApplicationDashboardSceneSessionRoleApplication</key>
|
|
91
|
+
<array>
|
|
92
|
+
<dict>
|
|
93
|
+
<key>UISceneClassName</key>
|
|
94
|
+
<string>CPTemplateApplicationDashboardScene</string>
|
|
95
|
+
<key>UISceneConfigurationName</key>
|
|
96
|
+
<string>CarPlayDashboard</string>
|
|
97
|
+
<key>UISceneDelegateClassName</key>
|
|
98
|
+
<string>DashboardSceneDelegate</string>
|
|
99
|
+
</dict>
|
|
100
|
+
</array>
|
|
101
|
+
<key>CPTemplateApplicationInstrumentClusterSceneSessionRoleApplication</key>
|
|
102
|
+
<array>
|
|
103
|
+
<dict>
|
|
104
|
+
<key>UISceneClassName</key>
|
|
105
|
+
<string>CPTemplateApplicationInstrumentClusterScene</string>
|
|
106
|
+
<key>UISceneConfigurationName</key>
|
|
107
|
+
<string>CarPlayCluster</string>
|
|
108
|
+
<key>UISceneDelegateClassName</key>
|
|
109
|
+
<string>ClusterSceneDelegate</string>
|
|
110
|
+
</dict>
|
|
111
|
+
</array>
|
|
112
|
+
<key>CPTemplateApplicationSceneSessionRoleApplication</key>
|
|
113
|
+
<array>
|
|
114
|
+
<dict>
|
|
115
|
+
<key>UISceneClassName</key>
|
|
116
|
+
<string>CPTemplateApplicationScene</string>
|
|
117
|
+
<key>UISceneConfigurationName</key>
|
|
118
|
+
<string>CarPlayHeadUnit</string>
|
|
119
|
+
<key>UISceneDelegateClassName</key>
|
|
120
|
+
<string>HeadUnitSceneDelegate</string>
|
|
121
|
+
</dict>
|
|
122
|
+
</array>
|
|
123
|
+
<key>UIWindowSceneSessionRoleApplication</key>
|
|
124
|
+
<array>
|
|
125
|
+
<dict>
|
|
126
|
+
<key>UISceneClassName</key>
|
|
127
|
+
<string>UIWindowScene</string>
|
|
128
|
+
<key>UISceneConfigurationName</key>
|
|
129
|
+
<string>WindowApplication</string>
|
|
130
|
+
<key>UISceneDelegateClassName</key>
|
|
131
|
+
<string>WindowApplicationSceneDelegate</string>
|
|
132
|
+
</dict>
|
|
133
|
+
</array>
|
|
134
|
+
</dict>
|
|
135
|
+
</dict>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
#### MapTemplate
|
|
139
|
+
if you want to make use of the MapTemplate and render react components you need to add this to your AppDelegate.swift
|
|
140
|
+
This should cover old and new architecture, adjust to your needs!
|
|
141
|
+
|
|
142
|
+
```swift
|
|
143
|
+
@objc func getRootViewForAutoplay(
|
|
144
|
+
moduleName: String,
|
|
145
|
+
initialProperties: [String: Any]?
|
|
146
|
+
) -> UIView? {
|
|
147
|
+
if RCTIsNewArchEnabled() {
|
|
148
|
+
if let factory = reactNativeFactory?.rootViewFactory as? ExpoReactRootViewFactory {
|
|
149
|
+
return factory.superView(
|
|
150
|
+
withModuleName: moduleName,
|
|
151
|
+
initialProperties: initialProperties,
|
|
152
|
+
launchOptions: nil
|
|
153
|
+
)
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
return reactNativeFactory?.rootViewFactory.view(
|
|
157
|
+
withModuleName: moduleName,
|
|
158
|
+
initialProperties: initialProperties
|
|
159
|
+
)
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
if let rootView = window?.rootViewController?.view as? RCTRootView {
|
|
163
|
+
return RCTRootView(
|
|
164
|
+
bridge: rootView.bridge,
|
|
165
|
+
moduleName: moduleName,
|
|
166
|
+
initialProperties: initialProperties
|
|
167
|
+
)
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
return nil
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
#### MapTemplate maneuver dark & light mode
|
|
175
|
+
It is recommended to attach a listener to MapTemplate.onAppearanceDidChange and send maneuver updates based on this to make sure the colors are applied properly.
|
|
176
|
+
Reason for this is that CarPlay does not allow for color updates on maneuvers shown on the screen. You need to send maneuvers with a new id to get them updated properly on the screen.
|
|
177
|
+
The color properties do not need to handle the mode change, best practice is to use ThemedColor whenever possible and set appropriate light and dark mode colors.
|
|
178
|
+
This is mainly required on CarPlay for now since Android Auto lacks light mode.
|
|
179
|
+
|
|
180
|
+
#### Dashboard buttons
|
|
181
|
+
In case you wanna open up your CarPlay app from one of the CarPlay dashboard buttons set `launchHeadUnitScene` on the button and add this to your Info.plist. Make sure to apply your "Bundle Identifier" instead of the example one.
|
|
182
|
+
```xml
|
|
183
|
+
<key>CFBundleURLTypes</key>
|
|
184
|
+
<array>
|
|
185
|
+
<dict>
|
|
186
|
+
<key>CFBundleTypeRole</key>
|
|
187
|
+
<string>Editor</string>
|
|
188
|
+
<key>CFBundleURLSchemes</key>
|
|
189
|
+
<array>
|
|
190
|
+
<string>at.g4rb4g3.autoplay.example</string>
|
|
191
|
+
</array>
|
|
192
|
+
</dict>
|
|
193
|
+
</array>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
### Android Auto
|
|
197
|
+
No platform specific setup required - we got you covered with all the required stuff.
|
|
198
|
+
|
|
199
|
+
### Android Auto Customization
|
|
200
|
+
You can customize certain behaviors of the library on Android Auto by setting properties in your app's `android/gradle.properties` file.
|
|
201
|
+
|
|
202
|
+
- **Telemetry Update Interval**: Control how often telemetry data is updated.
|
|
203
|
+
```properties
|
|
204
|
+
ReactNativeAutoPlay_androidTelemetryUpdateInterval=4000
|
|
205
|
+
```
|
|
206
|
+
The value is in milliseconds. The default is `4000`.
|
|
207
|
+
|
|
208
|
+
- **UI Scale Factor**: Apply a scaling factor to the React Native UI rendered on the car screen. This does not affect the templates.
|
|
209
|
+
```properties
|
|
210
|
+
ReactNativeAutoPlay_androidAutoScaleFactor=1.5f
|
|
211
|
+
```
|
|
212
|
+
The default value is `1.5`.
|
|
213
|
+
|
|
214
|
+
- **Cluster Splash Screen**: Customize the splash screen shown on the instrument cluster.
|
|
215
|
+
```properties
|
|
216
|
+
# Delay in milliseconds after the root component is rendered before the splash screen hides.
|
|
217
|
+
ReactNativeAutoPlay_clusterSplashDelayMs=1000
|
|
218
|
+
# Duration of the splash screen fade out animation in milliseconds.
|
|
219
|
+
ReactNativeAutoPlay_clusterSplashDurationMs=500
|
|
220
|
+
```
|
|
221
|
+
The default values are `1000` for the delay and `500` for the duration.
|
|
222
|
+
|
|
223
|
+
## Icons
|
|
224
|
+
The library is using [Material Symbols](https://fonts.google.com/icons) for iconography. The font is bundled with the library, so no extra setup is required. You can use these icons on both Android Auto and CarPlay.
|
|
225
|
+
|
|
226
|
+
It is also possible to use custom bundled images (e.g. PNG, WEBP or Vector Drawables). Make sure to add them to your native projects.
|
|
227
|
+
- iOS: Add to your `Images.xcassets`
|
|
228
|
+
- Android: Add to `res/drawable`
|
|
4
229
|
|
|
5
230
|
## Usage
|
|
6
231
|
|
|
7
|
-
|
|
232
|
+
### 1. Register the AutoPlay Components
|
|
233
|
+
|
|
234
|
+
You need to register your AutoPlay components in your app's entry file (e.g., `index.js`). This includes setting up the headless task that runs when CarPlay or Android Auto is connected.
|
|
235
|
+
|
|
236
|
+
```javascript
|
|
237
|
+
// index.js
|
|
238
|
+
import { AppRegistry } from 'react-native';
|
|
239
|
+
import { name as appName } from './app.json';
|
|
240
|
+
import App from './src/App';
|
|
241
|
+
import registerAutoPlay from './src/AutoPlay'; // Your AutoPlay setup
|
|
242
|
+
|
|
243
|
+
AppRegistry.registerComponent(appName, () => App);
|
|
244
|
+
registerAutoPlay();
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
### 2. Create the AutoPlay Experience
|
|
248
|
+
|
|
249
|
+
Create a file (e.g., `src/AutoPlay.js`) to define your automotive UI. This is where you will configure your templates and the React components they will render.
|
|
250
|
+
|
|
251
|
+
```tsx
|
|
252
|
+
// src/AutoPlay.tsx
|
|
253
|
+
import {
|
|
254
|
+
AutoPlayCluster,
|
|
255
|
+
CarPlayDashboard,
|
|
256
|
+
HybridAutoPlay,
|
|
257
|
+
MapTemplate,
|
|
258
|
+
useMapTemplate,
|
|
259
|
+
} from '@iternio/react-native-auto-play';
|
|
260
|
+
import React, { useEffect } from 'react';
|
|
261
|
+
import { Platform, Text, View } from 'react-native';
|
|
262
|
+
|
|
263
|
+
// A simple component that can be reused across different screens
|
|
264
|
+
const MyCarScreen = ({ title }: { title: string }) => (
|
|
265
|
+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
|
266
|
+
<Text style={{ color: 'white', fontSize: 24 }}>{title}</Text>
|
|
267
|
+
</View>
|
|
268
|
+
);
|
|
269
|
+
|
|
270
|
+
// The React component to be rendered inside the MapTemplate
|
|
271
|
+
const MapScreen = () => {
|
|
272
|
+
const mapTemplate = useMapTemplate();
|
|
273
|
+
|
|
274
|
+
useEffect(() => {
|
|
275
|
+
// Show an alert on the car screen when the component mounts
|
|
276
|
+
mapTemplate?.showAlert({
|
|
277
|
+
id: 'welcome-alert',
|
|
278
|
+
title: { text: 'Welcome!' },
|
|
279
|
+
subtitle: { text: 'Your app is now running on the car screen.' },
|
|
280
|
+
durationMs: 5000,
|
|
281
|
+
priority: 'low',
|
|
282
|
+
});
|
|
283
|
+
}, [mapTemplate]);
|
|
284
|
+
|
|
285
|
+
return <MyCarScreen title="Hello, Map!" />;
|
|
286
|
+
};
|
|
287
|
+
|
|
288
|
+
const registerAutoPlay = () => {
|
|
289
|
+
const onConnect = () => {
|
|
290
|
+
// When a car is connected, create a MapTemplate and set it as the root
|
|
291
|
+
const rootTemplate = new MapTemplate({
|
|
292
|
+
component: MapScreen, // Render our map component
|
|
293
|
+
headerActions: {
|
|
294
|
+
android: [
|
|
295
|
+
{
|
|
296
|
+
type: 'image',
|
|
297
|
+
image: { name: 'search', type: 'glyph' },
|
|
298
|
+
onPress: () => console.log('Search pressed'),
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
type: 'image',
|
|
302
|
+
image: { name: 'cog', type: 'glyph' },
|
|
303
|
+
onPress: () => console.log('Settings pressed'),
|
|
304
|
+
},
|
|
305
|
+
],
|
|
306
|
+
ios: {
|
|
307
|
+
leadingNavigationBarButtons: [
|
|
308
|
+
{
|
|
309
|
+
type: 'image',
|
|
310
|
+
image: { name: 'search', type: 'glyph' },
|
|
311
|
+
onPress: () => console.log('Search pressed'),
|
|
312
|
+
},
|
|
313
|
+
],
|
|
314
|
+
trailingNavigationBarButtons: [
|
|
315
|
+
{
|
|
316
|
+
type: 'image',
|
|
317
|
+
image: { name: 'cog', type: 'glyph' },
|
|
318
|
+
onPress: () => console.log('Settings pressed'),
|
|
319
|
+
},
|
|
320
|
+
],
|
|
321
|
+
},
|
|
322
|
+
},
|
|
323
|
+
});
|
|
324
|
+
|
|
325
|
+
rootTemplate.setRootTemplate();
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
// Register components for the Dashboard and Cluster
|
|
329
|
+
if (Platform.OS === 'ios') {
|
|
330
|
+
CarPlayDashboard.setComponent(() => <MyCarScreen title="Hello, Dashboard!" />);
|
|
331
|
+
}
|
|
332
|
+
AutoPlayCluster.setComponent(() => <MyCarScreen title="Hello, Cluster!" />);
|
|
333
|
+
|
|
334
|
+
|
|
335
|
+
// Add listeners for car connection and disconnection events
|
|
336
|
+
HybridAutoPlay.addListener('didConnect', onConnect);
|
|
337
|
+
HybridAutoPlay.addListener('didDisconnect', () => {
|
|
338
|
+
console.log('Car disconnected');
|
|
339
|
+
});
|
|
340
|
+
};
|
|
341
|
+
export default registerAutoPlay;
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
## API Reference
|
|
345
|
+
|
|
346
|
+
### Main Object
|
|
347
|
+
|
|
348
|
+
- `HybridAutoPlay`: The primary interface for interacting with the native module, handling connection status and events.
|
|
349
|
+
|
|
350
|
+
### Localization
|
|
351
|
+
The library allows you to pass distances and durations and formats them according to the system defaults.
|
|
352
|
+
For iOS make sure to provide all supported app languages in Info.plist CFBundleLocalizations for this to work properly, missing languages will use CFBundleDevelopmentRegion as fallback which is **en** most of the time. This results in a mix up with the region which might result in **en**_AT instead of **de**_AT for example.
|
|
353
|
+
|
|
354
|
+
### Component Props
|
|
355
|
+
|
|
356
|
+
#### RootComponentInitialProps
|
|
357
|
+
|
|
358
|
+
Every component registered with a template (e.g., via `MapTemplate`'s `component` prop) or a scene (e.g., `CarPlayDashboard.setComponent`) receives `RootComponentInitialProps` as its props. This object contains important information about the environment where the component is being rendered.
|
|
359
|
+
|
|
360
|
+
- `id`: A unique identifier for the screen. Can be `AutoPlayRoot` for the main screen, `CarPlayDashboard` for the dashboard, or a UUID for cluster displays.
|
|
361
|
+
- `rootTag`: The React Native root tag for the view.
|
|
362
|
+
- `colorScheme`: The initial color scheme (`'dark'` or `'light'`). Listen for changes with the `onAppearanceDidChange` event on the template.
|
|
363
|
+
- `window`: An object containing the dimensions and scale of the screen:
|
|
364
|
+
- `width`: The width of the screen.
|
|
365
|
+
- `height`: The height of the screen.
|
|
366
|
+
- `scale`: The screen's scale factor.
|
|
367
|
+
|
|
368
|
+
**iOS Specific Properties:**
|
|
369
|
+
|
|
370
|
+
On iOS, the component registered with `AutoPlayCluster.setComponent` receives additional props in its `RootComponentInitialProps` that indicate user preferences for the cluster display. You can also listen for changes to these settings.
|
|
371
|
+
|
|
372
|
+
- `compass: boolean`: Indicates if the compass display is enabled by the user. The initial value is passed as a prop.
|
|
373
|
+
- `speedLimit: boolean`: Indicates if the speed limit display is enabled by the user. The initial value is passed as a prop.
|
|
374
|
+
|
|
375
|
+
You can listen for changes to these settings using listeners on the `AutoPlayCluster` object:
|
|
376
|
+
|
|
377
|
+
```tsx
|
|
378
|
+
// Listen for compass setting changes
|
|
379
|
+
const compassCleanup = AutoPlayCluster.addListenerCompass((clusterId, isEnabled) => {
|
|
380
|
+
console.log(`Compass is now ${isEnabled ? 'enabled' : 'disabled'} for cluster ${clusterId}`);
|
|
381
|
+
});
|
|
382
|
+
|
|
383
|
+
// Listen for speed limit setting changes
|
|
384
|
+
const speedLimitCleanup = AutoPlayCluster.addListenerSpeedLimit((clusterId, isEnabled) => {
|
|
385
|
+
console.log(`Speed limit is now ${isEnabled ? 'enabled' : 'disabled'} for cluster ${clusterId}`);
|
|
386
|
+
});
|
|
387
|
+
|
|
388
|
+
// Don't forget to clean up the listeners when your component unmounts
|
|
389
|
+
useEffect(() => {
|
|
390
|
+
return () => {
|
|
391
|
+
compassCleanup();
|
|
392
|
+
speedLimitCleanup();
|
|
393
|
+
};
|
|
394
|
+
}, []);
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
|
|
398
|
+
### Templates
|
|
399
|
+
|
|
400
|
+
- `MapTemplate`: For navigation apps.
|
|
401
|
+
- `ListTemplate`: To display a list of items.
|
|
402
|
+
- `GridTemplate`: To display a grid of items.
|
|
403
|
+
- `SearchTemplate`: For search functionality.
|
|
404
|
+
- `InformationTemplate`: For showing information with actions.
|
|
405
|
+
- `MessageTemplate`: For displaying messages.
|
|
406
|
+
|
|
407
|
+
### Hooks
|
|
408
|
+
|
|
409
|
+
- `useMapTemplate()`: Get a reference to the parent `MapTemplate` instance.
|
|
410
|
+
- `useVoiceInput()`: Access voice input functionality - Android Auto only.
|
|
411
|
+
- `useSafeAreaInsets()`: Get safe area insets for any root component.
|
|
412
|
+
- `useFocusedEffect()`: A useEffect alternative that executes when the specified component is visible to the user - use any of the `AutoPlayModules` enum or a cluster uuid to sepcify the component the effect should listen for.
|
|
413
|
+
- `useAndroidAutoTelemetry()`: Access to car telemetry data on Android Auto.
|
|
414
|
+
```tsx
|
|
415
|
+
import {
|
|
416
|
+
useAndroidAutoTelemetry,
|
|
417
|
+
AndroidAutoTelemetryPermissions,
|
|
418
|
+
} from '@iternio/react-native-auto-play';
|
|
419
|
+
|
|
420
|
+
const MyComponent = () => {
|
|
421
|
+
const { telemetry, permissionsGranted, error } = useAndroidAutoTelemetry({
|
|
422
|
+
requiredPermissions: [
|
|
423
|
+
AndroidAutoTelemetryPermissions.Speed,
|
|
424
|
+
AndroidAutoTelemetryPermissions.Energy,
|
|
425
|
+
AndroidAutoTelemetryPermissions.Odometer,
|
|
426
|
+
],
|
|
427
|
+
});
|
|
428
|
+
|
|
429
|
+
if (!permissionsGranted) {
|
|
430
|
+
return <Text>Waiting for telemetry permissions...</Text>;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
if (error) {
|
|
434
|
+
return <Text>Error getting telemetry: {error}</Text>;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
return (
|
|
438
|
+
<View>
|
|
439
|
+
<Text>Speed: {telemetry?.speed?.value} km/h</Text>
|
|
440
|
+
<Text>Fuel Level: {telemetry?.fuelLevel?.value}%</Text>
|
|
441
|
+
<Text>Battery Level: {telemetry?.batteryLevel?.value}%</Text>
|
|
442
|
+
<Text>Range: {telemetry?.range?.value} km</Text>
|
|
443
|
+
<Text>Odometer: {telemetry?.odometer?.value} km</Text>
|
|
444
|
+
</View>
|
|
445
|
+
);
|
|
446
|
+
}
|
|
447
|
+
```
|
|
448
|
+
The `telemetry` object may contain the following fields. Each field is an object with a `value` and a `timestamp`.
|
|
449
|
+
- `speed`: Speed in km/h.
|
|
450
|
+
- `fuelLevel`: Fuel level in %.
|
|
451
|
+
- `batteryLevel`: Battery level in %.
|
|
452
|
+
- `range`: Range in km.
|
|
453
|
+
- `odometer`: Odometer in km.
|
|
454
|
+
- `vehicle`: Vehicle information (model name, model year, manufacturer).
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
### Scenes
|
|
458
|
+
|
|
459
|
+
- `CarPlayDashboard`: A component to render content on the CarPlay dashboard (CarPlay only).
|
|
460
|
+
- `AutoPlayCluster`: A component to render content on the instrument cluster (CarPlay & Android Auto).
|
|
461
|
+
|
|
462
|
+
## Known Issues
|
|
463
|
+
|
|
464
|
+
### iOS
|
|
465
|
+
|
|
466
|
+
- **Broken exceptions with `react-native-skia`**: When using `react-native-skia` up to version `2.4.7`, exceptions on iOS are not reported correctly. This is fixed in newer versions of `react-native-skia`. For more details, see this [pull request](https://github.com/Shopify/react-native-skia/pull/3595).
|
|
467
|
+
- **AppState on iOS**: The `AppState` module from React Native does not work correctly on iOS because this library uses scenes, which are not supported by the stock `AppState` module. This library provides a custom state listener that works for both Android and iOS. Use `HybridAutoPlay.addListenerRenderState` instead of `AppState`.
|
|
468
|
+
- **Timers stop on screen lock**: iOS stops all timers when the device's main screen is turned off. To ensure timers continue to run (which is often necessary for background tasks related to autoplay), a patch for `react-native` is required. A patch is included in the root `patches/` directory and can be applied using `patch-package`.
|
|
469
|
+
- **expo-splash-screen stuck on iOS**: The `expo-splash-screen` module is broken on iOS because it does not support scenes, which are used by this library. This can cause the splash screen to be stuck on either the mobile device or on CarPlay. To fix this, a patch for `expo-splash-screen` is included in the root `patches/` directory and can be applied using `patch-package`. After applying the patch, you can hide the splash screen for a specific scene by passing the module name to the `hide` or `hideAsync` function. The module name can be one of the values from the `AutoPlayModules` enum or the UUID of a cluster screen.
|
|
470
|
+
```tsx
|
|
471
|
+
import { hideAsync } from 'expo-splash-screen';
|
|
472
|
+
import { AutoPlayModules } from '@iternio/react-native-auto-play';
|
|
473
|
+
|
|
474
|
+
// Hide the splash screen for the main app
|
|
475
|
+
hideAsync(AutoPlayModules.App);
|
|
476
|
+
|
|
477
|
+
// Hide the splash screen for the CarPlay screen
|
|
478
|
+
hideAsync(AutoPlayModules.AutoPlayRoot);
|
|
479
|
+
```
|
|
8
480
|
|
|
9
481
|
## Contributing
|
|
10
482
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
- [
|
|
16
|
-
|
|
17
|
-
1. Standard react-native library boilerplate code
|
|
18
|
-
2. Configures Kotlin (`apply plugin: 'org.jetbrains.kotlin.android'`)
|
|
19
|
-
3. Adds all Nitrogen files (`apply from: '.../NitroAutoplay+autolinking.gradle'`)
|
|
20
|
-
4. Triggers the native C++ build (via CMake/`externalNativeBuild`)
|
|
21
|
-
- [`CMakeLists.txt`](android/CMakeLists.txt): The CMake build file to build C++ code. This contains four important pieces:
|
|
22
|
-
1. Creates a library called `NitroAutoplay` (same as in `nitro.json`)
|
|
23
|
-
2. Adds all Nitrogen files (`include(.../NitroAutoplay+autolinking.cmake)`)
|
|
24
|
-
3. Adds all custom C++ files (only `HybridTestObjectCpp.cpp`)
|
|
25
|
-
4. Adds a `cpp-adapter.cpp` file, which autolinks all C++ HybridObjects (only `HybridTestObjectCpp`)
|
|
26
|
-
- [`src/main/java/com/margelo/nitro/autoplay/`](android/src/main/java/com/margelo/nitro/autoplay/): All Kotlin implementations.
|
|
27
|
-
- [`NitroAutoplayPackage.kt`](android/src/main/java/com/margelo/nitro/autoplay/ReactNativeAutoPlayPackage.kt): The react-native package. You need this because the react-native CLI only adds libraries if they have a `*Package.kt` file. In here, you can autolink all Kotlin HybridObjects.
|
|
28
|
-
- [`cpp/`](cpp): All your cross-platform implementations. (only `HybridTestObjectCpp.cpp`)
|
|
29
|
-
- [`ios/`](ios): All your iOS-specific implementations.
|
|
30
|
-
- [`nitrogen/`](nitrogen): All files generated by nitrogen. You should commit this folder to git.
|
|
31
|
-
- [`src/`](src): The TypeScript codebase. This defines all HybridObjects and loads them at runtime.
|
|
32
|
-
- [`specs/`](src/specs): All HybridObject types. Nitrogen will run on all `*.nitro.ts` files.
|
|
33
|
-
- [`nitro.json`](nitro.json): The configuration file for nitrogen. This will define all native namespaces, as well as the library name.
|
|
34
|
-
- [`NitroAutoplay.podspec`](NitroAutoplay.podspec): The iOS podspec build file to build the iOS code. This contains three important pieces:
|
|
35
|
-
1. Specifies the Pod's name. This must be identical to the name specified in `nitro.json`.
|
|
36
|
-
2. Adds all of your `.swift` or `.cpp` files (implementations).
|
|
37
|
-
3. Adds all Nitrogen files (`add_nitrogen_files(s)`)
|
|
38
|
-
- [`package.json`](package.json): The npm package.json file. `react-native-nitro-modules` should be a `peerDependency`.
|
|
483
|
+
Contributions are welcome! Please submit a pull request.
|
|
484
|
+
|
|
485
|
+
## License
|
|
486
|
+
|
|
487
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
488
|
+
|
|
@@ -141,6 +141,14 @@ class HybridAutoPlay: HybridAutoPlaySpec {
|
|
|
141
141
|
animated: false
|
|
142
142
|
)
|
|
143
143
|
}
|
|
144
|
+
|
|
145
|
+
DispatchQueue.main.async {
|
|
146
|
+
if let template = TemplateStore.getTemplate(
|
|
147
|
+
templateId: templateId
|
|
148
|
+
) {
|
|
149
|
+
template.invalidate()
|
|
150
|
+
}
|
|
151
|
+
}
|
|
144
152
|
}
|
|
145
153
|
}
|
|
146
154
|
|
|
@@ -70,6 +70,9 @@ class AutoPlayInterfaceController: NSObject, CPInterfaceControllerDelegate {
|
|
|
70
70
|
) async throws -> String? {
|
|
71
71
|
guard let templateId = topTemplateId else { return nil }
|
|
72
72
|
|
|
73
|
+
// Ensure at least one template remains
|
|
74
|
+
guard templates.count > 1 else { return nil }
|
|
75
|
+
|
|
73
76
|
try await interfaceController.popTemplate(
|
|
74
77
|
animated: animated
|
|
75
78
|
)
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HybridObject } from 'react-native-nitro-modules';
|
|
2
|
+
import type { CleanupCallback } from '../types/Event';
|
|
3
|
+
export interface VoiceInput extends HybridObject<{
|
|
4
|
+
android: 'kotlin';
|
|
5
|
+
ios: 'swift';
|
|
6
|
+
}> {
|
|
7
|
+
registerVoiceInputListener(callback: (voiceInputResult?: string, error?: string) => void): CleanupCallback;
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A hook to determine if the CarPlay/Android Auto screen is currently focused (visible).
|
|
3
|
-
*
|
|
4
|
-
* @param moduleName The name of the module to listen to.
|
|
5
|
-
* @returns `true` if the screen is focused, `false` otherwise.
|
|
6
|
-
*/
|
|
7
|
-
export declare function useIsAutoPlayFocused(moduleName: string): boolean;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
2
|
-
import { HybridAutoPlay } from '..';
|
|
3
|
-
/**
|
|
4
|
-
* A hook to determine if the CarPlay/Android Auto screen is currently focused (visible).
|
|
5
|
-
*
|
|
6
|
-
* @param moduleName The name of the module to listen to.
|
|
7
|
-
* @returns `true` if the screen is focused, `false` otherwise.
|
|
8
|
-
*/
|
|
9
|
-
export function useIsAutoPlayFocused(moduleName) {
|
|
10
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
const remove = HybridAutoPlay.addListenerRenderState(moduleName, (state) => {
|
|
13
|
-
setIsFocused(state === 'didAppear');
|
|
14
|
-
});
|
|
15
|
-
return () => {
|
|
16
|
-
remove();
|
|
17
|
-
};
|
|
18
|
-
}, [moduleName]);
|
|
19
|
-
return isFocused;
|
|
20
|
-
}
|
package/lib/hybrid.d.ts
DELETED
package/lib/hybrid.js
DELETED