ui-material-components: Calling js method onCreateView failed

Which platform(s) does your issue occur on?

Android
Android 13.0
Android Emulator - Pixel_6_API_33:5554

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

CLI: 8.4.0-next-02-13-2023-4163658582
Cross-platform modules: 8.4.7
Runtime(s): tns-android: ~8.4.0 and tns-ios: ~8.4.1
Plugin(s):

"dependencies": {
    "-": "0.0.1",
    "@nativescript-community/texttospeech": "^3.1.2",
    "@nativescript-community/ui-material-slider": "^7.0.42",
    "@nativescript/core": "~8.4.7",
    "@nativescript/payments": "^1.0.5",
    "@nativescript/theme": "^3.0.2",
    "axios": "^1.3.3",
    "g": "^2.0.1",
    "nativescript-iap": "^7.1.1",
    "nativescript-ui-listview": "^14.2.4",
    "nativescript-vue": "^2.9.3",
    "rxjs": "^7.8.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "~7.17.0",
    "@babel/preset-env": "~7.16.11",
    "@nativescript/android": "~8.4.0",
    "@nativescript/ios": "~8.4.1",
    "@nativescript/webpack": "^5.0.4",
    "babel-loader": "~8.2.3",
    "nativescript-vue-template-compiler": "^2.9.3",
    "node-sass": "^8.0.0",
    "vue-loader": "^17.0.1"
  },

Recently we added the @nativescript-community/ui-material-slider package and started using it in one of our Vue components. It works great in iOS but when we navigate to the component that references the slider on the Android Emulator we get this exception:

An uncaught Exception occurred on "main" thread.
Calling js method onCreateView failed
Error: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 3: TypedValue{t=0x2/d=0x7f0300d0 a=7}, theme={InheritanceMap=[id=0x7f0f0008myapp:style/AppTheme, id=0x7f0f000bmyapp:style/AppThemeBase29, id=0x7f0f000amyapp:style/AppThemeBase21, id=0x7f0f0009myapp:style/AppThemeBase, id=0x7f0f0219myapp:style/Theme.AppCompat.Light.NoActionBar, id=0x7f0f0213myapp:style/Theme.AppCompat.Light, id=0x7f0f0052myapp:style/Base.Theme.AppCompat.Light, id=0x7f0f00admyapp:style/Base.V28.Theme.AppCompat.Light, id=0x7f0f00aamyapp:style/Base.V26.Theme.AppCompat.Light, id=0x7f0f00a4myapp:style/Base.V23.Theme.AppCompat.Light, id=0x7f0f00a2myapp:style/Base.V22.Theme.AppCompat.Light, id=0x7f0f0098myapp:style/Base.V21.Theme.AppCompat.Light, id=0x7f0f00b0myapp:style/Base.V7.Theme.AppCompat.Light, id=0x7f0f012emyapp:style/Platform.AppCompat.Light, id=0x7f0f0139myapp:style/Platform.V25.AppCompat.Light, id=0x1030241android:style/Theme.Material.Light.NoActionBar, id=0x1030237android:style/Theme.Material.Light, id=0x103000candroid:style/Theme.Light, id=0x1030005android:style/Theme], Themes=[myapp:style/AppTheme, forced, myapp:style/LaunchScreenTheme, forced, myapp:style/Theme.AppCompat.Empty, forced, android:style/Theme.DeviceDefault.Light.DarkActionBar, forced]}

