Not able to set tabTitle property

[haisamMH]

Tab title property is always set to "More"

[birkir]

Thanks for your contribution. Please re-open if still applicable.

[harrymash2006]

@birkir still this shows "More"

[DanielKuhn]

The 3 dots image and "More" title are a fallback for when there's no image provided.
Setting tabSystemImageName to one of the currently 5296 ones provided by the SF symbols app along with a tabTitle should do the trick.

[harrymash2006]

@DanielKuhn yes working now, thanks

[ElangoPrince]

@harrymash2006 Can you please complete configuration for TabBarTemplate. Along with tabSystemImageName, tabTitle.
I tried to add under TabBarTemplate nothing happen.

[harrymash2006]

@ElangoPrince could you please elaborate more about your issue? what you are trying and what doesn't work? may be paste the code here

[ElangoPrince]

I want to change default tab-title and tab image. With below code, showing More and 3 Dots.

  `const` template1 = new ListTemplate({
      sections: [
          {
              header: 'Test 1',
              items: [{ text: 'Hello world 3' }, { text: 'Hello world 4' }],
          },
      ],
      title: 'TEST',
  });
  const template2 = new ListTemplate({
        sections: [
            {
                header: 'Test 2',
                items: [{ text: 'Hello world 3' }, { text: 'Hello world 4' }],
            },
        ],
        title: 'TEST',
    });

  `const tabBarTemplate = new TabBarTemplate({
        templates: [ gridTemplate, template2],
        onTemplateSelect(e: any) {
            console.log("e",e);
        },
    });  
 CarPlay.setRootTemplate(tabBarTemplate);` 

Note: As suggested by @DanielKuhn I need to set tabSystemImageName and tabTitle to change default values. My question is where i can set that?

[harrymash2006]

Hi @ElangoPrince you can do it like below:

In the below example it is one of the tab I add.

Here I have assigned the below props for tabTitle and tab image
tabTitle: Tabs.articlesTab.title,
tabSystemImageName: Tabs.articlesTab.systemImageName, // systemImageName is newspaper.fill in my example

you can have a look at the name of different system images here: https://developer.apple.com/sf-symbols/

you can also set custom image using tabImage if you don't want to use tabSystemImageName.

articlesListTemplate = new ListTemplate({
sections: [],
trailingNavigationBarButtons: [
],
tabTitle: Tabs.articlesTab.title,
tabSystemImageName: Tabs.articlesTab.systemImageName,
backButtonHidden: true,
title: CARPLAYDASHBOARDTITLE,
onBarButtonPressed(e) {
},
async onItemSelect(e) {
},
});

[DanielKuhn]

@ElangoPrince Here's all the base attributes for templates: https://github.com/birkir/react-native-carplay/blob/master/packages/react-native-carplay/src/templates/Template.ts
For ListTemplate you have these additional/specific attributes: https://github.com/birkir/react-native-carplay/blob/master/packages/react-native-carplay/src/templates/ListTemplate.ts

[ElangoPrince]

@haisamMH Great. It was working fine. Thanks for your support.

One more doubt, its possible to push MapTemplate in TabView?
Example: Instead of using two lists in tab view, I want to one MapTemplate and One ListTemplate. Also, POI is not working. Could you please help on this? '

@DanielKuhn @birkir FYI

[DanielKuhn]

Not sure about MapTemplate in tab view. The official doc mentions it being a root template.
Have you set the "com.apple.developer.carplay-maps"-Entitlement?
For POI there's currently a pull request here: #153

[ElangoPrince]

@DanielKuhn Yes, I already set com.apple.developer.carplay-maps this under entitlement.

[EliG-TA]

Hey, I get this issue every time I use TabBarTemplate:

Your app just crashed. See the error below.
java.lang.IllegalStateException: A title must be set for the tab
  androidx.car.app.model.Tab$Builder.build(Tab.java:210)
  org.birkir.carplay.parser.RCTTabTemplate.parseTab(RCTTabTemplate.kt:41)
  org.birkir.carplay.parser.RCTTabTemplate.parse(RCTTabTemplate.kt:24)
  org.birkir.carplay.parser.RCTTabTemplate.parse(RCTTabTemplate.kt:11)
  org.birkir.carplay.parser.TemplateParser.parse(TemplateParser.kt:30)
  org.birkir.carplay.CarPlayModule.parseTemplate(CarPlayModule.kt:92)
  org.birkir.carplay.CarPlayModule.createScreen(CarPlayModule.kt:292)
  org.birkir.carplay.CarPlayModule.getScreen(CarPlayModule.kt:302)
  org.birkir.carplay.CarPlayModule.setRootTemplate$lambda$2(CarPlayModule.kt:139)
  org.birkir.carplay.CarPlayModule.$r8$lambda$cp18Ybhsx4k_Ka2Moa-_hKNT4FY(Unknown Source:0)
  org.birkir.carplay.CarPlayModule$$ExternalSyntheticLambda6.run(Unknown Source:4)
  android.os.Handler.handleCallback(Handler.java:959)
  android.os.Handler.dispatchMessage(Handler.java:100)
  android.os.Looper.loopOnce(Looper.java:232)
  android.os.Looper.loop(Looper.java:317)
  android.app.ActivityThread.main(ActivityThread.java:8592)
  java.lang.reflect.Method.invoke(Native Method)
  com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:580)
  com.android.internal.os.ZygoteInit.main(ZygoteInit.java:878)

Here is my code:

template.ts

import {
  CarPlay,
  GridTemplate,
  GridButton,
  PointOfInterestTemplate,
  ListTemplate,
  TabBarTemplate,
} from "react-native-carplay";

const template1 = new ListTemplate({
  sections: [
    {
      header: "Test 1",
      items: [{ text: "Hello world 3" }, { text: "Hello world 4" }],
    },
  ],
  title: "TEST1",
  tabTitle: "tada4",
  tabSystemImageName: "tada5",
});
const template2 = new ListTemplate({
  sections: [
    {
      header: "Test 2",
      items: [{ text: "Hello world 3" }, { text: "Hello world 4" }],
    },
  ],
  title: "TEST2",
  tabTitle: "tada1",
  tabSystemImageName: "tada2",
});

const template = new TabBarTemplate({
  templates: [template1, template2],
  tabTitle: "Hello",
  tabSystemImageName: "tada3",
  title: "Template",
  async onTemplateSelect() {},
});

export default template;

App.tsx

import { CarPlay} from "react-native-carplay";
import template from "./carplay/template";

export default function App() {

  const [carPlayConnected, setCarPlayConnected] = useState(CarPlay.connected);

  useEffect(() => {
    CarPlay.registerOnConnect(() => {
      console.log("CarPlay connected");
      CarPlay.setRootTemplate(template);
    });
  });

  useEffect(() => {
    function onConnect() {
      setCarPlayConnected(true);
    }
    function onDisconnect() {
      setCarPlayConnected(false);
    }

    CarPlay.registerOnConnect(onConnect);
    CarPlay.registerOnDisconnect(onDisconnect);

    return () => {
      CarPlay.unregisterOnConnect(onConnect);
      CarPlay.unregisterOnDisconnect(onDisconnect);
    };
  }, [carPlayConnected]);

return (
       // Rest of app components...
  );
  
}

[EliG-TA]

@birkir this issue was closed. Is this reproducible from your end?

[OkancanCosar]

EliG-TA persist error. please open