diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 150e46133723d..43b6f6de6a2d8 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -6,6 +6,7 @@ import { View, Platform, Dimensions } from 'react-native'; import { get, pickBy, debounce } from 'lodash'; import memize from 'memize'; +import { colord } from 'colord'; /** * WordPress dependencies @@ -1015,6 +1016,15 @@ export class RichText extends Component { return isBlockBasedTheme && tagsToMatch.test( tagName ); } + getLinkTextColor( defaultColor ) { + const { style } = this.props; + const customColor = style?.linkColor && colord( style.linkColor ); + + return customColor && customColor.isValid() + ? customColor.toHex() + : defaultColor; + } + render() { const { tagName, @@ -1051,6 +1061,9 @@ export class RichText extends Component { textDecorationColor: defaultTextDecorationColor, fontFamily: defaultFontFamily, } = getStylesFromColorScheme( styles.richText, styles.richTextDark ); + const linkTextColor = this.getLinkTextColor( + defaultTextDecorationColor + ); let selection = null; if ( this.needsSelectionUpdate ) { @@ -1146,8 +1159,7 @@ export class RichText extends Component { text: html, eventCount: this.lastEventCount, selection, - linkTextColor: - style?.linkColor || defaultTextDecorationColor, + linkTextColor, tag: tagName, } } placeholder={ this.props.placeholder }