StackTrace:
createNativeView(file:///data/data/myapp/files/app/vendor.js:697:24)
	at _setupUI(file:///data/data/myapp/files/app/vendor.js:19010:31)
	at (file:///data/data/myapp/files/app/vendor.js:19054:19)
	at eachChildView(file:///data/data/myapp/files/app/vendor.js:29958:28)
	at eachChild(file:///data/data/myapp/files/app/vendor.js:21484:14)
	at _setupUI(file:///data/data/myapp/files/app/vendor.js:19053:14)
	at (file:///data/data/myapp/files/app/vendor.js:19054:19)
	at eachChildView(file:///data/data/myapp/files/app/vendor.js:29958:28)
	at eachChild(file:///data/data/myapp/files/app/vendor.js:21484:14)
	at _setupUI(file:///data/data/myapp/files/app/vendor.js:19053:14)
	at (file:///data/data/myapp/files/app/vendor.js:19054:19)
	at eachChildView(file:///data/data/myapp/files/app/vendor.js:29958:28)
	at eachChild(file:///data/data/myapp/files/app/vendor.js:21484:14)
	at _setupUI(file:///data/data/myapp/files/app/vendor.js:19053:14)
	at (file:///data/data/myapp/files/app/vendor.js:19054:19)
	at eachChildView(file:///data/data/myapp/files/app/vendor.js:16205:13)
	at eachChildView(file:///data/data/myapp/files/app/vendor.js:31945:15)
	at eachChild(file:///data/data/myapp/files/app/vendor.js:21484:14)
	at _setupUI(file:///data/data/myapp/files/app/vendor.js:19053:14)
	at _addViewCore(file:///data/data/myapp/files/app/vendor.js:18903:18)
	at _addView(file:///data/data/myapp/files/app/vendor.js:18892:14)
	at onCreateView(file:///data/data/myapp/files/app/vendor.js:25761:19)
	at onCreateView(file:///data/data/myapp/files/app/vendor.js:23539:40)
	at com.tns.Runtime.callJSMethodNative(Native Method)
	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
	at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
	at com.tns.Runtime.callJSMethod(Runtime.java:1175)
	at com.tns.Runtime.callJSMethod(Runtime.java:1153)
	at com.tns.Runtime.callJSMethod(Runtime.java:1149)
	at com.tns.FragmentClass.onCreateView(FragmentClass.java:55)
	at androidx.fragment.app.Fragment.performCreateView(Fragment.java:3104)
	at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:524)
	at androidx.fragment.app.FragmentStateManager.moveToExpectedState(FragmentStateManager.java:261)
	at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:1899)
	at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1817)
	at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:1760)
	at androidx.fragment.app.FragmentManager$5.run(FragmentManager.java:547)
	at android.os.Handler.handleCallback(Handler.java:942)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at android.os.Looper.loopOnce(Looper.java:201)
	at android.os.Looper.loop(Looper.java:288)
	at android.app.ActivityThread.main(ActivityThread.java:7872)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)
Caused by: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 3: TypedValue{t=0x2/d=0x7f0300d0 a=7}, theme={InheritanceMap=[id=0x7f0f0008myapp:style/AppTheme, id=0x7f0f000bmyapp:style/AppThemeBase29, id=0x7f0f000amyapp:style/AppThemeBase21, id=0x7f0f0009myapp:style/AppThemeBase, id=0x7f0f0219myapp:style/Theme.AppCompat.Light.NoActionBar, id=0x7f0f0213myapp:style/Theme.AppCompat.Light, id=0x7f0f0052myapp:style/Base.Theme.AppCompat.Light, id=0x7f0f00admyapp:style/Base.V28.Theme.AppCompat.Light, id=0x7f0f00aamyapp:style/Base.V26.Theme.AppCompat.Light, id=0x7f0f00a4myapp:style/Base.V23.Theme.AppCompat.Light, id=0x7f0f00a2myapp:style/Base.V22.Theme.AppCompat.Light, id=0x7f0f0098myapp:style/Base.V21.Theme.AppCompat.Light, id=0x7f0f00b0myapp:style/Base.V7.Theme.AppCompat.Light, id=0x7f0f012emyapp:style/Platform.AppCompat.Light, id=0x7f0f0139myapp:style/Platform.V25.AppCompat.Light, id=0x1030241android:style/Theme.Material.Light.NoActionBar, id=0x1030237android:style/Theme.Material.Light, id=0x103000candroid:style/Theme.Light, id=0x1030005android:style/Theme], Themes=[myapp:style/AppTheme, forced, myapp:style/LaunchScreenTheme, forced, myapp:style/Theme.AppCompat.Empty, forced, android:style/Theme.DeviceDefault.Light.DarkActionBar, forced]}
	at android.content.res.TypedArray.getColorStateList(TypedArray.java:600)
	at com.google.android.material.resources.MaterialResources.getColorStateList(MaterialResources.java:81)
	at com.google.android.material.resources.TextAppearance.<init>(TextAppearance.java:86)
	at com.google.android.material.resources.MaterialResources.getTextAppearance(MaterialResources.java:145)
	at com.google.android.material.tooltip.TooltipDrawable.loadFromAttributes(TooltipDrawable.java:158)
	at com.google.android.material.tooltip.TooltipDrawable.createFromAttributes(TooltipDrawable.java:119)
	at com.google.android.material.slider.BaseSlider.parseLabelDrawable(BaseSlider.java:502)
	at com.google.android.material.slider.BaseSlider.access$000(BaseSlider.java:195)
	at com.google.android.material.slider.BaseSlider$1.createTooltipDrawable(BaseSlider.java:378)
	at com.google.android.material.slider.BaseSlider.createLabelPool(BaseSlider.java:756)
	at com.google.android.material.slider.BaseSlider.setValuesInternal(BaseSlider.java:737)
	at com.google.android.material.slider.BaseSlider.setValues(BaseSlider.java:693)
	at com.google.android.material.slider.BaseSlider.processAttributes(BaseSlider.java:421)
	at com.google.android.material.slider.BaseSlider.<init>(BaseSlider.java:384)
	at com.google.android.material.slider.Slider.<init>(Slider.java:71)
	at com.google.android.material.slider.Slider.<init>(Slider.java:67)
	at com.google.android.material.slider.Slider.<init>(Slider.java:63)
	... 22 more

In our component we are using the slider like this:

                    <MDSlider :value="myValue" minValue="0" :maxValue="maxValue-1" @valueChange="onValueChange"
                        stepSize="1" elevation="40"
                        rippleColor="white" trackFillColor="black" trackBackgroundColor="white" thumbColor="white" 
                    />

About this issue

Original URL
State: closed
Created a year ago
Comments: 15 (6 by maintainers)

Most upvoted comments

@vallemar thank you for your help. Closing again.

stumpykilo on Mar 25, 2023

Confirmed that is what it was. This issue is resolved. Thank y’all for the help!

stumpykilo on Mar 25, 2023

@farfromrefug that change to the styles.xml resolved the error but am now getting Cannot read property 'nativeView' of undefined upon the initial load of the component.

@vallemar that is actually an old dependency that we are not using any longer. But when we did it worked with no problems. Here is some of the old code we had in production that was hitting an Azure Function that was using GraphQL:

import axios from "axios";

export const myApi = axios.create({
     baseURL: <api_url>
});

var request = {
    query: `query {
        getSeries {
            id,
            name
        }
    }`,
    variables: {}
};

var response = await myApi.post("Series", request);

response.data.data.getSeries.forEach(element => 
    series.push({
        id: element.seriesId,
        name: element.name
}));

stumpykilo on Mar 23, 2023