Can't make progressbar that works on iOS and Android - nativescript

Question

I'm trying to make a progress bar that moves across the screen with some text below it.
Here's my template:
<StackLayout v-else id="loadingContainer">
<StackLayout class="progress-bar">
<StackLayout class="progress"></StackLayout>
</StackLayout>
<StackLayout horizontalAlignment="center">
<Label id="progressText" :text="loadingText" />
</StackLayout>
</StackLayout>
and here is the CSS:
.progress-bar {
height: 20px;
width: 100%;
position: relative;
background-color: #f8f8f8;
}
.progress {
position: relative;
height: 100%;
border-radius: 0px 2px 2px 0px;
animation-name: fill;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-direction: normal;
width: 0%;
}
#keyframes fill {
0% {
width: 0%;
background-color: #6a2d91;
}
100% {
width: 100%;
background-color: #6a2d91;
}
}
Both display the text as I expect but the progress bar behaves very differently on iOS and Android. Android just shows the progress bar as full the whole time and never animates it. iOS shows the appropriate gray background until the `animation-duration is up and then the bar just shows full, it doesn't animate it. I have keyframes working on this page doing other things but I can't get this figured out.

Answer 1

By default child components in a vertical StackLayout will stretch out to fill the width. You should set horizontalAlignment to left on the progress bar layout, though it gets what you wanted on Android, on iOS horizontalAlignment / verticalAlignment is not respected during animation.
So I would suggest using JavaScript APIs to animate Width / Height, presented by Alex.
You may also use the default Progress and increment the value at internals to achieve similar look.