How to change height of progress component in NativeScript

You can change the height of ProgressBar using the height property (due to some spcific in the native controls). However one of the gret advantages of NativeScript is that you have direct access to the native APIs for both iOS and Android. So after some small research here is how I managed to change the default scale (there might be even better approaches - this is one of the shortest I came upon).

TypeScript example:

Use the laoded event to get the reference to your progress bar in the code behind.

<Progress minValue="0" maxValue="100" value="25" loaded="onProgressLoaded"/>

Then in the code behind access the native controls

import { Progress } from 'ui/progress';
import { isAndroid, isIOS } from "platform"

declare let CGAffineTransformMakeScale: any; // or use tns-platform-declarations instead of casting to any


export function onProgressLoaded(args: EventData) {

    let progress = <Progress>args.object;

    if (isAndroid) {
        progress.android.setScaleY(5);  //  progress.android === android.widget.ProgressBar
    } else if (isIOS) {
        let transform = CGAffineTransformMakeScale(1.0, 5.0);  
        progress.ios.transform = transform; // progress.ios === UIProgressView
    }

}

Full demo app can be found here

You can directly set scaleY attribute of the progress element. Example:

<Progress scaleY="2" value="{{ progress }}" maxValue="{{totalTime}}" height="100"></Progress>

This will make it 2 times wider in the vertical (Y) axis.