From f76e02e4fbf9efe9e47c133912c0f021cbc84bcd Mon Sep 17 00:00:00 2001 From: Ken-ichi Date: Thu, 9 Feb 2023 18:10:59 -0500 Subject: [PATCH] Support custom font in UserText (#454) --- src/components/SharedComponents/UserText.js | 14 +++++++++++--- src/components/UiLibrary.js | 12 +++++++++++- tests/unit/components/UserText/UserText.test.js | 2 +- 3 files changed, 23 insertions(+), 5 deletions(-) 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", () => {