{"id":4418,"url":"https://github.com/siuying/react-native-htmltext","last_synced_at":"2025-08-04T01:32:23.205Z","repository":{"id":29587189,"uuid":"33127082","full_name":"siuying/react-native-htmltext","owner":"siuying","description":"Use HTML like markup to create stylized text in ReactNative.","archived":true,"fork":false,"pushed_at":"2017-08-08T04:32:06.000Z","size":304,"stargazers_count":138,"open_issues_count":7,"forks_count":42,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-06T03:12:33.420Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siuying.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-30T14:13:15.000Z","updated_at":"2024-06-17T13:17:28.000Z","dependencies_parsed_at":"2022-09-13T02:22:17.265Z","dependency_job_id":null,"html_url":"https://github.com/siuying/react-native-htmltext","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siuying/react-native-htmltext","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siuying%2Freact-native-htmltext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siuying%2Freact-native-htmltext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siuying%2Freact-native-htmltext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siuying%2Freact-native-htmltext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siuying","download_url":"https://codeload.github.com/siuying/react-native-htmltext/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siuying%2Freact-native-htmltext/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636351,"owners_count":24282077,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:11.303Z","updated_at":"2025-08-04T01:32:22.943Z","avatar_url":"https://github.com/siuying.png","language":"JavaScript","readme":"# react-native-htmltext\n\nWIP: Experiment to use HTML like markup to create stylized text in react-native.\n\n## Why?\n\nReact Native provide a Text element for stylized text. Instead of using ``NSAttributedString``, \nyou creat nested Text:\n\n```\n\u003cText style={{fontWeight: 'bold'}}\u003e\n  I am bold \n  \u003cText style={{color: 'red'}}\u003e and red \u003c/Text\u003e\n\u003c/Text\u003e\n```\n\nWhile this approach is excellent for static interface text, what if we have dynamic text with format we \ndo not know until we use it? ``HtmlText`` is a component to present a limited subset of HTML as\nReact Native views.\n\n**Important**: This is not going to replace your ``WebView`` for HTML rendering, instead it use a\nlimited subset of HTML and try to present it using native ``Text`` elements in a reasonable way.\n\n## Example \n\n### Input\n\n```javascript\nrender: function() {\n  var html = `\u003cp\u003eHello world \u003cb\u003eworld\u003c/b\u003e \u003ci\u003efoo\u003c/i\u003e bar hahh\u003c/p\u003e`\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cHtmlText style={styles.welcome} html={html}\u003e\u003c/HtmlText\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\u003cimg src=\"https://raw.githubusercontent.com/siuying/react-native-htmltext/master/example1.png\" /\u003e\n\n### Input \n\n```javascript\nrender: function() {\n  var html = `\u003cblockquote\u003e\u003cp\u003eHello world \u003cb\u003eworld\u003c/b\u003e \u003ci\u003efoo\u003c/i\u003e \u003cblockquote\u003ebar hahh\u003c/blockquote\u003e\u003c/p\u003e\u003c/blockquote\u003e`\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cHtmlText style={styles.welcome} html={html}\u003e\u003c/HtmlText\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n\n\u003cimg src=\"https://raw.githubusercontent.com/siuying/react-native-htmltext/master/example2.png\" /\u003e","funding_links":[],"categories":["Components"],"sub_categories":["Text \u0026 Rich Content"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiuying%2Freact-native-htmltext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiuying%2Freact-native-htmltext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiuying%2Freact-native-htmltext/lists"}