Nested hyperlinks with neighbouring image are styled wrong

[sebk]

Is this a bug report or a feature request?

Bug report

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both platforms

Is the bug reproductible in a production environment (not a debug one)?

Yes

Have you been able to reproduce the bug in the provided example?

Yes

Environment

Environment:
React: 16.9.0
React native: 0.61.4
react-native-render-html: 4.2.0

Target Platform:
Android (8.0)
iOS (13.3)

Steps to Reproduce

1. Run the example. Both links are inside a <p>-Tag. One of the has an image as a neighbour.

Expected Behavior

Both links are inside a <p>-Tag. One of the has an image as a neighbour. The expected behaviour is that all text not in a link is renderer red and both links are rendered green.

Actual Behavior

The link that has an image as a neighbour is renderer in the color of the parent paragraph (red). The link without an image as a neighbour is rendered green.

Reproducible Demo

https://snack.expo.io/B1PshHbVL

Check on iOS for example (not web).

[jsamr]

@sebk I implemented a test that could reproduce the issue. Will investigate on the cause and provide a fix before 4.2.2 release.

[jsamr]

@sebk Unfortunately a fix is non-trivial. The incriminated code is situated here: src/HTML.js#L370. Basically, what happens is that text styles which should be inherited to children are force-written into children's htmlAttribs.styles, aka inline styles. Because inline styles take precedence over tagsStyles, the later are ignored. We should instead store the information about inherited styles in a separate structure that has less precedence than tagsStyles. The restructuration will not happen before 6.X, but at least I have the test merged to master, see 7c8d26a.

We might consider to make the inheritance behavior opt-in for the 5.0 release, with a prop such as enableExperimentalCSSInlineTextStyleInheritance which would address your issue in the meantime.

[gazedash]

@jsamr what can I do now to change the color of a link?

[jsamr]

This issue has been fixed in the Foundry release. Try it out now! See #430 for instructions.