How to add new line to Button from XML - nativescript

Question

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
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="\n" class="fa"></Span>
<Span text="Home"></Span>
</FormattedString>
</Button>
<Button textWrap="true" width="25%">
<FormattedString>
<Span text="\n" class="fa"></Span>
<Span text="All Cocktails"></Span>
</FormattedString>
</Button>
<Button textWrap="true" width="25%">
<FormattedString>
<Span text="\n" class="fa"></Span>
<Span text="Favorite"></Span>
</FormattedString>
</Button>
<Button textWrap="true" width="25%">
<FormattedString>
<Span text="\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
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

Answer 1

Use the GridLayout for BottomBar, you can look for the playground sample here
<GridLayout columns="*,*,*,*" rows="*,*" width="100%" row="1" backgroundColor="lightgray">
<Label text="" row="0" col="0" class="fa" width="100%" textAlignment="center"></Label>
<Label text="Home" row="1" col="0" width="100%" textAlignment="center"></Label>
<Label text="" row="0" col="1" class="fa" width="100%" textAlignment="center"></Label>
<Label text="All Cocktails" row="1" col="1" width="100%" textAlignment="center"></Label>
<Label text="" row="0" col="2" class="fa" width="100%" textAlignment="center"></Label>
<Label text="Favorite" row="1" col="2" width="100%" textAlignment="center"></Label>
<Label text="" row="0" col="3" class="fa" width="100%" textAlignment="center"></Label>
<Label text="Profile" row="1" col="3" width="100%" textAlignment="center"></Label>
</GridLayout>

Answer 2

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
, 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.

Answer 3

Make their position as display:absolute and within the class it should be inline-block. With some margins it should be easy to adjust

Answer 4

I would contain all the buttons in a div, and then each button and label group in it's own div.
<div id='button-row'>
<div class='bottom-button>
<button></button>
<p class='label>Label</p>
</div>
<div class='bottom-button>
<button></button>
<p class='label>Label</p>
</div>
// repeat for your buttons
</div>
Your css:
.button-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bottom-button {
display: flex;
flex-direction: column;
justify-content: center;
// the font awesome icons are considered text I believe, so
text-align: center;
// would also work
}
This will make all your buttons in the row evenly spaced, and place your button on top of the label. I like using flexbox because its quick and easy, and mobile responsive. I'm not a CSS pro by any means but it works for me.
Edit: just saw your markup. Try giving formatted string the css of .bottom-button and see if that works.

Answer 5

For \n just worked for android.
using hex code
also not worked for both ios and android.
the final solution I find is as below:
(for nativescript-vue)
<Label textWrap="true" col="0" row="0">
<FormattedString>
<Span class="number" :text="days" />
<Span class="format" :text="'\n' + 'Gün'" />
</FormattedString>
</Label>