Nativescript: [Feature] add outline to label and button text

[kazemihabib]

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?YES

Tell us about the problem

Currently there is no way to add outline for texts in nativescript.
but we need that in cases the color of Label ( or Button with transparent background) and parent are same so if we don't add an outline to text of button and label the element will be invisible.

I found that for android this can be done using shadaw for Label and stroke for button.

It would be really good if we had CSS property to set outline of text.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[NordlingDev]

I actually tried to do this yesterday with native code but couldn't solve it. However, in iOS you can at least create a shadow effect using this:

var Color = require("color").Color;

function viewShadow(view, hex, props = {}) {
  var defaults = {
    alpha: 1,
    x: 0, y: 0,
    radius: 1,
  };
  for(var key in defaults) if(!props.hasOwnProperty(key)) props[key] = defaults[key];

  if(view.ios) {
    nativeView = view.ios;
    nativeView.layer.masksToBounds = false;
    nativeView.layer.shadowOpacity = props.alpha;
    nativeView.layer.shadowRadius = props.radius;
    nativeView.layer.shadowColor = new Color(hex).ios.CGColor;
    nativeView.layer.shadowOffset = CGSizeMake(props.x, props.y);
  }
};

This won't create a perfect outline though because you cannot control the intensity. What I tried to do after some googling was this:

function textOutline(view, color = "#ff0000", width = -1.0) {
  color = new Color(color);
  width = parseFloat(width);

  if(view.ios) {
    let nativeView = view.ios;
    let attributes = NSDictionary.dictionaryWithDictionary({
      NSStrokeColorAttributeName: color.ios,
      NSForegroundColorAttributeName: view.color.ios,
      NSStrokeWidthAttributeName: width
    });
    let attributedString = NSAttributedString.alloc().initWithStringAttributes(view.text || "", attributes);
    nativeView.attributedText = attributedString;
  }
}

But it doesn't work. It should, but nothing happens.

[tsonevn]

Hi @kazemihabib,

This issue could be related to #550, where has been logged a feature request for implementing shadow CSS property for the components. Could you verify the attached issue and to vote for it if this is your case?

Regards,
@tsonevn

[kazemihabib]

Hi, @tsonevn

that issue is about box-shadaw but my requested feature is text-shadaw.
this page shows the difference http://www.w3schools.com/css/css3_shadows.asp .

[NordlingDev]

@tsonevn - box-shadow and text-shadow are different things. Also, what's being requested here is an outline feature. Think "Stroke" in Photoshop compared to "Outer shadow" or "Outer glow". So it's not the same request as #550.

[Cayan]

Any update on this?

[tsonevn]

Hi @Cayan,
This feature is still under review and I could not commit to the exact time when this functionality will be included in NativeScript.
Regarding that, any PR will be highly appreciated and if all the test pass, it will be included in the modules. For further info review this article.

[34r7h]

+1 text-shadow / stroke feature

[shabib3]

+1 text-shadow

[elalienx]

Yes, please add the text-shadow property.

[gabrielsmelo]

Please, add text-shadow property!! <3

[tanekim77]

I need text-shadow property so bad

[frabanca]

+1!!!

[Omi231]

+1

[Omi231]

I can't believe a modern framework doesn't have this feature. Its one of the very basic things in terms of UI.

[Macarthurval]

I've found a way to stroke easily a label text:

function textLoaded(args) {

    var attributes = {
        NSStrokeColor: UIColor.blackColor,
        NSColor: UIColor.whiteColor,
        NSStrokeWidth: 2
    };

    var attributedString = NSAttributedString.alloc().initWithStringAttributes( args.object.text, attributes );

    args.object.ios.attributedText = attributedString;

}