react-native-wysiwyg v0.0.1

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

To Do

• Convert from Draft.js contentState
• Convert to Draft.js contentState
• Convert from Markdown
• Convert to Markdown
• Bold
• Italic
• Underline
• Strikethrough
• Move line up & down
• Bullets (Unordered List)
• Numbered List (Ordered List)
• Blockquote
• Heading 1
• Heading 2
• 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