nativescript-community/ui-material-components

[BottomNavigationBar] If activeColor is not provided, setting inactiveColor crashes the app

mreall opened this issue · 1 comments

mreall commented

If the demo apps cannot help and there is no issue for your problem, tell us about it

I'm using BottomNavigationBar in a nativescript-vue app. If I set inactiveColor, but do not also set activeColor in the HTML template, the app crashes with the following message:

TypeError: Cannot read properties of null (reading 'getColorForState')

Which platform(s) does your issue occur on?

I only tried this on Android emulator

Please, provide the following version numbers that your issue occurs with:

  • CLI: 8.5.3
  • Runtime(s): android: 8.5.0
  • Plugin(s):
  "dependencies": {
    "@nativescript-community/ui-material-bottomnavigationbar": "^7.1.3",
    "@nativescript/core": "~8.5.3",
    "nativescript-oauth2": "^3.0.10",
    "nativescript-vue": "3.0.0-beta.7",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "axios": "^0.24.0",
    "router-vue-native": "^2.1.0",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.5.0",
    "@nativescript/ios": "8.5.2",
    "@nativescript/tailwind": "^2.0.1",
    "@nativescript/types": "~8.5.0",
    "@nativescript/webpack": "~5.0.14",
    "@types/node": "~20.2.5",
    "sass": "^1.62.1",
    "tailwindcss": "^3.3.2",
    "typescript": "~5.0.4",
    "vue": "^3.3.4"
  }

Please, tell us how to recreate the issue in as much detail as possible.

Create a new ns-vue project and add the following to the template.

<template>
  <GridLayout rows="*,auto" columns="*">
    <MDBottomNavigationBar row="1" inactiveColor="#aaaaaa">
      <MDBottomNavigationTab title="Home" />
      <MDBottomNavigationTab title="Profile" />
    </MDBottomNavigationBar>
  </GridLayout>
</template>
vallemar commented

I think it's due to the nativescript-vue update, I'll look at it

  • 👍1