Nativescript: NS 6.4 HtmlView inconsistent results on Android and iOS

[felixkrautschuk]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.4.0
• Cross-platform modules: 6.4.1
• Android Runtime: 6.4.1
• iOS Runtime: 6.4.0
• Plugin(s): -

Describe the bug
According to According to https://github.com/NativeScript/NativeScript/pull/8207, the HtmlView should support new properties like color, link-color and font-size.
We want to try out the new features added to the HtmlView, so we try to style it in CSS like this:

.html-view {
    font-size: 16;
    color: #808080;
    link-color: #FF44FF;
}

While it works correctly on Android, it only works partially on iOS 12 (correct font-size and correct darkgrey text-color but it shows just the default blue link-color) and it does not work at all on iOS 13, as all the text is just black (only the font-size is set correctly). See the result in the screenshot below:

When trying to set those properties in XML like this:

On Android and iOS 12, the color is set correctly to the darkgrey tone, but the font-size and the link-color are not set correctly. On iOS 13 none of the properties are set correctly. The text and the link is black and it has the default font-size.

To Reproduce
Just open the sample app provided below.

Expected behavior
When setting those prperties in CSS or XML, they should be applied correctly to the HtmlView component.

Sample project
HtmlViewIssue.zip

[jdavidbakr]

Getting the same issue here - I have an HtmlView with a blue background and white text, but iOS 13 renders the text black (at least in the simulator). Android renders correctly.

[jdavidbakr]

This sounds like the issue also being reported on StackOverflow:

https://stackoverflow.com/questions/59055608/nativescript-6-htmlview-font-color-not-applied

[felixkrautschuk]

@jdavidbakr The scenario descried in the Stackoverflow thread is a bit different. There, they tried to modify the color by setting the font color within the html-string.
(As there was no way of changing the HtmlView color until now)

[jdavidbakr]

Ah, ok, it was similar enough that I thought it might be the same. In my case I'm trying to use the css color and link-color attributes to color my text, which doesn't work in the iOS Simulator, which is the same issue you are experiencing, yes?

[felixkrautschuk]

@jdavidbakr yes, I experience the exact same thing what you described.

[manijak]

Just wanted to pitch in, I was just applying Theme v2.0 in my ns-core app and have the same issue. It does apply correct font color when switching between light/dark mode, but I cannot override, say the dark mode font color to be less white for example.

cli: 6.4.0
ios: 6.4.2
core: 6.4.1

[felixkrautschuk]

According to the text color being always black on iOS:
It seems that setting the color before setting the text may cause this issue.
https://stackoverflow.com/questions/7134152/change-font-color-of-uitextview

This SO thread is pretty old and I don't know why this problem occurs only on iOS 13, setting the font color after the text is set fixes the issue in our custom htmlview component.

CustomHtmlView.prototype[html_view_core_common.htmlProperty.setNative] = function(value) {
    _super.prototype[html_view_common_1.htmlProperty.setNative].call(this, value);

    this.nativeView.textColor = this.color.ios;
};

[jdavidbakr]

How are you applying that code? I have a NativeScript Vue project and am not sure where to put that code and what the syntax should be. (This NativeScript journey has been very challenging, I feel like all the documentation and best practices are so cryptic!)

[ayrboy]

I am also having this issue, prior to ios 13.3.1 the colors were applied

I am using vanilla ns.
How can I solve the color issue?

var descr = page.getViewById("descr");
descr.html = global.htmlWrap('test');

On top of this, with darkmode it is invisible on a white background???
How can i make the entire htmlview black for now, at least until we can solve the color issue?

[nikoTM]

Seems like currently it is not possible to have HtmlView that contains text and a link and have them styled in 2 different colors. On Android when CSS color is applied to the wrapper as in:

<span style="color: red">Something <a href="#" style="color: blue">Link here</a></span>

Link will take the color of the span. I cannot find a workaround. link-color is completely ignored for me on Android at least (yet to test iOS).

[NickIliev]

@nikoTM the only thing that is not working for me is the color on iOS. Note that I am having a valid HTML (with html and body sections).

[iOS] Note: The link on iOS will work with HTTP/HTTPS addresses. Using a # (like a href="#") will make the link color gray.

Here is a Playground demo.

[RustamAkimov]

@NickIliev
Any chance that this line affects color problem in iOS 13:

https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/html-view/html-view.ios.ts#L93

[nikoTM]

@NickIliev it seems like a PR was merged to add support for dark mode, but it does not take into account user defined colors and overwrites with default label color.

[nikoTM]

cc @vchimev

[ayrboy]

@NickIliev
Any chance that this line affects color problem in iOS 13:

https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/html-view/html-view.ios.ts#L93

I remarked those lines out and rebuilt the project and problem solved!
Is there a better way? Maybe a way to unset the color in my app instead?

[PluoAction]

I also met this issue. When i remove the code of HtmlView https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/html-view/html-view.ios.ts#L93. It works.
Why ios need these code? If it is necessary, is there any way to change UIColor.labelColor?