Enable rendering HTML in captions, comments and bios. Closes #9

package-lock.json

@@ -23,6 +23,7 @@
         "react-native-pager-view": "5.0.12",
         "react-native-popup-menu": "^0.15.10",
         "react-native-reanimated": "~2.1.0",
+        "react-native-render-html": "^5.1.1",
         "react-native-safe-area-context": "3.2.0",
         "react-native-screens": "~3.0.0",
         "react-native-tab-view": "^2.16.0",
@@ -4650,6 +4651,24 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/character-entities-html4": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz",
+      "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@@ -5247,16 +5266,103 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/deprecated-prop-type": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/deprecated-prop-type/-/deprecated-prop-type-1.0.0.tgz",
+      "integrity": "sha512-Hp4VxvZN6IlbKvleZfbdrojOmnPXuRPjC9cQ82j6bdI3DRCwGR+7CEf367X59MHz/y8Ao/mxdP7YyR3KTb+EhQ==",
+      "dependencies": {
+        "warning": "4.0.1"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/domhandler": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
     },
+    "node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
+      "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+      "dependencies": {
+        "domelementtype": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
+      "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/domutils/node_modules/domhandler": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5296,6 +5402,14 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/envinfo": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
@@ -6559,6 +6673,20 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz",
+      "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^3.3.0",
+        "domutils": "^2.4.2",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/htmlparser2?sponsor=1"
+      }
+    },
     "node_modules/http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -9536,6 +9664,21 @@
         "ua-parser-js": "^0.7.18"
       }
     },
+    "node_modules/react-native-render-html": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-5.1.1.tgz",
+      "integrity": "sha512-K4vP50555eZyVTbS0jv356I+S2WX/TavSlYi3zsg/XhYzZFO4sIFW8MZBZx/IFSQXlWueCuw6poGAXguz+SO3w==",
+      "dependencies": {
+        "deprecated-prop-type": "^1.0.0",
+        "htmlparser2": "5.0.1",
+        "prop-types": "^15.7.2",
+        "stringify-entities": "^3.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz",
@@ -10756,6 +10899,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz",
+      "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==",
+      "dependencies": {
+        "character-entities-html4": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
@@ -11260,6 +11417,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
+      "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -15067,6 +15232,16 @@
         }
       }
     },
+    "character-entities-html4": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz",
+      "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g=="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
+    },
     "chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@@ -15555,16 +15730,77 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "deprecated-prop-type": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/deprecated-prop-type/-/deprecated-prop-type-1.0.0.tgz",
+      "integrity": "sha512-Hp4VxvZN6IlbKvleZfbdrojOmnPXuRPjC9cQ82j6bdI3DRCwGR+7CEf367X59MHz/y8Ao/mxdP7YyR3KTb+EhQ==",
+      "requires": {
+        "warning": "4.0.1"
+      }
+    },
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+          "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        }
+      }
+    },
     "dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
     },
+    "domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+    },
+    "domhandler": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
+      "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+      "requires": {
+        "domelementtype": "^2.0.1"
+      }
+    },
+    "domutils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
+      "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+          "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -15601,6 +15837,11 @@
         "once": "^1.4.0"
       }
     },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+    },
     "envinfo": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
@@ -16649,6 +16890,17 @@
         "react-is": "^16.7.0"
       }
     },
+    "htmlparser2": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz",
+      "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^3.3.0",
+        "domutils": "^2.4.2",
+        "entities": "^2.0.0"
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -19127,6 +19379,17 @@
         }
       }
     },
+    "react-native-render-html": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-5.1.1.tgz",
+      "integrity": "sha512-K4vP50555eZyVTbS0jv356I+S2WX/TavSlYi3zsg/XhYzZFO4sIFW8MZBZx/IFSQXlWueCuw6poGAXguz+SO3w==",
+      "requires": {
+        "deprecated-prop-type": "^1.0.0",
+        "htmlparser2": "5.0.1",
+        "prop-types": "^15.7.2",
+        "stringify-entities": "^3.1.0"
+      }
+    },
     "react-native-safe-area-context": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz",
@@ -20046,6 +20309,16 @@
         }
       }
     },
