I’m currently working on integrating the Tab template in Android Auto using the react-native-carplay library. I’m facing an issue with activating the tab content programmatically. Can anyone provide guidance on how to accomplish this?
Here is the code:
<code>const gridItemImage = require('../assets/images/go.png');
const gridTemp = new GridTemplate({
buttons: [
{
id: 'Odo',
titleVariants: ['Odo'],
image: gridItemImage,
},
],
})
const paneTemplate = new PaneTemplate({
id: 't1',
title: 'Tab',
pane: {
image: {
uri: `${Image.resolveAssetSource(
require('../assets/images/map.jpg'),
).uri
}`,
},
items: [
{
id: 'p1',
text: 'Samplew',
detailText: 'Disconnected',
},
{
id: 'p2',
text: 'Odometer',
detailText: '0 km',
},
{
id: 'p3',
text: 'No Alerts',
},
],
},
});
const tabBarTemplateConfig = {
headerAction: { type: 'appIcon' },
id: 'tabBar',
templates: [
{
title: 'Trailer',
id: 't1',
icon: {
uri: `${Image.resolveAssetSource(
require('../assets/images/caravan.png'),
).uri
}`,
},
template: paneTemplate
},
{
title: 'Service',
id: 't2',
color: 'red',
icon: {
uri: `${Image.resolveAssetSource(
require('../assets/images/alert-warning.png'),
).uri
}`,
},
template: gridTemp,
},
],
onTemplateSelect: (template, event) => {
console.log('template is clicked: ', template.id);
console.log('template: ', template);
},
};
export const tabBarTemplate = new TabBarTemplate(tabBarTemplateConfig);
</code>
<code>const gridItemImage = require('../assets/images/go.png');
const gridTemp = new GridTemplate({
buttons: [
{
id: 'Odo',
titleVariants: ['Odo'],
image: gridItemImage,
},
],
})
const paneTemplate = new PaneTemplate({
id: 't1',
title: 'Tab',
pane: {
image: {
uri: `${Image.resolveAssetSource(
require('../assets/images/map.jpg'),
).uri
}`,
},
items: [
{
id: 'p1',
text: 'Samplew',
detailText: 'Disconnected',
},
{
id: 'p2',
text: 'Odometer',
detailText: '0 km',
},
{
id: 'p3',
text: 'No Alerts',
},
],
},
});
const tabBarTemplateConfig = {
headerAction: { type: 'appIcon' },
id: 'tabBar',
templates: [
{
title: 'Trailer',
id: 't1',
icon: {
uri: `${Image.resolveAssetSource(
require('../assets/images/caravan.png'),
).uri
}`,
},
template: paneTemplate
},
{
title: 'Service',
id: 't2',
color: 'red',
icon: {
uri: `${Image.resolveAssetSource(
require('../assets/images/alert-warning.png'),
).uri
}`,
},
template: gridTemp,
},
],
onTemplateSelect: (template, event) => {
console.log('template is clicked: ', template.id);
console.log('template: ', template);
},
};
export const tabBarTemplate = new TabBarTemplate(tabBarTemplateConfig);
</code>
const gridItemImage = require('../assets/images/go.png');
const gridTemp = new GridTemplate({
buttons: [
{
id: 'Odo',
titleVariants: ['Odo'],
image: gridItemImage,
},
],
})
const paneTemplate = new PaneTemplate({
id: 't1',
title: 'Tab',
pane: {
image: {
uri: `${Image.resolveAssetSource(
require('../assets/images/map.jpg'),
).uri
}`,
},
items: [
{
id: 'p1',
text: 'Samplew',
detailText: 'Disconnected',
},
{
id: 'p2',
text: 'Odometer',
detailText: '0 km',
},
{
id: 'p3',
text: 'No Alerts',
},
],
},
});
const tabBarTemplateConfig = {
headerAction: { type: 'appIcon' },
id: 'tabBar',
templates: [
{
title: 'Trailer',
id: 't1',
icon: {
uri: `${Image.resolveAssetSource(
require('../assets/images/caravan.png'),
).uri
}`,
},
template: paneTemplate
},
{
title: 'Service',
id: 't2',
color: 'red',
icon: {
uri: `${Image.resolveAssetSource(
require('../assets/images/alert-warning.png'),
).uri
}`,
},
template: gridTemp,
},
],
onTemplateSelect: (template, event) => {
console.log('template is clicked: ', template.id);
console.log('template: ', template);
},
};
export const tabBarTemplate = new TabBarTemplate(tabBarTemplateConfig);
I want to active the second tab content. Does anybody know how to set active tab content. Many thank to you