react-native-live-markdown

Drop-in replacement for React Native's TextInput component with Markdown fo...

MarkdownReact Native
Expensify/react-native-live-markdown@expensify/react-native-live-markdown

README

react-native-live-markdown


Features


- ⚛️ Drop-in replacement for `` component
- ⌨️ Live synchronous formatting on every keystroke
- ⚡ Fully native experience (selection, spellcheck, autocomplete)
- 🎨 Customizable styles
- 🌐 Universal support (Android, iOS, web)
- 🏗️ Supports New Architecture

Installation


First, install the library from npm with the package manager of your choice:

  1. ```sh
  2. yarn add @expensify/react-native-live-markdown
  3. npm install @expensify/react-native-live-markdown --save
  4. npx expo install @expensify/react-native-live-markdown
  5. ```

Then, install the iOS dependencies with CocoaPods:

  1. ```sh
  2. cd ios && pod install
  3. ```

The library includes native code so you will need to re-build the native app.

[!NOTE]

The library does not support Expo Go, you will need to setup Expo Dev Client (see here).


Usage


  1. ```tsx
  2. import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
  3. import React from 'react';

  5. export default function App() {
  6. const [text, setText] = React.useState('Hello, *world*!');

  8. return (
  9. <MarkdownTextInput
  10. value={text}
  11. onChangeText={setText}
  12. />
  13. );
  14. }
  15. ```

Styling


MarkdownTextInput can be styled using style prop just like regular TextInput component.

It 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. Currently, a limited set of styles is customizable but this is subject to change in the future.

  1. ```tsx
  2. import type {MarkdownStyle} from '@expensify/react-native-live-markdown';

  4. const markdownStyle: MarkdownStyle = {
  5. syntax: {
  6. color: 'gray',
  7. },
  8. link: {
  9. color: 'blue',
  10. },
  11. h1: {
  12. fontSize: 25,
  13. },
  14. blockquote: {
  15. borderColor: 'gray',
  16. borderWidth: 6,
  17. marginLeft: 6,
  18. paddingLeft: 6,
  19. },
  20. code: {
  21. fontFamily: 'monospace',
  22. color: 'black',
  23. backgroundColor: 'lightgray',
  24. },
  25. pre: {
  26. fontFamily: 'monospace',
  27. color: 'black',
  28. backgroundColor: 'lightgray',
  29. },
  30. mentionHere: {
  31. color: 'green',
  32. backgroundColor: 'lime',
  33. },
  34. mentionUser: {
  35. color: 'blue',
  36. backgroundColor: 'cyan',
  37. },
  38. };
  39. ```

The style object can be passed to multiple MarkdownTextInput components using markdownStyle prop:

  1. ```tsx
  2. <MarkdownTextInput
  3. value={text}
  4. onChangeText={setText}
  5. style={styles.input}
  6. markdownStyle={markdownStyle}
  7. />
  8. ```

[!TIP]

We recommend to store the style object outside of a component body or memoize the style object with React.useMemo.


Markdown flavors support


Currently, react-native-live-markdown supports only ExpensiMark flavor. We are working on CommonMark support as well as possibility to use other Markdown parsers.

API reference


MarkdownTextInput inherits all props of React Native's TextInput component as well as introduces the following properties:

PropTypeDefaultNote
------------
`markdownStyle``MarkdownStyle``undefined`Adds

Compatibility


react-native-live-markdown requires React Native 0.71 or newer.

License


MIT