Getting-Started.md

React Native Rich Editor Getting Started Guide

This guide will help you get started quickly.

1. Add @ziqch/react-native-rich-editor to your dependencies

$ yarn add @ziqch/react-native-rich-editor

(or)

For npm use

$ npm install --save @ziqch/react-native-rich-editor

2. Import the ReactNativeRichEditor into your component

import { ReactNativeRichEditor } from '@ziqch/react-native-rich-editor';

// ...
const MyComponent = () => {
  return (
    <ReactNativeRichEditor
      height={height}
      width={width}
      defaultValue={[
        { insert: 'Hello ' },
        { insert: 'World!', attributes: { bold: true } },
        { insert: '\n' },
      ]}
    >
    </ReactNativeRichEditor>
  );
};

You can use our default toolbar and preset formats.

import { Format, ReactNativeRichEditor } from '@ziqch/react-native-rich-editor';

// ...
const MyComponent = () => {
  const renderIcon = (isActive: boolean, isDisabled: boolean) => {
    //...
    return <YourIcon />;
  }
  return (
    <ReactNativeRichEditor
      // ...
    >
      <RichEditorToolBar
        tools={[
          <Format.Basic format={'bold'} icon={renderIcon} />,
        ]}
      />
    </ReactNativeRichEditor>
  );
};

Next, check out the Basic Guide or API Reference. If you want to learn more about customization, please go to Advanced Guide.