React Native Draft.js Render

A React Native render for Draft.js model.

Discussion and Support

Join the #react-native-render channel on DraftJS Slack team.

Documentation

• Get Started
• Add Custom Styles
• Handle Atomic Types

Getting Started

Install React Native Draft.js Render on your React Native project, using NPM or Yarn:

yarn add react-native-draftjs-render
# or...
npm i -S react-native-draftjs-render

Using

Just import and insert your Draft.js model on getRNDraftJSBlocks:

import React from 'react';
import {
  ScrollView,
  AppRegistry,
} from 'react-native';

import getRNDraftJSBlocks from 'react-native-draftjs-render';
import contentState from 'DraftJs/contentState';

const MyApp = () => {
  const blocks = getRNDraftJSBlocks({ contentState });
  return (
    <ScrollView style={{ flex: 1 }}>{blocks}</ScrollView>
  );
};

AppRegistry.registerComponent('MyApp', () => MyApp);

See our sample folder for more details.

Adding custom styles

RNDraftJSRender comes with default styles, but you can use your own:

import React from 'react';
import {
  AppRegistry,
  ScrollView,
  StyleSheet,
} from 'react-native';

import getRNDraftJSBlocks from 'react-native-draftjs-render';
import contentState from 'DraftJs/contentState';

const styles = StyleSheet.flatten({
  paragraph: {
    color: 'pink',
    fontSize: 18,
  },
  link: {
    color: 'blue',
    fontWeight: 'bold',
  },
});

const MyApp = () => {
  const blocks = getRNDraftJSBlocks({ contentState, customStyles: styles });
  return (
    <ScrollView style={{ flex: 1 }}>{blocks}</ScrollView>
  );
};

AppRegistry.registerComponent('MyApp', () => MyApp);

See more at Custom Styles documentation.

Contributing

To develop using example react-native project:

git clone git@github.com:globocom/react-native-draftjs-render.git
cd react-native-draftjs-render/
make setup

To run tests:

make test

To watch lib changes appearing on Sample App:

make watch

To run sample app in iOS:

make ios

To run sample app in Android:

make android