Question 350318 in React native Question posted in
The official React Native documentation can be found here.

React native – IllegalArgumentException: Missing required action types: APP_ICON react-native-carplay for android auto

I’m in the process of creating an application for Android Auto using react-native-carplay. Unfortunately, the documentation lacks details on configuring the TabBarTemplate. To work around this, I delved into the library’s code to understand its functionality. Based on my findings, I’ve established the following configuration:

import {GridTemplate, TabBarTemplate} from 'react-native-carplay';
import {img_1, img_2} from './templates/file';
const gridItemImage = require('../assets/img/go.png');

const gridTemp = new GridTemplate({
  buttons: [
    {
      id: 'Odo',
      titleVariants: ['Odo'],
      image: gridItemImage,
    },
  ],
  title: 'TSC',
  id: 't1',
});
const gridTemp2 = new GridTemplate({
  buttons: [
    {
      id: 'Odo2',
      titleVariants: ['Odo122'],
      image: gridItemImage,
    },
  ],
  id: 't2',
  title: 'TSC',
});

export const tabBarTemplate = new TabBarTemplate({
  title: 'TSC',
  headerAction: {type: 'back', appIcon: ''},
  templates: [
    {
      title: 'tab1',
      id: 't1',
      icon: {uri: img_1},
      template: gridTemp,
    },
    {
      title: 'tab2',
      id: 't2',
      icon: {uri: img_2},
      template: gridTemp2,
    },
  ],
});

However, When I run the app, it throws this error:

java.lang.IllegalArgumentException: Missing required action types: APP_ICON,
at androidx.car.app.model.constraints.ActionsConstraints.validateOrThrow(ActionsConstraints.java:394)
at androidx.car.app.model.TabTemplate$Builder.setHeaderAction(TabTemplate.java:235)
at org.birkir.carplay.parser.RCTTabTemplate.parse(RCTTabTemplate.kt:32)
at org.birkir.carplay.parser.RCTTabTemplate.parse(RCTTabTemplate.kt:11)
at org.birkir.carplay.parser.TemplateParser.parse(TemplateParser.kt:30)
at org.birkir.carplay.CarPlayModule.parseTemplate(CarPlayModule.kt:92)
at org.birkir.carplay.CarPlayModule.createScreen(CarPlayModule.kt:284)
at org.birkir.carplay.CarPlayModule.getScreen(CarPlayModule.kt:294)
at org.birkir.carplay.CarPlayModule.setRootTemplate$lambda$2(CarPlayModule.kt:139)
at org.birkir.carplay.CarPlayModule.$r8$lambda$cp18Ybhsx4k_Ka2Moa-_hKNT4FY(Unknown Source:0)
at org.birkir.carplay.CarPlayModule$$ExternalSyntheticLambda5.run(Unknown Source:4)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:236)
at android.app.ActivityThread.main(ActivityThread.java:8061)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:656)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:967)

Can anyone with experience with Android Auto help me? Thank you, buddy, so much!!!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After dedicating several hours to a meticulous examination of Android Auto documentation and an in-depth analysis of the library's codebase to comprehend its operational mechanisms, I successfully identified and implemented a solution to resolve the issue.

    headerAction: {type: 'appIcon'}

    A header Action of type TYPE_APP_ICON is required.

    You can read more details here


  2. 0

    • The error message you’re seeing is indicating that the header action you’re trying to set for your TabBarTemplate is missing the required action type APP_ICON. In your code, you’re setting the header action as follows

      headerAction: {type: 'back', appIcon: ''},

    • The issue here is that you’re using the ‘back’ action type, which requires an appIcon. However, you’re setting the appIcon as an empty string, which is causing the error.

    • To fix this issue, you can either use a different action type that doesn’t require an appIcon, or provide a valid appIcon. If you want to use the ‘back’ action type, you’ll need to provide a valid appIcon. Here’s an example of how you can do this

      import {GridTemplate, TabBarTemplate} from 'react-native-carplay';
import {img_1, img_2} from './templates/file';
const gridItemImage = require('../assets/img/go.png');

const gridTemp = new GridTemplate({
 buttons: [
  {
    id: 'Odo',
    titleVariants: ['Odo'],
    image: gridItemImage,
   },
  ],
  title: 'TSC',
  id: 't1',
});

const gridTemp2 = new GridTemplate({
buttons: [
  {
    id: 'Odo2',
    titleVariants: ['Odo122'],
    image: gridItemImage,
  },
 ],
 id: 't2',
 title: 'TSC',
});

export const tabBarTemplate = new TabBarTemplate({
 title: 'TSC',
 headerAction: {type: 'back', icon: {uri: 'path/to/icon'}},
 templates: [
  {
    title: 'tab1',
    id: 't1',
    icon: {uri: img_1},
    template: gridTemp,
  },
  {
    title: 'tab2',
    id: 't2',
    icon: {uri: img_2},
    template: gridTemp2,
  },
 ],
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search