Native Script - Setting Gradients

main-page.js

function pageLoaded(args) {
    var page = args.object;
    
    if (page.android) {
        setGradientAndroid(page);
    }
    else if (page.ios) {
        setGradientIOS(page);
    }
}
exports.pageLoaded = pageLoaded;

function setGradientAndroid(page) {
    var colorsArray = java.lang.reflect.Array.newInstance(java.lang.Integer.class.getField("TYPE").get(null), 2);
    colorsArray[0] = android.graphics.Color.parseColor("red");
    colorsArray[1] = android.graphics.Color.parseColor("blue");
    
    var gradient = new android.graphics.drawable.GradientDrawable(android.graphics.drawable.GradientDrawable.Orientation.TOP_BOTTOM, colorsArray);
    page.android.setBackground(gradient);
}
function setGradientIOS(page) {
    var pageView = page.ios.view;
    var colorsArray = NSMutableArray.alloc().initWithCapacity(2);
    colorsArray.addObject(interop.types.id(UIColor.redColor().CGColor));
    colorsArray.addObject(interop.types.id(UIColor.blueColor().CGColor));
    
    var gradientLayer = CAGradientLayer.layer();
    gradientLayer.colors = colorsArray;
    gradientLayer.frame = pageView.bounds;
    pageView.layer.insertSublayerAtIndex(gradientLayer, 0);
}

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
    <Label text="Hello"/>
  </StackLayout>
</Page>

Hey, I am looking for a way to access a GridLayout and change it's background to a gradient. Is there a way to select the GridLayout the same way you have selected the page object?

I'm use TypeScript and compiler says: "Cannot find name 'android'" or "Cannot find name 'java'" how I do to fix it? #)

colorsArray.addObject(interop.types.id(UIColor.redColor().CGColor));

How can use hex or RGB colors instead of a redColor() ????

var c = new Color("#00000F"); var uiColor = interop.types.id(c.ios.CGColor); colorsArray.addObject(uiColor);

I think something like that should work