Skip to content

Latest commit

 

History

History
90 lines (62 loc) · 1.55 KB

CustomStyles.md

File metadata and controls

90 lines (62 loc) · 1.55 KB

Custom Styles

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

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

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

const styles = StyleSheet.flatten({ // Use .flatten over .create
  'header-one': {
    fontSize: 20,
  },
  paragraph: {
    color: 'pink',
    fontSize: 14,
  },
  link: {
    color: 'blue',
    fontWeight: 'bold',
  },
});

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

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

List of styles available

Text styles

All the elements (except 'code-block') can have inner styles and been customized with:

  • bold

  • italic

  • link

  • underline

  • strikethrough

Elements

Each element have your own style and helper styles to use:

  • blockquote

    • blockquoteContainer
    • blockquoteIconBefore
    • blockquoteIconAfter
  • 'code-block'

  • 'header-one'

  • 'header-two'

  • 'header-three'

  • 'header-four'

  • 'header-five'

  • 'header-six'

  • 'ordered-list-item'

    • orderedListItemContainer
    • orderedListItemNumber
  • paragraph

  • 'unordered-list-item'

    • unorderedListItemContainer
    • unorderedListItemBullet
  • unstyled

  • viewAfterList (View placed after a list to handle styles at the end of each one)