+    "stringify-entities": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz",
+      "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==",
+      "requires": {
+        "character-entities-html4": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
@@ -20427,6 +20700,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
+      "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

package.json

@@ -26,6 +26,7 @@
     "react-native-pager-view": "5.0.12",
     "react-native-popup-menu": "^0.15.10",
     "react-native-reanimated": "~2.1.0",
+    "react-native-render-html": "^5.1.1",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.0.0",
     "react-native-tab-view": "^2.16.0",

src/components/pages/profile.js

@@ -12,7 +12,8 @@ import * as Linking from "expo-linking";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
 import { activeOrNot } from "src/interface/interactions";
-import { withoutHTML, pluralize } from "src/interface/rendering";
+import HTML from "react-native-render-html";
+import { withLeadingAcct, withoutHTML, pluralize } from "src/interface/rendering";
 import * as requests from "src/requests";
 
 import GridViewJsx from "src/components/posts/grid-view";
@@ -348,9 +349,9 @@ const RawProfileJsx = (props) => {
 
                     </Text>
                 </Text>
-                <Text style = { styles.note }>
+                <HTML
-                    {props.profile.note}
+                    source = { { html: props.profile.note } }
-                </Text>
+                    contentWidth = { SCREEN_WIDTH } />
                 <View style = { styles.fields.container }>
                     { props.profile.fields
                         ? props.profile.fields.map((field, index) => (
@@ -382,35 +383,34 @@ const RawProfileJsx = (props) => {
     );
 };
 
-const screen_width = Dimensions.get("screen").width;
+const SCREEN_WIDTH = Dimensions.get("window").width;
-const screen_height = Dimensions.get("screen").height;
 
 const styles = {
     jumbotron: {
-        padding: screen_width / 20,
+        padding: SCREEN_WIDTH / 20,
     },
     profileHeader: {
         flexDirection: "row",
         alignItems: "center",
-        marginBottom: screen_width / 20,
+        marginBottom: SCREEN_WIDTH / 20,
     },
     displayName: {
         fontSize: 24
     },
     avatar: {
-        width: screen_width / 5,
+        width: SCREEN_WIDTH / 5,
-        height: screen_width / 5,
+        height: SCREEN_WIDTH / 5,
 
-        borderRadius: screen_width / 10,
+        borderRadius: SCREEN_WIDTH / 10,
-        marginRight: screen_width / 20,
+        marginRight: SCREEN_WIDTH / 20,
     },
     profileHeaderIcon: {
-        width: screen_width / 12,
+        width: SCREEN_WIDTH / 12,
-        height: screen_width / 12,
+        height: SCREEN_WIDTH / 12,
     },
     profileContextContainer: {
         marginLeft: "auto",
-        marginRight: screen_width / 15,
+        marginRight: SCREEN_WIDTH / 15,
     },
     accountStats: {
         fontSize: 14,
@@ -428,10 +428,10 @@ const styles = {
         },
         cell: {
             name: {
-                width: screen_width / 3,
+                width: SCREEN_WIDTH / 3,
             },
             value: {
-                width: (screen_width / 3) * 2,
+                width: (SCREEN_WIDTH / 3) * 2,
             },
         }
     },

src/components/pages/view-comments.js

@@ -11,7 +11,12 @@ import { Ionicons } from '@expo/vector-icons';
 import { ScrollView } from "react-native-gesture-handler";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
-import { timeToAge, StatusBarSpace } from "src/interface/rendering";
+import HTML from "react-native-render-html";
+import {
+    withLeadingAcct,
+    timeToAge,
+    StatusBarSpace
+} from "src/interface/rendering";
 import { activeOrNot } from "src/interface/interactions";
 
 import TimelineViewJsx from "src/components/posts/timeline-view";
@@ -95,7 +100,7 @@ function threadify(descendants) {
 
     let sub = byReply.slice(1); // All sub-comments
 
-    // Repeate the procedure until sub is empty (i.e all comments have been
+    // Repeat the procedure until sub is empty (i.e all comments have been
     // sorted)
     while (sub.length > 0) {
         sorted.forEach((thread, threadIndex) => {
@@ -150,8 +155,14 @@ const CommentJsx = (props) => {
                 style = { styles.avatar } />
             <View style = { styles.contentContainer }>
                 <Text style = { styles.content }>
-                    <Text style = { styles.bold }>{ props.data.account.acct }</Text>&nbsp;
+                    <HTML
-                    { props.data.content }
+                        source = {{
+                            html: withLeadingAcct(
+                                props.data.account.acct,
+                                props.data.content
+                            )
+                        }}
+                        contentWidth = { SCREEN_WIDTH }/>
                 </Text>
                 <View style = { styles.commentActions }>
                     <View>
@@ -303,7 +314,7 @@ const ViewCommentsJsx = (props) => {
                 state.accessToken,
             );
 
-            // NOTE: It appears that it takes a moment for the Context of a
+            // It appears that it takes a moment for the Context of a
             // post to register that a comment has been deleted, so instead
             // of waiting for it, it's more efficient to just drop the comment
             // on the client side.

src/components/posts/post.js

@@ -14,8 +14,11 @@ import {
     getAutoHeight,
 } from "src/interface/rendering";
 
+import HTML from "react-native-render-html";
+
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as requests from "src/requests";
+import { withLeadingAcct } from "src/interface/rendering";
 
 import PostActionBarJsx from "src/components/posts/post-action-bar";
 
@@ -147,12 +150,14 @@ export const RawPostJsx = (props) => {
                 onReblog = { props.onReblog }
                 onBookmark = { props.onBookmark } />
             <View style = { styles.caption }>
-                <Text>
+                <HTML
-                    <Text style = { styles.strong }>
+                    source = {{
-                        { props.data.account.username }
+                        html: withLeadingAcct(
-                    </Text>
+                            props.data.account.acct,
-                    &nbsp;{ props.data.content }
+                            props.data.content
-                </Text>
+                        )
+                    }}
+                    contentWidth = { SCREEN_WIDTH }/>
                 <TouchableOpacity
                       onPress = {
                         () => props.navigation.navigate("ViewComments", {

src/interface/rendering.js

@@ -14,6 +14,12 @@ export function withoutHTML(string) {
     return string.replace(/<[^>]*>/ig, "");
 }
 
+export function withLeadingAcct(acct, html) {
+    // Insert a bolded acct at the beginning of an HTML string so that it can
+    // be rendered the way Instagram renders post captions
+    return `<strong>${acct}</strong>&nbsp;` + html;
+}
+
 export function pluralize(n, singular, plural) {
     if (n == 1) {
         return singular;