Search code examples
nativescriptnativescript-angular

How to add new line to Button from XML

In my NativeScript project, I'm trying to make a bottom bar with an icon and then the word that resembles it underneath it. Like this

bottom bar

Here's the html of what I tried to do:

<GridLayout rows="*,60">
    <ScrollView row="0">
        <WrapLayout orientation="horizontal">
            <Label text="There are no leagues currently." style="color: black; text-align: center; font-weight: bold"></Label>
            <Label text="Contact your commissioner" style="color: black; text-align: center; font-weight: bold"></Label>
            <Label text="to create one." style="color: black; text-align: center; font-weight: bold"></Label>
        </WrapLayout>
    </ScrollView>
    <StackLayout row="1" orientation="horizontal">
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf015;\n" class="fa"></Span>
                <Span text="Home"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf000;\n" class="fa"></Span>
                <Span text="All Cocktails"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf005;\n" class="fa"></Span>
                <Span text="Favorite"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf007;\n" class="fa"></Span>
                <Span text="Profile"></Span>
            </FormattedString>
        </Button>
    </StackLayout>
</GridLayout>

and here's my css:

.fa {
    font-family: 'Font Awesome 5 Free';
}

However, whenever I try to do this, it comes out like this

result :(

I'm not quite sure where to go so any help would be great. Thanks!

Here's a working example of my code: https://play.nativescript.org/?template=play-ng&id=r8Jodt&v=19

Solution

  • The actual problem here is that \n works only with JavaScript, while using it in HTML (XML) file you should use the encode version of the character that is &#xA;, that should give you a new line.

    Are you trying to have a custom TabBar for your TabView? If Yes, you may try the nativescript-vector-icons which allows you to use font icons on TabBar.