diff --git a/src/UserPage.js b/src/UserPage.js
index 6cc53b1..c8c0a53 100644
--- a/src/UserPage.js
+++ b/src/UserPage.js
@@ -7,6 +7,7 @@ import {
Text,
ActivityIndicator,
useTheme,
+ Divider,
} from 'react-native-paper';
import { useFocusEffect } from '@react-navigation/core';
import { InAppBrowser } from 'react-native-inappbrowser-reborn';
@@ -15,9 +16,11 @@ import s from '../styles/UserModal.module.css';
import { GlobalContext } from '../App';
import { apiURL, wasteofURL } from './apiURL';
import getColorFromTheme from '../utils/getColorFromTheme';
-import { StatusBar } from 'react-native';
+import { StatusBar, useWindowDimensions } from 'react-native';
+import RenderHtml from 'react-native-render-html';
import { goBackIfCan } from '../utils/goBackIfCan';
import ErrorCard from './components/ErrorCard';
+import linkify from '../utils/linkify';
const UserPage = ({ route, navigation }) => {
const { username } = route.params;
@@ -169,6 +172,35 @@ const UserPage = ({ route, navigation }) => {
);
};
+ const WebDisplay = React.memo(function WebDisplay() {
+ const { width } = useWindowDimensions();
+ return (
+
+ );
+ });
const listHeader = () => {
return (
<>
@@ -231,10 +263,15 @@ const UserPage = ({ route, navigation }) => {
)}
{data?.bio && (
<>
-
+
About me
- {data.bio}
+
+
>
)}
>
@@ -243,7 +280,7 @@ const UserPage = ({ route, navigation }) => {
const renderItem = React.useCallback(({ item }) => , []);
return (
<>
-
+
goBackIfCan(navigation)}
color={headerTextColor || colors.secondary}
diff --git a/src/components/Post.js b/src/components/Post.js
index ef632fd..2b3dcec 100644
--- a/src/components/Post.js
+++ b/src/components/Post.js
@@ -13,8 +13,7 @@ import RenderHtml from 'react-native-render-html';
import ago from 's-ago';
import s from '../../styles/Post.module.css';
import filter from '../../utils/filter';
-import linkify from 'linkify-html';
-import 'linkify-plugin-mention';
+import linkify from '../../utils/linkify';
import UserChip from './UserChip';
import AutoImage from './AutoImage';
import { GlobalContext } from '../../App';
@@ -100,15 +99,11 @@ const Post = React.memo(({ post, isRepost, repostCount, hideUser }) => {
/>
);
};
- const WebDisplay = React.memo(function WebDisplay({ html }) {
+ const WebDisplay = React.memo(function WebDisplay() {
return (
`wasteof://users/${href}`,
- },
- }),
+ html: linkify(filteredHTML),
}}
contentWidth={width - 65 * localRepostCount}
tagsStyles={{
diff --git a/styles/UserModal.module.css b/styles/UserModal.module.css
index 589f82d..fbe7869 100644
--- a/styles/UserModal.module.css
+++ b/styles/UserModal.module.css
@@ -40,5 +40,4 @@
.heading {
margin-left: 25px;
- font-weight: bold;
}
diff --git a/utils/linkify.js b/utils/linkify.js
new file mode 100644
index 0000000..dd8c636
--- /dev/null
+++ b/utils/linkify.js
@@ -0,0 +1,16 @@
+import linkifyHtml from 'linkify-html';
+import 'linkify-plugin-mention';
+
+/**
+ * Returns a linkified copy of the inputted string, including @mentions
+ * @param {string} content - string to linkify
+ */
+const linkify = content => {
+ return linkifyHtml(content, {
+ formatHref: {
+ mention: href => `wasteof://users/${href}`,
+ },
+ });
+};
+
+export default linkify;