Build Status Coverage Status npm version license
A React Native render for Draft.js model.
Join the #react-native-render channel on DraftJS Slack team.
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-renderJust 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.
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.
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