diff --git a/HTMLView.js b/HTMLView.js
index a479c5a..54cf7cc 100644
--- a/HTMLView.js
+++ b/HTMLView.js
@@ -55,8 +55,8 @@ class HtmlView extends PureComponent {
}
componentWillReceiveProps(nextProps) {
- if (this.props.value !== nextProps.value || this.props.stylesheet !== nextProps.stylesheet || this.props.textComponentProps !== nextProps.textComponentProps) {
- this.startHtmlRender(nextProps.value, nextProps.stylesheet, nextProps.textComponentProps);
+ if (this.props.value !== nextProps.value || this.props.stylesheet !== nextProps.stylesheet || this.props.textComponentProps !== nextProps.textComponentProps || this.props.nodeComponentProps !== nextProps.nodeComponentProps) {
+ this.startHtmlRender(nextProps.value, nextProps.stylesheet, nextProps.textComponentProps, nextProps.nodeComponentProps);
}
}
@@ -64,7 +64,7 @@ class HtmlView extends PureComponent {
this.mounted = false;
}
- startHtmlRender(value, style, textComponentProps) {
+ startHtmlRender(value, style, textComponentProps, nodeComponentProps) {
const {
addLineBreaks,
onLinkPress,
@@ -96,6 +96,10 @@ class HtmlView extends PureComponent {
opts.textComponentProps = textComponentProps;
}
+ if (nodeComponentProps) {
+ opts.nodeComponentProps = nodeComponentProps;
+ }
+
htmlToElement(value, opts, (err, element) => {
if (err) {
onError(err);
diff --git a/__tests__/__snapshots__/HTMLView-test.js.snap b/__tests__/__snapshots__/HTMLView-test.js.snap
index e040fdb..58d18bb 100644
--- a/__tests__/__snapshots__/HTMLView-test.js.snap
+++ b/__tests__/__snapshots__/HTMLView-test.js.snap
@@ -9,25 +9,6 @@ exports[` can use a custom node class 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- style={
- Array [
- null,
- null,
- ]
- }
- >
-
-
-
-
can use a custom node class 1`] = `
style={
Array [
null,
- Object {},
+ null,
]
}
>
-
+
can use a custom node class 1`] = `
onLongPress={null}
onPress={null}
selectable={false}
- style={null}
+ style={undefined}
>
can use a custom node class 1`] = `
}
>
-
+
-
-
-
+
+
+
+
+
+
+
+
+
@@ -98,24 +105,6 @@ exports[` can use a custom renderer 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- style={
- Array [
- null,
- null,
- ]
- }
- >
-
-
-
-
can use a custom renderer 1`] = `
style={
Array [
null,
- Object {},
- ]
- }
- >
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[` can use custom node props 1`] = `
-
-
-
-
-
-
-
-
+
can use custom node props 1`] = `
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- selectable={false}
- style={null}
+ style={undefined}
>
can use custom node props 1`] = `
}
>
-
+
+
can use custom node props 1`] = `
style={
Array [
null,
- Object {},
+ null,
]
}
>
@@ -246,7 +171,7 @@ exports[` can use custom node props 1`] = `
`;
-exports[` should handle additional text nodes between list items 1`] = `
+exports[` can use custom node props 1`] = `
@@ -255,9 +180,6 @@ exports[` should handle additional text nodes between list items 1`]
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- onLongPress={null}
- onPress={null}
- style={undefined}
>
should handle additional text nodes between list items 1`]
style={
Array [
null,
- Object {},
+ null,
]
}
>
@@ -281,7 +203,8 @@ exports[` should handle additional text nodes between list items 1`]
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
+ selectable={false}
+ style={undefined}
>
should handle additional text nodes between list items 1`]
]
}
>
- 1.
-
-
- a
+
+
-
-
-
-
-
-
-
-
- 2.
+
+
+
+
should handle additional text nodes between list items 1`]
]
}
>
- b
+
+
-
-
-
-
-
-
`;
-exports[` should not render extra linebreaks if configured not to 1`] = `
+exports[` should handle additional text nodes between list items 1`] = `
@@ -397,40 +276,7 @@ exports[` should not render extra linebreaks if configured not to 1`]
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- style={
- Array [
- null,
- null,
- ]
- }
- >
-
-
-
-
-
-
-
-
should not render extra linebreaks if configured not to 1`]
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
+ style={undefined}
>
should not render extra linebreaks if configured not to 1`]
style={
Array [
null,
- Object {
- "fontSize": 30,
- "fontWeight": "500",
- },
+ Object {},
]
}
>
- Dwayne’s only companion at night was a Labrador retriever named Sparky.
+
+
+
+
+
+ 1.
+
+
+ a
+
+
+
-
-
-
-
-
-
should not render extra linebreaks if configured not to 1`]
}
>
- Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was.
+
should not render extra linebreaks if configured not to 1`]
onLongPress={null}
onPress={null}
style={null}
- />
+ >
+
+ 2.
+
+
+ b
+
+
+
+
should not render extra linebreaks if configured not to 1`]
}
>
- He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill.
-
+
+
+
+`;
+
+exports[` should not render extra linebreaks if configured not to 1`] = `
+
+
should not render extra linebreaks if configured not to 1`]
style={
Array [
null,
- Object {},
+ null,
]
}
>
-
-
-
-
-
-
-`;
-
-exports[` should not render extra linebreaks in list items if configured not to 1`] = `
-
-
should not render extra linebreaks in list items if configu
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
+ style={undefined}
>
should not render extra linebreaks in list items if configu
]
}
>
- •
+
+
+
+
+
+ Dwayne’s only companion at night was a Labrador retriever named Sparky.
+
should not render extra linebreaks in list items if configu
]
}
>
- a
+
+
+
+
+
+ Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was.
+
+
+
+
+ He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill.
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[` should not render extra linebreaks in list items if configured not to 1`] = `
+
+
should not render extra linebreaks in list items if configu
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
+ style={undefined}
>
- •
+
+ •
+
+
+ a
+
- b
+
+ •
+
+
+ b
+
@@ -654,22 +696,29 @@ exports[` should render an with set width/height 1`] = `
-
+
+ />
+
`;
@@ -677,22 +726,29 @@ exports[` should render an , with default width/height of 1
-
+
+ />
+
`;
@@ -705,9 +761,6 @@ exports[` should render an empty element 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- onLongPress={null}
- onPress={null}
- style={undefined}
>
should render an empty element 1`] = `
disabled={false}
ellipsizeMode="tail"
onLongPress={null}
- onPress={[Function]}
- style={null}
+ onPress={null}
+ style={undefined}
>
- &hearts nice job!
+
+ &hearts nice job!
+
@@ -749,30 +812,7 @@ exports[` should render inherited styles correctly 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- onLongPress={null}
- onPress={null}
- style={
- Object {
- "color": "red",
- }
- }
>
-
- RED
-
should render inherited styles correctly 1`] = `
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
+ style={
+ Object {
+ "color": "red",
+ }
+ }
>
should render inherited styles correctly 1`] = `
Array [
null,
Object {
- "color": "blue",
+ "color": "red",
},
]
}
>
- BLUE
+ RED
should render inherited styles correctly 1`] = `
Array [
null,
Object {
- "color": "green",
+ "color": "blue",
},
]
}
>
- GREEN
+ BLUE
+
+
+
+ GREEN
+
@@ -838,9 +908,6 @@ exports[` should render ol numbers 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- onLongPress={null}
- onPress={null}
- style={undefined}
>
should render ol numbers 1`] = `
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
- >
-
- 1.
-
-
- a
-
-
-
-
-
- 2.
+
+ 1.
+
+
+ a
+
+
+
- b
+
+ 2.
+
+
+ b
+
@@ -933,24 +1010,6 @@ exports[` should render shoddy html including headings, links, bold,
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- style={
- Array [
- null,
- null,
- ]
- }
- >
-
-
-
-
should render shoddy html including headings, links, bold,
style={
Array [
null,
- Object {},
+ null,
]
}
>
-
+
should render shoddy html including headings, links, bold,
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
+ style={undefined}
>
should render shoddy html including headings, links, bold,
}
>
-
+
should render shoddy html including headings, links, bold,
style={
Array [
null,
- Object {
- "fontSize": 30,
- "fontWeight": "500",
- },
+ Object {},
]
}
>
- > Dwayne’s only companion at night was a Labrador retriever named Sparky.
+
+
+
+
+
+ > Dwayne’s only companion at night was a Labrador retriever named Sparky.
+
+
+
-
-
-
-
-
-
-
-
should render shoddy html including headings, links, bold,
style={
Array [
null,
- Object {
- "fontStyle": "italic",
- },
+ Object {},
]
}
>
- Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was.
- He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill.
+
should render shoddy html including headings, links, bold,
null,
Object {
"fontStyle": "italic",
- "fontWeight": "500",
},
]
}
>
- The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made.
+ Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was.
+ He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill.
+
+
+ The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made.
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
should render shoddy html including headings, links, bold,
}
>
- [1]
+
should render shoddy html including headings, links, bold,
disabled={false}
ellipsizeMode="tail"
onLongPress={null}
- onPress={[Function]}
+ onPress={null}
style={null}
>
should render shoddy html including headings, links, bold,
style={
Array [
null,
- Object {
- "color": "#007AFF",
- "fontWeight": "500",
- },
+ Object {},
+ ]
+ }
+ >
+
+ [1]
+
+
+
+ https://code.facebook.com/posts/1505962329687926/flow-a-new-...
+
+
+
- https://code.facebook.com/posts/1505962329687926/flow-a-new-...
+
+
+
+
+
should render shoddy html including headings, links, bold,
}
>
-
+
-
-
-
should render shoddy html including headings, links, bold,
}
>
-
+
should render shoddy html including headings, links, bold,
style={
Array [
null,
- Object {},
+ null,
]
}
>
@@ -1236,21 +1335,6 @@ exports[` should render shoddy html including headings, links, bold,
-
-
-
-
`;
@@ -1263,14 +1347,21 @@ exports[` should render text in a (nested) element 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- style={
- Array [
- null,
- null,
- ]
- }
>
- This is some text
+
+ This is some text
+
`;
@@ -1284,9 +1375,6 @@ exports[` should render ul bullets 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- onLongPress={null}
- onPress={null}
- style={undefined}
>
should render ul bullets 1`] = `
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
- >
-
- •
-
-
- a
-
-
-
-
-
- •
+
+ •
+
+
+ a
+
+
+
- b
+
+ •
+
+
+ b
+
diff --git a/example/__tests__/__snapshots__/Example-test.js.snap b/example/__tests__/__snapshots__/Example-test.js.snap
index 24884b8..704dd35 100644
--- a/example/__tests__/__snapshots__/Example-test.js.snap
+++ b/example/__tests__/__snapshots__/Example-test.js.snap
@@ -18,24 +18,6 @@ exports[` should render 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- style={
- Array [
- null,
- null,
- ]
- }
- >
-
-
-
-
should render 1`] = `
style={
Array [
null,
- Object {},
+ null,
]
}
>
-
+
should render 1`] = `
ellipsizeMode="tail"
onLongPress={null}
onPress={null}
- style={null}
+ style={undefined}
>
should render 1`] = `
}
>
-
+
should render 1`] = `
onPress={null}
style={null}
>
+
+
+
+
should render 1`] = `
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
- style={
- Array [
- null,
- Object {
- "fontStyle": "italic",
- "fontWeight": "500",
- },
- ]
- }
+ onLongPress={null}
+ onPress={null}
+ style={null}
>
- > Dwayne’s only companion at night was a Labrador retriever named Sparky.
+
+ > Dwayne’s only companion at night was a Labrador retriever named Sparky.
+
-
-
-
-
-
-
should render 1`] = `
style={
Array [
null,
- Object {
- "fontStyle": "italic",
- },
+ Object {},
]
}
>
- Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was.
- He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill.
+
should render 1`] = `
null,
Object {
"fontStyle": "italic",
- "fontWeight": "500",
},
]
}
>
- The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made.
+ Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was.
+ He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill.
+
+
+ The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made.
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
should render 1`] = `
}
>
- [1]
+
should render 1`] = `
disabled={false}
ellipsizeMode="tail"
onLongPress={null}
- onPress={[Function]}
+ onPress={null}
style={null}
>
should render 1`] = `
style={
Array [
null,
- Object {
- "color": "#007AFF",
- "fontWeight": "500",
- },
+ Object {},
+ ]
+ }
+ >
+
+ [1]
+
+
+
+ https://code.facebook.com/posts/1505962329687926/flow-a-new-...
+
+
+
- https://code.facebook.com/posts/1505962329687926/flow-a-new-...
+
+
+
+
+
should render 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ />
should render 1`] = `
style={
Array [
null,
- Object {
- "fontSize": 36,
- "fontWeight": "500",
- },
+ Object {},
]
}
>
- Dwayne’s only companion at night
+
+
+
-
-
-
-
-
-
-
-
- Dwayne’s only companion at night
+ onLongPress={null}
+ onPress={null}
+ style={null}
+ >
+
+ Dwayne’s only companion at night
+
+
+
-
-
-
-
-
-
-
-
should render 1`] = `
style={
Array [
null,
- Object {
- "fontSize": 24,
- "fontWeight": "500",
- },
+ Object {},
]
}
>
- Dwayne’s only companion at night
+
+
+
+
+
+ Dwayne’s only companion at night
+
+
+
-
-
-
-
-
-
-
-
should render 1`] = `
style={
Array [
null,
- Object {
- "fontSize": 18,
- "fontWeight": "500",
- },
+ Object {},
]
}
>
- Dwayne’s only companion at night
+
+
+
+
+
+ Dwayne’s only companion at night
+
+
+
-
-
-
-
-
-
-
-
should render 1`] = `
style={
Array [
null,
- Object {
- "fontSize": 14,
- "fontWeight": "500",
- },
+ Object {},
]
}
>
- Dwayne’s only companion at night
+
+
+
+
+
+ Dwayne’s only companion at night
+
+
+
+
+
+
+
+
+
+
+ Dwayne’s only companion at night
+
+
+
+
+
+
+
+
+
+
+ Dwayne’s only companion at night
+
-
-
-
-
-
-
-
-
should render 1`] = `
style={
Array [
null,
- Object {
- "fontSize": 12,
- "fontWeight": "500",
- },
+ Object {},
]
}
>
- Dwayne’s only companion at night
+
+ ayyy
+
+
+
+
+ google.com
+
+
should render 1`] = `
}
>
- ayyy
-
-
-
- google.com
-
-
should render 1`] = `
style={
Array [
null,
- Object {},
+ null,
]
}
>
@@ -642,21 +664,6 @@ exports[` should render 1`] = `
-
-
-
-
diff --git a/htmlToElement.js b/htmlToElement.js
index fc9151d..f3b568f 100644
--- a/htmlToElement.js
+++ b/htmlToElement.js
@@ -162,9 +162,18 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) {
});
}
+ function domToElementWrapper(dom) {
+ const [firstNode] = dom;
+ return (
+
+ {domToElement(dom)}
+
+ );
+ }
+
const handler = new htmlparser.DomHandler(function(err, dom) {
if (err) done(err);
- done(null, domToElement(dom));
+ done(null, domToElementWrapper(dom));
});
const parser = new htmlparser.Parser(handler);
parser.write(rawHtml);