nativescript - Natviescript-Angular Android app: Error: Could not load tab bar icon: res://<icon>.png

Question

I am building an app using Nativescript-Angular for iOs and Android. I am having trouble showing icons in Android. They are working fine in iOS. I think I am missing something. Can anyone help me out?

Here is my file structure. I believe that I have all of the icons in the appropriate folders. File structure App_Resources/Android

Here is my code:

<TabView
  selectedIndex="0"
  (selectedIndexChanged)="onSelectedIndexchanged($event)"
>
  <StackLayout color="black" *tabItem="{ iconSource: 'res://house.png' }">
    <StackLayout>
      <Label
        text="Leaderboard"
        textAlignment="center"
        textWrap="true"
        color="blue"
      ></Label>
      <Label [text]="results" textWrap="true"></Label>
    </StackLayout>
  </StackLayout>
  <StackLayout color="black" *tabItem="{ iconSource: 'res://bell.png' }">
    <StackLayout>
      <Label
        text="Alerts & Sharing"
        textAlignment="center"
        textWrap="true"
        color="blue"
      ></Label>
      <Label [text]="otherResults" textWrap="true"></Label>
    </StackLayout>
  </StackLayout>
  <StackLayout color="black" *tabItem="{ iconSource: 'res://arrow.png' }">
    <StackLayout>
      <Label
        text="Bids"
        textAlignment="center"
        textWrap="true"
        color="blue"
      ></Label>
    </StackLayout>
  </StackLayout>
  <StackLayout color="black" *tabItem="{ iconSource: 'res://profile.png' }">
    <Label textAlignment="center" text="Welcome {{ user.email }}"></Label>
    <Button (tap)="logOut()" text="Log out"></Button>
    <Button text="User Data" (tap)="goToUserData()"></Button>

  </StackLayout>
</TabView>

And here is my error message:

JS: Error: Could not load tab bar icon: res://house.png
JS: Error: Could not load tab bar icon: res://bell.png
JS: Error: Could not load tab bar icon: res://arrow.png
JS: Error: Could not load tab bar icon: res://profile.png

question from:https://stackoverflow.com/questions/65926952/natviescript-angular-android-app-error-could-not-load-tab-bar-icon-res-ico

Answer 1

I figured it out. I needed to remove the file extensions.

res://house.png ----> res://house