{"id":13678402,"url":"https://github.com/Expensify/react-native-live-markdown","last_synced_at":"2025-04-29T13:30:55.831Z","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":"2025-04-23T12:37:38.000Z","size":14812,"stargazers_count":1045,"open_issues_count":73,"forks_count":77,"subscribers_count":42,"default_branch":"main","last_synced_at":"2025-04-23T13:54:16.056Z","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}},"created_at":"2023-11-20T08:24:03.000Z","updated_at":"2025-04-23T09:31:16.000Z","dependencies_parsed_at":"2024-04-19T11:33:11.335Z","dependency_job_id":"e08e4be9-0d5a-441c-8572-3361a9012aaf","html_url":"https://github.com/Expensify/react-native-live-markdown","commit_stats":null,"previous_names":["expensify/react-native-live-markdown"],"tags_count":269,"template":false,"template_full_name":null,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251509425,"owners_count":21600632,"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","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":"2024-08-02T13:00:53.198Z","updated_at":"2025-04-29T13:30:55.819Z","avatar_url":"https://github.com/Expensify.png","language":"TypeScript","funding_links":[],"categories":["Open Source Libraries","TypeScript"],"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-reanimated expensify-common\nnpm install @expensify/react-native-live-markdown react-native-reanimated expensify-common --save\nnpx expo install @expensify/react-native-live-markdown react-native-reanimated expensify-common\n```\n\nReact Native Live Markdown requires [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) 3.17.0 or newer and [expensify-common](https://github.com/Expensify/expensify-common) 2.0.115 or newer.\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\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 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  },\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-reanimated/docs/guides/worklets/) 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. We are working on CommonMark support as well as possibility to use other Markdown parsers.\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| @expensify/react-native-live-markdown | 0.73 | 0.74 | 0.75 | 0.76 | 0.77 | 0.78 | 0.79 |\n| :-----------------------------------: | :--: | :--: | :--: | :--: | :--: | :--: | :--: |\n|               0.1.260+                |  ❌  |  ❌  |  ❌  |  ❌  |  ✅  |  ✅  |  ✅  |\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## 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"}