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

[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...
  );

}

Originally posted by @EliG-TA in https://github.com/birkir/react-native-carplay/issues/112#issuecomment-2209585065

[OkancanCosar]

+1