NS 6.4 HtmlView inconsistent results on Android and iOS

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 #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

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.

This sounds like the issue also being reported on StackOverflow:

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

@jdavidbakr

@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)

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?

@jdavidbakr

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

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

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;
};

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!)

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?

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).

@nikoTM

@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.

@NickIliev

@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

@NickIliev

@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.

@vchimev

cc @vchimev

@NickIliev

@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?

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?

FYI, its now in
https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/html-view/index.ios.ts
Nativescript 7
I removed the same lines of code.

@NickIliev

@NickIliev Any update on this? I see it's also implemented in NS8.

I can't just simply comment out core code since our app runs CI.

Thanks for the help

Working solution (vue, but can be used in any case):

const changeColor = (args: EventData) => {
  const htmlView = args.object as HtmlView
  htmlView.nativeViewProtected.textColor = new Color('#516d7d').ios
}
<HtmlView html="<p>My text</p>" @loaded="changeColor" />

Navigation Menu

Repository navigation

NS 6.4 HtmlView inconsistent results on Android and iOS #8368

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

NS 6.4 HtmlView inconsistent results on Android and iOS #8368

Description

Activity

jdavidbakr commented on Feb 22, 2020

jdavidbakr commented on Feb 22, 2020

felixkrautschuk commented on Feb 22, 2020

jdavidbakr commented on Feb 22, 2020

felixkrautschuk commented on Feb 22, 2020

manijak commented on Feb 23, 2020

felixkrautschuk commented on Feb 25, 2020

jdavidbakr commented on Feb 25, 2020

ayrboy commented on Feb 26, 2020

nikoTM commented on Apr 7, 2020

NickIliev commented on Apr 7, 2020

RustamAkimov commented on Apr 10, 2020

nikoTM commented on May 12, 2020

nikoTM commented on May 12, 2020

ayrboy commented on Jun 22, 2020

PluoAction commented on Jul 7, 2020

trevormackay commented on Mar 11, 2021

SingleMalted commented on May 11, 2021

vts45436 commented on Jul 26, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions