SVG instead of regular image in Bottom navigation on nativescript

Question

I am building an android application using Angular nativescript. In my app i have a tabs navigation menu on the bottom of the page of type BottomNavigation. For each TabStripItem i can put a label and an image. The problem is i want to put there an SVG image instead of the regular Image, but its only accept an Image and a Label. How can i solve that?

<BottomNavigation>
    <TabStrip>
        <TabStripItem>
            <label text="some text"></label>
            <SVGImage src="image source"></SVGImage>
        </TabStripItem>
    </TabStrip>
</BottomNavigation>

Answer 1

It is not possible with the current Nativescript TabStrip Component, I'm attaching code that i used in my project to achieve the desired result.

tabs.component.html

<DockLayout>
    <GridLayout dock="bottom" class="tg-bg-tabs tg-text-light" columns="*,*,*,*" rows="auto">
        <StackLayout *ngFor="let tab of tabs; let idx = index" (tap)="onTabTapped(tab)" row="0" height="65" ripple
            rippleColor="#e0e0e0" [class.tg-text-primary]="isTabSelected(tab)" class="p-b-2 m-y-5" verticalAlignment="center"
            [class.font-weight-bold]="isTabSelected(tab)" col="{{idx}}">
            <SVGImage [src]="tab.icon" android:width="25" ios:width="25" android:height="25" ios:height="23"
                color="green" class="fas" horizontalAlignment="center" verticalAlignment="center"></SVGImage>
            <Label [text]="'tabs.' + tab.name | L" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>
    </GridLayout>
    <StackLayout>
        <page-router-outlet></page-router-outlet>
    </StackLayout>
</DockLayout>

tabs.component.ts

export class TabsComponent implements OnInit, OnDestroy {
  tabs = [
    { name: 'home', icon: '~/assets/images/other/home-active.svg' },
    { name: 'transfers', icon: '~/assets/images/other/transfers-muted.svg' },
    { name: 'products', icon: '~/assets/images/other/products-muted.svg' },
    { name: 'settings', icon: '~/assets/images/other/settings-muted.svg' },
  ]
  selectedTab = this.tabs[0]


  onTabTapped(tab) {
    if (!this.disableTap) {
      this.selectedTab = tab
      this.tabs.forEach((t) => {
        if (t.name === tab.name) {
          t.icon = `~/assets/images/other/${t.name}-active.svg`
        } else {
          t.icon = `~/assets/images/other/${t.name}-muted.svg`
        }
      })
      this.routerExtensions.navigate(['./' + tab.name], {
        relativeTo: this.activatedRoute,
      })
      this.ref.detectChanges()
    }
  }
}

Using same technique may help you too😎