react-native-rich-text

Rich text editor for React Native projects. Based on Quill.js

Not yet suggested for use in production apps. If you would like to help, try your hand at some of the issues with the label Release Roadmap

Instalation

npm install --save react-native-rich-text
// or
yarn add react-native-rich-text

Important

You must make sure the .html files will be bundled with the app. For this, add the following fields to your app.json:

{
  "expo": {
    "assetBundlePatterns": ["node_modules/react-native-rich-text/assets/*"],
    "packagerOpts": {
      "assetExts": ["html"]
    }
  }
}

Usage

import RichText from 'react-native-rich-text';

...
render() {
  return (
    <RichText value={text}>
          <RichText.Toolbar>
            <RichText.Toolbar.BOLD />
            <RichText.Toolbar.ITALIC />
            <RichText.Toolbar.H1 />
            <RichText.Toolbar.UL />
            <RichText.Toolbar.OL />
            <RichText.Toolbar.CODE />
            <RichText.Toolbar.IMAGE />
            <RichText.Toolbar.Custom
              callback={() => {
                this.setState(p => ({ ...p, toggle: !p.toggle }));
                return { reload: true };
              }}
            >
              <Text>Toggle</Text>
            </RichText.Toolbar.Custom>
          </RichText.Toolbar>
          <RichText.Editor onChangeText={text => changeText(text)} />
        </RichText>
  )
}

API

RichText

Component that encapsules the Editor and/or Viewer. This component is necessary, and the others don't work if they aren't children of it.

Props

Name	Type	Default	Description
value	string	''	Content for the editor. Should be in Quill format.

RichText.Toolbar

Common format for a Toolbar. It isn't necessary, and the buttons can be used inside any other component.

Props

Name	Type	Default	Description
style	object	`{ width: '100%', padding: 10, flexDirection: 'row', backgroundColor: 'white', ...Platform.select({ ios: { shadowColor: 'rgba(0,0,0,0.5)', shadowOffset: { width: 0, height: 1 }, shadowRadius: 2, shadowOpacity: 1 }, android: { elevation: 6, }})}`	Style to use for the `View` containing the toolbar buttons
imageStyles	object		Style to use for the `Image` of the toolbar buttons

RichText.Toolbar.*

Buttons for the toolbar. Some common usages are available: BOLD, ITALIC, H1, UL, OL, CODE and IMAGE. For other uses, Custom can be used if there is a need to refresh the editor, or to change the text format in the editor. To see the available formats, check the Quill documentation.

Props

Name	Type	Default	Description
callback	function	`undefined`	Function to be executed when the button is pressed. If the editor should be reloaded when the callback is executed, it should return an object on the format of { reload: true }
format	string	`undefined`	Format the text should take on after the button is pressed. Only available on `Custom` buttons
source	`ImageSourcePropType`	Depends on the type. Every kind has a default button, except for `Custom`	Source of the image to use as source for the toolbar button

RichText.Editor

View where the text is edited. Actually is a WebView with a Quill editor.

Props

Name	Type	Default	Description
onChangeText	Function	() => {}	Function called when the user edits the content, with a single parameter being the content of the editor, in the Quill format.
style	object	`{ zIndex: -1 }`	Style to use for the `View` containing the `WebView`

RichText.Viewer

Used to display the text, since it isn't possible with <Text>s. Actually a WebView with a Quill viewer.

Props

Name	Type	Default	Description
scrollEnabled	boolean	true	If the text is bigger than the screen, defines if it should be possible to scroll through it
onClick	Function		Function to call when the `Viewer` is clicked

ammarahm-ed / react-native-rich-text Goto Github PK