[BottomNavigation] Icons in tab-strips items cannot be changed dynamically #7470

Activity

1. SvetoslavTsenov

   changed the title [-]BottomNavigation icons in tabStrips cannot be changed dynamically[/-] [+]BottomNavigation icons in tab-strips items cannot be changed dynamically[/+] on Jul 5, 2019
2. NickIliev

   added

   bug

   on Jul 8, 2019
3. NickIliev

   changed the title [-]BottomNavigation icons in tab-strips items cannot be changed dynamically[/-] [+][BottomNavigation] Icons in tab-strips items cannot be changed dynamically[/+] on Jul 8, 2019
4. tsonevn

   added

   severity: medium

   on Jul 22, 2019
5. MartoYankov

   closed this as completedin #7672on Aug 15, 2019
6. lhovee commented on Sep 5, 2019

   

   lhovee

   on Sep 5, 2019

   More actions

   I have a use case where attempting to swap an active icon when tab strip item is selected that doesn't work. Hoping we can re-open this ticket.
7. lhovee commented on Sep 5, 2019

   

   lhovee

   on Sep 5, 2019

   More actions

   code is:

   <template>
     <Page>
       <BottomNavigation
         :selectedIndex="activeIndex"
         @selectedIndexChanged="activeIndexChange"
       >
         <TabStrip>
           <TabStripItem
             v-for="(item, index) in tabStripItems"
             :key="item.key"
           >
             <Label :text="item.text" />
             <Image :src="index === activeIndex ? item.activeIcon : item.icon" />
           </TabStripItem>
         </TabStrip>
   
         <TabContentItem
           v-for="(itm, idx) in tabStripItems"
           :key="idx"
         >
           <component
             :is="itm.component"
             :key="`${itm.key}-${idx}`"
             :title="itm.text"
           />
         </TabContentItem>
       </BottomNavigation>
     </Page>
   </template>
   
   <script lang="ts">
   import { Component } from 'vue-property-decorator';
   import Vue from 'nativescript-vue';
   import { SelectedIndexChangedEventData } from 'tns-core-modules/ui/bottom-navigation';
   import PlaceholderComponent from '@/components/PlaceholderComponent.vue';
   
   @Component({
     components: {
       PlaceholderComponent,
     },
   })
   export default class HomeRoot extends Vue {
     public activeIndex: number = 2;
     private tabStripItems = [
       {
         text: 'Account',
         key: 'account',
         icon: 'res://app/icon_account',
         activeIcon: 'res://app/icon_account_active',
         component: PlaceholderComponent,
       },
       {
         text: 'Rules',
         key: 'rules',
         icon: 'res://app/icon_rules',
         activeIcon: 'res://app/icon_rules_active',
         component: PlaceholderComponent,
       },
       {
         text: 'Home',
         key: 'home',
         icon: 'res://app/icon_home',
         activeIcon: 'res://app/icon_home_active',
         component: PlaceholderComponent,
       },
       {
         text: 'Activity',
         key: 'activity',
         icon: 'res://app/icon_activity',
         activeIcon: 'res://app/icon_activity_active',
         component: PlaceholderComponent,
       },
       {
         text: 'Devices',
         key: 'devices',
         icon: 'res://app/icon_devices',
         activeIcon: 'res://app/icon_devices_active',
         component: PlaceholderComponent,
       },
     ];
   
     public activeIndexChange(update: SelectedIndexChangedEventData): void {
       this.activeIndex = update.newIndex;
     }
   }
   </script>
   
   <style lang="scss" scoped>
   TabStripItem {
     color: grey;
   
     Label {
       text-transform: uppercase;
     }
   }
   
   TabStripItem:active {
     color: green;
   }
   </style>
   
8. lhovee commented on Sep 5, 2019

   

   lhovee

   on Sep 5, 2019

   More actions

   where PlaceholderComponent.vue looks like

   <template>
     <GridLayout>
       <Label
         :text="`${title} Component`"
         class="h2 text-center"
       />
     </GridLayout>
   </template>
   
   <script lang="ts">
   import Vue from 'nativescript-vue';
   import { Component, Prop } from 'vue-property-decorator';
   
   @Component
   export default class PlaceHolderComponent extends Vue {
     @Prop({ default: 'Placeholder' }) title: string;
   }
   </script>
   
9. lhovee commented on Sep 5, 2019

   

   lhovee

   on Sep 5, 2019

   More actions

   tns-android: 6.0.2
   tns-ios: 6.0.2
   nativescript-vue: 2.4.0
   tns-core-modules: 6.1.0
10. MartoYankov

    reopened this on Sep 9, 2019
11. rigor789 commented on Sep 9, 2019

    

    rigor789

    on Sep 9, 2019

    Member

    More actions

    @lhovee I just re-created your example in the playground (using js) and seems to be working fine: https://play.nativescript.org/?template=play-vue&id=RPxTCx

    I had to change grey to gray as it was erroring about grey not being a valid color.
12. MartoYankov

    closed this as completedon Sep 25, 2019
13. lhovee commented on Sep 25, 2019

    

    lhovee

    on Sep 25, 2019

    More actions

    @rigor789 @MartoYankov

    Tested your playground on an Android 7.0 LG K20 PLUS (I know I need to upgrade) and it works as expected. The active icon is black.

    Unfortunately,
    iPhone XR (and other iOS devices) the playground has a blue icon instead of the black. Can you confirm this is what you're seeing and whether or not that's an issue?
14. lhovee commented on Sep 25, 2019

    

    lhovee

    on Sep 25, 2019

    Last edited by lhovee

    More actions

    UPDATE:
    <TabStrip iosIconRenderingMode="alwaysOriginal">

    This resolves the issue I was seeing on iOS.
15. MartoYankov commented on Sep 25, 2019

    

    MartoYankov

    on Sep 25, 2019

    Contributor

    More actions

    @lhovee Yes, this is the expected default behavior with 6.1 on iOS when you use resource images. There are specific iOS guidelines for these as far as I know. The iosIconRenderingMode property disables this behavior. The property was missed/forgotten in 6.0 See also #6967
16. lhovee commented on Sep 25, 2019

    

    lhovee

    on Sep 25, 2019

    More actions

    Appreciate the help!