Creating a Scalable Label in NativeScript - nativescript

Question

I found a post how explains it to create it for Ios.
http://nuvious.com/Blog/2015/5/9/creating-a-scalable-label-in-nativescript
But how to do this in Android.
That is what I tried:
import {Label} from "tns-core-modules/ui/label";
function ScalingLabel() {
this.myLabel = new Label();
let TextViewCompat;
if (androidx)
TextViewCompat = androidx.core.widget.TextViewCompat;
else
TextViewCompat = android.support.v4.widget.TextViewCompat;
TextViewCompat.setAutoSizeTextTypeUniformWithConfiguration(this.myLabel, 8, 100, 1, 2);
}
ScalingLabel.prototype = new Label();
exports.ScalingLabel = ScalingLabel;
Vue.registerElement('ScalingLabel', ScalingLabel);
I'm getting the following error:
[Vue warn]: Error in v-on handler: "TypeError: Could not load view
for: nativescalinglabel. Error: Cannot convert object to
Landroid/widget/TextView; at index 0"

Answer 1

You are not suppose to create a instance but extend the original class.
class ScalingLabel extends Label {
initNativeView() {
super.initNativeView();
if (this.android) {
androidx.core.widget.TextViewCompat.setAutoSizeTextTypeUniformWithConfiguration(this.nativeViewProtected, 10, 100, 1, android.util.TypedValue.COMPLEX_UNIT_SP);
}
}
}
Vue.registerElement('ScalingLabel', () => ScalingLabel);
Then in your component try,
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<ScrollView>
<StackLayout class="form">
<TextField class="m-15 input input-border" v-model="message">
</TextField>
<Label :text="message" class="m-5 h3" />
<ScalingLabel :text="message" class="m-5 h3" height="30"
width="100%" textWrap="true" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
data() {
return {
message: ""
};
}
};
</script>