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);
All the elements (except 'code-block'
) can have inner styles and been customized with:
-
bold
-
italic
-
link
-
underline
-
strikethrough
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)