{"id":28816751,"url":"https://github.com/expensify/react-native-live-markdown","last_synced_at":"2026-10-19T13:52:10.363Z","repository":{"id":219914021,"uuid":"721036389","full_name":"Expensify/react-native-live-markdown","owner":"Expensify","description":"Drop-in replacement for React Native's TextInput component with Markdown formatting.","archived":false,"fork":false,"pushed_at":"2026-10-06T19:55:24.000Z","size":15122,"stargazers_count":1336,"open_issues_count":61,"forks_count":116,"subscribers_count":43,"default_branch":"main","last_synced_at":"2026-10-14T16:47:38.660Z","etag":null,"topics":["markdown","react-native","textinput"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@expensify/react-native-live-markdown","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Expensify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":"CLA.md"}},"created_at":"2023-11-20T08:24:03.000Z","updated_at":"2026-10-13T08:47:41.000Z","dependencies_parsed_at":"2024-04-19T11:33:11.335Z","dependency_job_id":"ea5a0c85-ab29-4b77-ba68-a2ef0b1fe856","html_url":"https://github.com/Expensify/react-native-live-markdown","commit_stats":null,"previous_names":["expensify/react-native-live-markdown"],"tags_count":331,"template":false,"template_full_name":null,"purl":"pkg:github/Expensify/react-native-live-markdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-live-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-live-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-live-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-live-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Expensify","download_url":"https://codeload.github.com/Expensify/react-native-live-markdown/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-live-markdown/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38357890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-19T02:00:06.414Z","response_time":53,"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":["markdown","react-native","textinput"],"created_at":"2025-06-18T17:06:47.467Z","updated_at":"2026-10-19T13:52:10.357Z","avatar_url":"https://github.com/Expensify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./assets/hero-animation.gif\" alt=\"@expensify/react-native-live-markdown\" /\u003e\n\n## Features\n\n- ⚛️ Drop-in replacement for `\u003cTextInput\u003e` component\n- ⌨️ Live synchronous formatting on every keystroke\n- ⚡ Fully native experience (selection, spellcheck, autocomplete)\n- 🔧 Customizable logic\n- 🎨 Customizable styles\n- 🌐 Universal support (Android, iOS, web)\n- 🏗️ Supports only the New Architecture\n\n## Installation\n\nFirst, install the library from npm with the package manager of your choice:\n\n```sh\nyarn add @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3\nnpm install @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3 --save\nnpx expo install @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3\n```\n\nReact Native Live Markdown requires [react-native-worklets](https://github.com/software-mansion/react-native-reanimated/tree/main/packages/react-native-worklets) 0.7.0 or newer as well as [expensify-common](https://github.com/Expensify/expensify-common) 2.0.207 or newer and [html-entities](https://github.com/mdevils/html-entities) 2.5.3 exactly if using the default built-in ExpensiMark parser.\n\n\u003e [!IMPORTANT]\n\u003e Please follow the `react-native-worklets` [Getting Started](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/getting-started/#react-native-community-cli) guide to avoid issues.\n\nThen, install the iOS dependencies with CocoaPods:\n\n```sh\ncd ios \u0026\u0026 bundler install \u0026\u0026 bundler exec pod install\n```\n\nThe library includes native code so you will need to re-build the native app.\n\n\u003e [!NOTE]\n\u003e The library does not support Expo Go, you will need to setup Expo Dev Client (see [here](https://docs.expo.dev/workflow/prebuild/)).\n\n## Usage\n\n```tsx\nimport {MarkdownTextInput, parseExpensiMark} from '@expensify/react-native-live-markdown';\nimport React from 'react';\n\nexport default function App() {\n  const [text, setText] = React.useState('Hello, *world*!');\n\n  return (\n    \u003cMarkdownTextInput\n      value={text}\n      onChangeText={setText}\n      parser={parseExpensiMark}\n    /\u003e\n  );\n}\n```\n\nThe built-in `parseExpensiMark` parser accepts an optional maximum input length. It defaults to 4,000 characters and returns no formatting ranges when the input is longer than the configured limit. To use a different limit, wrap the parser in a worklet function:\n\n```ts\nfunction parser(input: string) {\n  'worklet';\n\n  return parseExpensiMark(input, 5000);\n}\n```\n\n## Styling\n\n`MarkdownTextInput` can be styled using `style` prop just like regular `TextInput` component.\n\nIt is also possible to customize the styling of the formatted contents of `MarkdownTextInput` component. The style object supports all color representations from React Native including `PlatformColor` and `DynamicColorIOS` according to the [color reference](https://reactnative.dev/docs/colors). Currently, a limited set of styles is customizable but this is subject to change in the future.\n\n```tsx\nimport type {MarkdownStyle} from '@expensify/react-native-live-markdown';\n\nconst FONT_FAMILY_MONOSPACE = Platform.select({\n  ios: 'Courier',\n  default: 'monospace',\n});\n\nconst FONT_FAMILY_EMOJI = Platform.select({\n  ios: 'System',\n  android: 'Noto Color Emoji',\n  default: 'System, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji',\n});\n\nconst markdownStyle: MarkdownStyle = {\n  syntax: {\n    color: 'gray',\n  },\n  link: {\n    color: 'blue',\n  },\n  h1: {\n    fontSize: 25,\n  },\n  emoji: {\n    fontSize: 20,\n    fontFamily: FONT_FAMILY_EMOJI,\n  },\n  blockquote: {\n    borderColor: 'gray',\n    borderWidth: 6,\n    marginLeft: 6,\n    paddingLeft: 6,\n  },\n  code: {\n    fontFamily: FONT_FAMILY_MONOSPACE,\n    fontSize: 20,\n    color: 'black',\n    backgroundColor: 'lightgray',\n  },\n  pre: {\n    fontFamily: FONT_FAMILY_MONOSPACE,\n    fontSize: 20,\n    color: 'black',\n    backgroundColor: 'lightgray',\n  },\n  mentionHere: {\n    color: 'green',\n    backgroundColor: 'lime',\n  },\n  mentionUser: {\n    color: 'blue',\n    backgroundColor: 'cyan',\n  },\n};\n```\n\nThe style object can be passed to multiple `MarkdownTextInput` components using `markdownStyle` prop:\n\n```tsx\n\u003cMarkdownTextInput\n  value={text}\n  onChangeText={setText}\n  style={styles.input}\n  markdownStyle={markdownStyle}\n/\u003e\n```\n\n\u003e [!TIP]\n\u003e We recommend to store the style object outside of a component body or memoize the style object with `React.useMemo`.\n\n## Parsing logic\n\n`MarkdownTextInput` behavior can be customized via `parser` property. Parser is a function that accepts a plaintext string and returns an array of `MarkdownRange` objects:\n\n```ts\ninterface MarkdownRange {\n  type: MarkdownType;\n  start: number;\n  length: number;\n  depth?: number;\n}\n```\n\nCurrently, only the following types are supported:\n\n```ts\ntype MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';\n```\n\nParser needs to be marked as a [worklet](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/glossary#worklet) because it's executed on the UI thread as the user types.\n\nHere's a sample function that parses all substrings located between two asterisks as bold text:\n\n```ts\nfunction parser(input: string) {\n  'worklet';\n\n  const ranges = [];\n  const regexp = /\\*(.*?)\\*/g;\n  let match;\n  while ((match = regexp.exec(input)) !== null) {\n    ranges.push({start: match.index, length: 1, type: 'syntax'});\n    ranges.push({start: match.index + 1, length: match[1]!.length, type: 'bold'});\n    ranges.push({start: match.index + 1 + match[1]!.length, length: 1, type: 'syntax'});\n  }\n  return ranges;\n}\n```\n\n\u003e [!TIP]\n\u003e We recommend to store the parser function outside of a component body or memoize the parser function with `React.useMemo`.\n\n## Markdown flavors support\n\nCurrently, `react-native-live-markdown` supports only [ExpensiMark](https://github.com/Expensify/expensify-common/blob/main/lib/ExpensiMark.ts) flavor out-of-the-box. You can customize the behavior by passing a custom parser worklet function via the `parser` prop, as detailed in the [Parsing logic](#parsing-logic) section.\n\n## API reference\n\n`MarkdownTextInput` inherits all props of React Native's `TextInput` component as well as introduces the following properties:\n\n| Prop            | Type                                 | Default     | Note                                                                                                                                                                                                                   |\n|-----------------|--------------------------------------|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `parser`        | `(value: string) =\u003e MarkdownRange[]` | `undefined` | A function that parses the current value and returns an array of ranges.                                                                                                                                               |\n| `markdownStyle` | `MarkdownStyle`                      | `undefined` | Adds custom styling to Markdown text. The provided value is merged with default style object. See [Styling](https://github.com/expensify/react-native-live-markdown/blob/main/README.md#styling) for more information. |\n\n## Compatibility\n\n`react-native-live-markdown` supports only latest React Native minor releases with the New Architecture enabled.\n\n### React Native compatibility\n\n|                   | 0.73 | 0.74 | 0.75 | 0.76 | 0.77 | 0.78 | 0.79 | 0.80 | 0.81 | 0.82 | 0.83 | 0.84 | 0.85 | 0.86 |\n|:-----------------:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|\n|     0.1.331+      |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |\n| 0.1.321 – 0.1.330 |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |  ❌   |\n| 0.1.304 - 0.1.320 |  ❌   |  ❌   |  ❌   |  ❌   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.297 – 0.1.303 |  ❌   |  ❌   |  ❌   |  ❌   |  ✅   |  ✅   |  ✅   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.260 – 0.1.296 |  ❌   |  ❌   |  ❌   |  ❌   |  ✅   |  ✅   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.256 – 0.1.259 |  ❌   |  ❌   |  ❌   |  ❌   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.248 – 0.1.255 |  ❌   |  ❌   |  ❌   |  ✅   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.235 – 0.1.247 |  ❌   |  ❌   |  ✅   |  ✅   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.141 – 0.1.234 |  ❌   |  ❌   |  ✅   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.129 – 0.1.140 |  ❌   |  ❌   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.122 – 0.1.128 |  ❌   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n| 0.1.15 – 0.1.121  |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |\n\n\n### `react-native-worklets` compatibility\n\n|                   | 0.6.x | 0.7.x | 0.8.x | 0.9.x | 0.10.2 – 0.11.x | 0.12.x | 0.13.x |\n|:-----------------:|:-----:|:-----:|:-----:|:-----:|:---------------:|:------:|:------:|\n|     0.1.343+      |   ❌   |   ✅   |   ✅   |   ✅   |        ✅        |   ✅    |   ✅    |\n| 0.1.333 – 0.1.342 |   ❌   |   ✅   |   ✅   |   ✅   |        ✅        |   ❌    |   ❌    |\n| 0.1.321 – 0.1.332 |   ❌   |   ✅   |   ✅   |   ✅   |        ❌        |   ❌    |   ❌    |\n| 0.1.308 – 0.1.320 |   ✅   |   ❌   |   ❌   |   ❌   |        ❌        |   ❌    |   ❌    |\n\n\n## License\n\nMIT\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"./assets/signature-light.png\" /\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./assets/signature-dark.png\" /\u003e\n    \u003cimg alt=\"Brought to you by Software Mansion + Expensify\" src=\"./assets/signature-light.png\" width=\"600\" /\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpensify%2Freact-native-live-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexpensify%2Freact-native-live-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpensify%2Freact-native-live-markdown/lists"}