diff --git a/src/components/SharedComponents/UserText.js b/src/components/SharedComponents/UserText.js
index fc92f599f..648a1c2f5 100644
--- a/src/components/SharedComponents/UserText.js
+++ b/src/components/SharedComponents/UserText.js
@@ -2,8 +2,8 @@ import linkifyHtml from "linkify-html";
import { trim } from "lodash";
import MarkdownIt from "markdown-it";
import * as React from "react";
-import { useWindowDimensions } from "react-native";
-import HTML from "react-native-render-html";
+import { Platform, useWindowDimensions } from "react-native";
+import HTML, { defaultSystemFonts } from "react-native-render-html";
import WebView from "react-native-webview";
import sanitizeHtml from "sanitize-html";
@@ -107,13 +107,21 @@ const UserText = ( {
//
html = linkifyHtml( html, LINKIFY_OPTIONS );
+ const baseStyle = {
+ fontFamily: `Whitney-Light${Platform.OS === "ios" ? "" : "-Pro"}`,
+ fontSize: 16,
+ lineHeight: 22,
+ ...htmlStyle
+ };
+ const fonts = ["Whitney-Light", "Whitney-Light-Pro", ...defaultSystemFonts];
return (
);
};
diff --git a/src/components/UiLibrary.js b/src/components/UiLibrary.js
index 56ae866c4..6db1a7d68 100644
--- a/src/components/UiLibrary.js
+++ b/src/components/UiLibrary.js
@@ -25,8 +25,9 @@ import {
} from "components/SharedComponents";
import AddObsButton from "components/SharedComponents/Buttons/AddObsButton";
import SecondaryCTAButton from "components/SharedComponents/Buttons/SecondaryCTAButton";
+import UserText from "components/SharedComponents/UserText";
import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
-import { ScrollView, View } from "components/styledComponents";
+import { fontMonoClass, ScrollView, View } from "components/styledComponents";
import React from "react";
import { useTranslation } from "react-i18next";
import { Alert } from "react-native";
@@ -39,6 +40,9 @@ const UiLibrary = () => {
const { t } = useTranslation();
const theme = useTheme();
const currentUser = useCurrentUser();
+ const userText = `
+ User-generated text should support markdown, like **bold**, *italic*, and [links](https://www.inaturalistorg).
+ `.trim();
return (
@@ -141,6 +145,12 @@ const UiLibrary = () => {
List1
List2
+ UserText
+ Source
+ {userText}
+ Result
+
+
Icon Button w/ Custom iNaturalist Icons
diff --git a/tests/unit/components/UserText/UserText.test.js b/tests/unit/components/UserText/UserText.test.js
index 5f38a0ad9..c0bc6bcba 100644
--- a/tests/unit/components/UserText/UserText.test.js
+++ b/tests/unit/components/UserText/UserText.test.js
@@ -39,7 +39,7 @@ describe( "Sanitization", () => {
expect( await screen.findByLabelText( altText ) ).toBeTruthy();
// default font size is 14, check if no change
- expect( screen.queryByText( pTagText ) ).toHaveProperty( "props.style.0.fontSize", 14 );
+ expect( screen.queryByText( pTagText ) ).toHaveProperty( "props.style.0.fontSize", 16 );
} );
it( "links all @ mentions", () => {