@nativescript/auto-fit-text

NativeScript plugin for a label that resizes on a single line to fit the screen.

Usage no npm install needed!

<script type="module">
  import nativescriptAutoFitText from 'https://cdn.skypack.dev/@nativescript/auto-fit-text';
</script>

README

@nativescript/auto-fit-text

ns plugin add @nativescript/auto-fit-text

This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of the label's width

Usage

Nativescript

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  loaded="pageLoaded"
  class="page"
  xmlns:AFT="@nativescript/auto-fit-text"
>
  <StackLayout class="p-20">
    <AFT:AutoFitText
      text="Testinggggggggggggggggg"
      textWrap="false"
    ></AFT:AutoFitText>
  </StackLayout>
</Page>

Angular NativeScript

import { NativeScriptAutoFitTextModule } from '@nativescript/auto-fit-text/angular';

// Be sure to add the plugin module to your NgModule
@NgModule({
    imports: [NativeScriptAutoFitTextModule],
})

<AutoFitText row="2" fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." textWrap="false"></AutoFitText>

Credits

@grantland - android-autofittextview

License

Apache License Version 2.0, January 2004