diff --git a/src/components/Anchor/index.js b/src/components/Anchor/index.js
new file mode 100644
index 0000000000000..a7d526efeb788
--- /dev/null
+++ b/src/components/Anchor/index.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+
+/**
+ * Text based component that is passed a URL to open onPress
+ */
+
+const propTypes = {
+ // The URL to open
+ href: PropTypes.string.isRequired,
+
+ // Any children to display
+ children: PropTypes.node,
+
+ // Any additional styles to apply
+ // eslint-disable-next-line react/forbid-prop-types
+ style: PropTypes.any,
+};
+
+const defaultProps = {
+ children: null,
+ style: {},
+};
+
+const Anchor = ({
+ href,
+ children,
+ style,
+ ...props
+}) => {
+ // If the style prop is an array of styles, we need to mix them all together
+ const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
+ ...finalStyles,
+ ...s
+ }), {});
+
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {children}
+ );
+};
+
+Anchor.propTypes = propTypes;
+Anchor.defaultProps = defaultProps;
+Anchor.displayName = 'Anchor';
+
+export default Anchor;
diff --git a/src/components/Anchor.js b/src/components/Anchor/index.native.js
similarity index 94%
rename from src/components/Anchor.js
rename to src/components/Anchor/index.native.js
index c316d00588540..e8f4941ae80f6 100644
--- a/src/components/Anchor.js
+++ b/src/components/Anchor/index.native.js
@@ -1,8 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';
-import {Linking} from 'react-native';
-import Text from './Text';
+import {Linking, Text} from 'react-native';
/**
* Text based component that is passed a URL to open onPress
diff --git a/src/page/HomePage/Report/ReportHistoryItemFragment.js b/src/page/HomePage/Report/ReportHistoryItemFragment.js
index 4d900661000d8..595b6a61f2ec5 100644
--- a/src/page/HomePage/Report/ReportHistoryItemFragment.js
+++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js
@@ -6,6 +6,7 @@ import Str from '../../../lib/Str';
import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes';
import styles, {webViewStyles} from '../../../style/StyleSheet';
import Text from '../../../components/Text';
+import Anchor from '../../../components/Anchor';
const propTypes = {
// The message fragment needing to be displayed
@@ -24,6 +25,14 @@ class ReportHistoryItemFragment extends React.PureComponent {
super(props);
this.alterNode = this.alterNode.bind(this);
+
+ // Define the custom render methods
+ // For tags, the attribute is used to be more cross-platform friendly
+ this.customRenderers = {
+ a: (htmlAttribs, children, convertedCSSStyles, passProps) => (
+ {children}
+ ),
+ };
}
/**
@@ -51,6 +60,7 @@ class ReportHistoryItemFragment extends React.PureComponent {
return fragment.html !== fragment.text
? (
Linking.openURL(href)}