NathanWalker / nativescript-fancyalert

Fancy alerts for NativeScript.
Other
147 stars 38 forks source link

How to set the icon? #59

Closed fransyozef closed 5 years ago

fransyozef commented 5 years ago

I have a fancy alert with timer (showCustomButtonTimer), but I want the icon in the circle that is used in showSuccess function. How do I set it?

Using this code right now :

    TNSFancyAlert.showCustomButtonTimer(
        0,
        true,
        undefined,
        "green",
        "Mission Impossible",
        `This will self-destruct in 5 seconds.`,
        "Ok"
      ); 
NathanWalker commented 5 years ago

A lot of the methods are convenient method wrappers around others that create the alert. To customize further best to look at the methods available and configure a custom fancy alert based on your needs given all the options 👍

NathanWalker commented 5 years ago

ie, showCustomButtonTimer actually creates an alert much like the others:

let alert = TNSFancyAlert.createAlert(width);
      TNSFancyAlert.applyTextDisplayOptions(alert);

      buttonIndex = buttonIndex || 0;
      reverse = reverse || false;
      title = title || "Title";
      alert.addTimerToButtonIndexReverse(buttonIndex, reverse);
      TNSFancyAlert.showCustom(
        alert,
        imageName,
        color,
        title,
        subTitle,
        closeBtnTitle || "Dismiss",
        duration || 5
      );

You can see the imageName could be used which when it's a string expects to find that image by it's name in your apps resources:

if (typeof image === "string") {
      image = UIImage.imageNamed(image);
    }

However you can pass in any type of UIImage. For example you can just draw one with iOS apis:

private imageOfPlusIcon() {

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(80, 80), false, 0);
    const iconColor = new Color('#fff').ios;

    //// Bezier Drawing
    let bezierPath = UIBezierPath.bezierPath();
    bezierPath.moveToPoint(CGPointMake(35.72, 15));
    bezierPath.addLineToPoint(CGPointMake(44.35, 15));
    bezierPath.addLineToPoint(CGPointMake(44.35, 35.65));
    bezierPath.addLineToPoint(CGPointMake(65, 35.65));
    bezierPath.addLineToPoint(CGPointMake(65, 43.89));
    bezierPath.addLineToPoint(CGPointMake(44.35, 43.89));
    bezierPath.addLineToPoint(CGPointMake(44.35, 65));
    bezierPath.addLineToPoint(CGPointMake(35.72, 65));
    bezierPath.addLineToPoint(CGPointMake(35.72, 43.89));
    bezierPath.addLineToPoint(CGPointMake(15, 43.89));
    bezierPath.addLineToPoint(CGPointMake(15, 35.65));
    bezierPath.addLineToPoint(CGPointMake(35.72, 35.65));
    bezierPath.addLineToPoint(CGPointMake(35.72, 15));
    bezierPath.closePath();
    iconColor.setFill();
    bezierPath.fill();

    const image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
  }

I'd recommend using this tool to create bezier draw paths of any vector shape your heart desires :) https://www.paintcodeapp.com/

Cheers!