Closed haisamMH closed 1 year ago
Thanks for your contribution. Please re-open if still applicable.
@birkir still this shows "More"
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.
@DanielKuhn yes working now, thanks
@harrymash2006 Can you please complete configuration for TabBarTemplate. Along with tabSystemImageName, tabTitle. I tried to add under TabBarTemplate nothing happen.
@ElangoPrince could you please elaborate more about your issue? what you are trying and what doesn't work? may be paste the code here
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?
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) { }, });
@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
@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
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: https://github.com/birkir/react-native-carplay/pull/153
@DanielKuhn Yes, I already set com.apple.developer.carplay-maps this under entitlement.
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...
);
}
@birkir this issue was closed. Is this reproducible from your end?
EliG-TA persist error. please open
Tab title property is always set to "More"