React Native WYSIWYG

React Native Rich text editor for iOS & Android

Supports Draft.js (markdown support coming soon)

Can be used with Expo

Demo

View on Expo Snack

Installation

yarn add react-native-wysiwyg

this library also required react-native-keyboard-aware-view to be installed

Usage

import { Editor, Toolbar, convertToRaw } from "react-native-wysiwyg";
import { KeyboardAwareView } from "react-native-keyboard-aware-view"

<KeyboardAwareView keyboardShouldPersistTaps animated>
  <Editor data={data} onChange={(data) => { console.log(data) }} />
  <Toolbar />
</KeyboardAwareView>

data is either Draft.js contentState

Pass data to editor

const data = convertToRaw(draftjsData)

Catch editor state change event

  onChange = (data) => {
    console.log(data)
  }

Props

| Name | Type | Default | Desc | ------------- | ------------- | -----| ----- | | data | string | - | Editor State | | onChange | function | - | Callback for on editor state change | | onFocus | function({ index, contentState }) | - | Callback for on onFocus | | onBlur | function({ index, contentState }) | - | Callback for on onBlur |

To Do

• [x] Convert from Draft.js contentState
• [x] Convert to Draft.js contentState
• [ ] Convert from Markdown
• [ ] Convert to Markdown
• [x] Bold
• [x] Italic
• [x] Underline
• [x] Strikethrough
• [x] Move line up & down
• [x] Bullets (Unordered List)
• [x] Numbered List (Ordered List)
• [x] Blockquote
• [x] Heading 1
• [x] Heading 2
• [x] Heading 3
• [ ] Font colors
• [ ] Links
• [ ] Code
• [ ] Tables
• [ ] images
• [ ] Line Breaks
• [ ] Change tab intends
• [ ] Justify text position
• [ ] Custom default styles

Credits

Many thanks to awesome plugin react-native-keyboard-aware-view from @APSL

Inspired by Notion mobile app

Contribution

Contribution are more than welcomed