Nativescript Vue show badge in BottomNavigationBar

Question

I'm currently building an app with Nativescript and Vuejs. I use the Material BottomNavigationBar(https://github.com/nativescript-community/ui-material-components/blob/master/packages/bottomnavigationbar/README.md)

i need to use:

showBadge(index: number, value?: number)

My code:

<MDBottomNavigationBar @tabSelected="onBottomNavigationTabSelected" ref="navBar" @loaded="loaded" row="1">
  <MDBottomNavigationTab title="HOME" icon="res://home"/>
  <MDBottomNavigationTab title="SHOPPING CART" icon="res://shopcart"/>
  <MDBottomNavigationTab title="DISCOUNT" icon="res://discount"/>
  <MDBottomNavigationTab title="PROFILE" icon="res://profile"/>
</MDBottomNavigationBar>

loaded(args) {
  this.loadedNavBar = true;
  this.navBar = args.object

  if (this.selectedTab !== null) {
    this.navBar.selectTab(1);
    this.$refs.navBar.nativeView.showBadge(1, 3);
  }
},

This is not working

Error: Error: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).

Answer 1

Inside App_resources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponents.