Heading 2

Heading 3

Heading 4

Paragraph with bold, italic, underline,
strikethrough,
and all of the above

Paragraph with image and
link

• Unordered item


• Unordered item

1. Ordered item


2. Ordered item

function myCode() {
  const foo = 'bar';
}

return (


{html}


);
`

Rendering React Components

`tsx
import ReactDOMServer from 'react-dom/server';

const element = (





Heading 1

return (


{html}


);
`

Props

`ts
type HtmlProps = {
children: string; // the HTML
collapse?: boolean; // Default: true. Collapse whitespace. If false, render newlines as breaks
renderers?: HtmlRenderers; // Mapping of { tagName: HtmlRenderer }
style?: Style | Style[]; // Html root View style
stylesheet?: HtmlStyles | HtmlStyles[]; // Mapping of { selector: Style }
resetStyles?: false; // If true, style/CSS reset
};
`

Overriding Element Styles

$3

`tsx
const stylesheet = {
// clear margins for all

tags
p: {
margin: 0,
},
// add pink background color to elements with class="special"
['.special']: {
backgroundColor: 'pink',
},
};

return (


{html}


);
`

$3

`tsx
const html =

return (


{html}


);
`

Resetting Styles

Reset browser default styles (see CSS reset)

`tsx
return (


{html}


);
`

Font Sizes

The default styesheet roughly matches browser defaults, using a rough emulation of ems:

`tsx
const em = (em: number, relativeSize: number = fontSize) => em * relativeSize;

StyleSheet.create({
h1: {
fontSize: em(2),
marginVertical: em(0.67, em(2)),
fontWeight: 'bold',
},
...
});
`

By default, the basis for the font size ems is based on the fontSize from props.style:

`tsx
return (


{html}


);
`

If this is not defined, it falls back to a default of 18`