6.3.4 (2022-01-24)
6.3.3 (2022-01-11)
6.3.2 (2022-01-11)
6.3.1 (2021-12-03)
- bold style not applied to
<b>tags (7bd5045), closes #539 - wrong prop reference in warning message (e03b0ac), closes #541
6.3.0 (2021-11-03)
- pass
TNodeChildrenRendereras a prop to custom renderers (9dd2bf1)
6.2.0 (2021-10-23)
This release is focused on accessibility! Moreover, it empowers model-based custom rendering which can now define props passed to Text and View elements of renderers.
- inaccurate typing for HTMLElementModelRecord (bd5dfa6)
- pass
borderlessprop to customGenericPressable(f06af7a) - never assume the definition of
__DEV__in the global scope (f9bb9e9) - a11y: anchors should not be set with a11y role "link" when empty href (dd988fc)
- a11y: anchors are not accessible anymore when
hrefis empty or absent (4e1f2f4)
- new
getNativePropsForTnodeutil method (d983d0d) - css: support
user-selectCSS property (8442b2f) - a11y: support
aria-labelandaria-roleHTML attributes (2b27f00) - a11y: add accessibilityRole="header" to headings elements (h1...h6) (1c79bc3)
- new
reactNativePropsandgetReactNativePropsinHTMLElementModel, this little change gives model-based custom rendering considerably more leverage. (4ee1646) - deprecate
getUADerivedStyleFromAttributesin favor ofgetMixedUAStylesinHTMLElementModel, which allows access to the underlyingTNodeand again empowers model-based custom rendering. - a11y: whatwg-compliant accessibility for images (7fc2907)
- a11y: custom renderers passed
onPressprop now have a11y roles (11723f0) - a11y: support aria-role="search" and aria-role="presentation" attributes (c552fe4)
- allow
HTMLElementModel.extendto take a merge function (9b3a007) - support
onPressfrom element models native props (7dc5577)
6.1.0 (2021-08-29)
- add new
renderIndexandrenderLengthprops toTDefaultRendererProps(4f032d3) - new
enableExperimentalBRCollapsingprop to prevent extraneous spaces (e019a5a), closes #516, see official documentation - new
enableExperimentalGhostLinesPreventionto circumvent RN bug (3645211), see official documentation - new
provideEmbeddedHeadersprop to pass headers to img, iframes and other embedded in the future (2ea1ca6) - new
bypassAnonymousTPhrasingNodesprop (90b8a3d), closes #514
- prevent list markers from overflowing in a new line (f2238aa)
6.0.5 (2021-07-31)
6.0.4 (2021-07-19)
- npm v7 peer dependencies on @native-html/* (3d50b0e)
6.0.3 (2021-07-19)
6.0.2 (2021-07-18)
No changes visible to consumers of this library.
6.0.1 (2021-07-17)
No changes visible to consumers of this library.
6.0.0 (2021-07-17)
The Foundry release is finally stable, and is now-on the recommended version. Check out the announcement blog post in our brand new website. We also have a migration guide for those who're coming from v5 and below.
This changelog highlights changes from v5. There are no changes since version 6.0.0-beta.8
GenericPressableprop to customize the component wrapping interactive views (707374a), closes #472pressableHightlightColorprop to customize pressable appearance (e5dfa1e)- access
sharedPropsfrom custom renderers (0d2199e) - accessibility for images with role and label (1accaf7)
- add
react-nativefield in package.json for metro (10dfc82) - allow module augmentation for renderers prop via
RenderersProps(97dabc1) - configure
enableExperimentalRtlinrenderersProps.ol|ul(96daa5e) - configure
getFallbackListStyleTypeFromNestLevelinrenderersProps.ol|ul(1377ef7) - configure margins removal for nested lists in
renderersProps.ol|ul(316e706) - experimental
dangerouslyDisableHoistingprop (e6c7328) - export
defaultListStyleSpecsfor customization. (2f9ed01) - export
defaultSystemFontsanddefaultFallbackFonts(0c4207c) - export
buildTREFromConfigfor testing (c13e1a7) - new
propsFromParentin custom renderers and children renderers (3bc1b52), closes #228 - new
renderersProps.(ol|ul).enableDynamicMarkerBoxWidthprop (f87b9f6) - new
selectDomRootprop to select a custom root (31bbff7) - new
setMarkersForTNodeprop (63caa4d) - new
useIMGElementStateWithCachehook for images (54dc1bc) - new prop
customListStyleSpecsto support additionallist-style-type(84ec025) - new source type
RenderHTMLSourceDomto render a DOM object (eeec894) - performant multi-instance HTML rendering with
RenderHTMLSource(4e4cd09) - reexport
CustomElementModeltype from TRE (c5a01f0) - reexport
HTMLModelRecordfrom TRE (a9c9cf3) - reexport
isDomNodeand isDomText from TRE (cedcf7a) - reexport
SetMarkersForTNodefrom TRE (eaa3928) - reexport
TNodeDescriptorfrom TRE (157983c) - reexport
TNodePrintOptionstype from TRE (6f3265c) - support
"object-fit"CSS property for images (24f72b0) - support
"start"attribute in ol and ul elements (b9d3154), closes #336 - support
"upper-latin"and"lower-lattin"list-style-type CSS props (a0da60d) - support
enableRemove*MarginIfNestedfor list renderers (e0fe7c6) - support
nodeIndexandparentfields inTNode(fe2504c) - support accessibility for
aelements (6974ce6), closes #285 - support
decimal-leading-zerolist style type prefix (526e226) - support default system fonts for Windows, Macos and web (4474dff)
- support
disclosure-*list style type prefixes (218982d) - support experimental RTL mode for ol and ul elements (ca139c1)
- support
lower-greeklist style type prefixes (3aac2c8) - support
lower-latinand upper-latin list prefix styles (4d4805c) - ts: new generic argument for renderers
propsFromParentprop (6427732) - add
defaultViewPropsprop (ce49232) - add
targetargument toonLinkPresshandler (139b0c3) - add
getListStyleTypeFromNestLevelprop toHTMLListElement(5ae3e6a) - add new
splitBoxModelStyleutility (b1adcbc) enableExperimentalMarginCollapsingprop (ae6c553)- export
useSharedProps(f1d7b16) - expose internal renderers building blocks for extensibility (213fcd7), closes #424
fallbackFontsandsystemFontsprops for font selection (6888a96)- implement
defaultTextPropsprop (c297ed1) - implement
useInternalRendererhook to reuse internal rendering logic (8c292da) - implement
computeEmbeddedMaxWidthprop as per RFC001@2.0.0 (6c9d70f) - implement
RenderHTMLDebugwrapper component to warn users (22625b4) - new
cachedNaturalDimensionsprop touseIMGelementStatehook (ed976bb) - new
onDocumentMetadataLoadedprop (9f55907) - new
TRenderEngineProviderandRenderHTMLFragmentcomponents (7d50e72) - new
extendInternalRendererutility (d7bb1da) - new prop
onTTreeChange(5ecdcab) - new
renderChildprop toTChildrenRenderer(db78c54) - new renderers API (2547cba)
onHTMLLoadedprop (981b49b)- port
alterData,alterChildrenandalterNode(18dc001) - reeport useful types from css-processor (9b5e301)
- reeport useful variables and types from transient-render-engine (0c0a9c6)
- reuse 'img' renderer internal logic w/t
useIMGElementStatehook (399eb54), closes #424 - support
htmlParserOptionsprop (624c57e) - support
sourceprop, identical to react-native-webview (3a16487) - support a minimal table renderer (7f64d48)
- support for loading HTML from URI (6c07b8d)
- support relative URLs and document metadata (f2cbcfc)
- support
source.headersinuseIMGElementStatehook (a49e958) triggerTREInvalidationPropNamesprop (89ee25c)useRendererPropshook (87982c4)- warn user of API misusage even when
debugis set to false (cb5b42b) - new
renderersProps.(ol|ul).markerTextStyleprop (6ca54e9) - support
renderersProps.(ol|ul).markerBoxStyleprop (c929643) - new dev profiler to get feedback on short updates (98fd749)
- use aspectRatio style to infer one dimension of images sizes (e018b30)
- export
collapseTopMarginForChildutility (199be12)
- avoid calls to getImageDimensions API when provided in attrs (4f3d51d)
- bypass anonymous TPhrasing nodes with one child or less (dad450d)
- drop
alter*props in favor ofdomVisitors(ffb1f58) - increase transient parsing speed by 30% after upgrade to v6.2.1 (df91a21)
- limit rerenderings via memoization (6512e18)
- memoize
TDocumentRendererto prevent rendering from ascendents (2ec060b) - replace
ignoreDOMNodewithignoreDomNode(9ec6403) - replace
ignoredTagswithignoredDomTags(b60d6eb)
- loading image component doesn't display alt and borders anymore (1351ee5)
- discard unsupported CSS inline methods (calc, var) (a2e7578)
- images honor styles and physical size in "alt" (error) mode (059e5d6)
- in
<img>tags, style dimensions should prevail over attributes (de3b473) - list style prefixes now inherit from font*(weight,style,family) (191c45c)
- don't peer-depend on prop-types, instead depend directly (27e843e)
And all these unlisted in commits: #94, #118, #144, #150, #151, #156, #165, #227, #228, #243, #263, #286, #312, #336, #344, #360, #369, #371 #414, #418, #419, #420, #424, #429, #432, #470, #481, #482, #484
Those are breaking changes from v5. Consumers of the beta will not encounter breaking changes.
ignoredTagshas been replaced withignoredDomTagsfor naming consistency.alterNode,alterDataandalterChildrenhave been dropped in favor ofdomVisitors. The latter is an object with 3 optional callbacks,onElement,onDocumentandonTextwhich you can use to intercept and tamper nodes during parsing. Take advantage of domutils library to delete, insert and manipulate those nodes.ignoreNodesFunctionis nowignoreDomNodefor naming consistency.enableExperimentalPercentWidthhas been discontinued. UserenderersProps.img.enableExperimentalPercentWidthinstead.onLinkPressprop has been discontinued. UserenderersProps.a.onPressinstead.imagesInitialDimensionshas been moved torenderersProps.img.initialDimensionslistsPrefixesRenderersprop has been discontinued. UsecustomListStyleSpecsinstead.- dropped
ptSizeprop. Point is supposed to be an absolute (pixel independent) size and unfit for display devices. It will be translated by the CSS processor to an absolute unit. containerStyleandcustomContainerprops have been dropped. UsebaseStyleprop instead to style the root component.- drop
textSelectableandallowFontScaling. UsedefaultTextProps.selectableanddefaultTextProps.allowFontScalinginstead. uriandhtmlprops have been dropped. Replaceuriwithsource={{ uri: 'http://...' }}andhtmlwithsource={{ html: '<div> ...' }}. The former now allowsbody,headersandmethodfields.decodeEntitiesprop has been dropped. Pass this option tohtmlParserOptionsprop instead.computeImagesMaxWidthhas been replaced withcomputeEmbeddedMaxWidth. The two props are very similar, but the latest takes an extra argument, "tagName", which is the tag for which a width constrain should be enforced. It is planned to work with the @native-html/iframe-plugin extension.
- wrong
nodeIndexfor children ofulandoltags alterChildrenfunction return type
- prop
source.urifailing to cause HTML to load
allowWhitespaceNodesprop to avoid removal of whitespace-filled text nodes- re-renders on
baseFontStyleupdates (port from dev/4.x branch)
- Accurate typescript typings for
onParsed,alterData,alterChildren(thanks @SPWizard01)
- New
sourceprop which deprecateshtmlanduriprops. This prop supportsmethod,bodyandheadersfields 🚀 - Brand new
HTMLImagecomponent which should be much better at adapting its size to available width. For this to happen, you must passcontentWidthprop. We recommend usinguseWindowDimensions().widthto handle screen rotation gracefully. If you don't want your images to grow after a certain size, you could usecomputeEmbeddedMaxWidth. Read the RFC document “A Deterministic Approach to Embedded Content Scaling” for more details. - New prop
computeEmbeddedMaxWidth(see usage above). - New prop
contentWidth(see usage above). - New prop
htmlParserOptionsto override htmlparser2 ParserOptions object, thanks @fabianlee1211. onLinkPresshas now a default value: open links withLinkingAPI (recommended).- Add Podspec file, thanks @systemride
- New
WebViewoptional prop for plugins which requires it, see @native-html/plugins, thanks @IjzerenHein - New
defaultTextProps, thanks @Peretz30 - New
defaultWebViewPropsforWebView-based plugins (tables, iframes...). - Export
constructStyles,getParentsTagsRecursively,getClosestNodeParentByTagandIGNORED_TAGSfrom index.js. - New
domNodefield inpassProps. - New
domNodeToHTMLStringutil to get the HTML representation of a DOM node. - The internal pre-render tree structure is now typed (
TransientNode) as well asonParsed.
- Image getting blur on iOS, #141;
img's tagresizeModeproperty not modifiable throughtagStyles, #172;imagesMaxWidthnot working, #412
allowFontScaling, usedefaultTextProps.allowFontScalinginstead;textSelectable, usedefaultTextProps.selectableinstead;decodeEntities, usehtmlParserOptions.decodeEntitiesinstead.html, usesource.htmlinstead.uri, usesource.uriinstead.
- (TypeScript users), requires minimum TypeScript version 3.5 (was 2.0)
iframetag element is not rendered anymore, andreact-native-webviewhas been removed from peer dependencies; use@native-html/iframe-plugininstead, which supportsonLinkPressand scales to content width 🚀.imagesMaxWidthandstaticContentMaxWidthhave been discontinued in favor ofcomputeEmbeddedMaxWidth. This function takes the providedcontentWidthas 1st argument, tag name as 2d argument and returns the max width of the embedded (iframe, image...).- In the
passProps4th argument of renderer functions, the fieldrawChildrenhas been renamed totransientChildren.
- re-render
HTMLcomponent onbaseFontStyleupdates
srcattributes starting with "//" inimgandiframeelements are not rendered (#408)
- Rendered HTML with uri prop displays “undefined” (#256)
- Custom wrapper ignored (#276), thanks @tomdaniel-it
HTML: use a proxy methodsetStateSafeto avoid updating while unmounted.
- Translated elements bloated with HTML component props (#384, #383)
- Unable to resolve stream module (#244)
textSelectablenot working for tagNametextwrapper(#193), thanks @brsaylor2- CSS font-family values ignored because of false positive match (#266)
- CSS text-align unrecognized value (#252)
- CSS inline rules with "none" values (#319)
- CSS restrict display attribute to flex and none (#257)
- Typos in IGNORED_TAGS arrays (#249, #272)
- Re-render after classesStyles and tagsStyles updates (#343, #377), thanks @jorgemasta
- Image size computed after HTMLImage component marked as mounted, thanks @laurynas
- Replace deprecated references to RN PropTypes with loose types, thanks denissb
- “Dumb” support for
acronymtag, thanks Brainyoo - Stricter handling of CSS rules !important directives stripping
- Added a CHANGELOG (#314)
- Each fix has his regression test implemented along
- Some behaviors have been tested to prepare the ground for future refactorings
- Upgraded lint tooling to prepare for PR guidelines and CI
- Add typescript definitions #341 (thanks @jsamr and to everyone that helped him !)
react-native-webview is now a peer dependency. As a result, you need to install it yourself. Please follow the plugin's instructions.
- Fix deprecation warnings for componentWillReceiveProps, ...WillUpdate (thanks @peacechen)
- Fix crashes with
<iframe>tag (thanks @Ryabchikus) - Upgraded demo app to RN 0.59.10 (fixes build issues on XCode 11) (thanks @IjzerenHein)
- Use
baseFontSizefor<a>tags
react-native-render-html is now compatible with RN < 0.58 once again. Feel free to upgrade from 3.10.0 to 4.1.1 regardless of your RN version.
- Prevent crash when encountering css functions like
style="calc(100% - 20px);" - Prevent crash when encountering
normalandunsetkeys
- Add a default renderer for
<pre>. This lets you display preformatted text such as code inside your content with a monospace font. #196 - Add
allowFontScalingprop. #157 (thanks @amhinson !) - Support
srcdocin<iframe>tags. #148 (thanks @charpeni !)
- Properly display an error when fetching a remote content to display has failed. #199 (thanks @Alex123456780)
- Fix the rendering of nested lists, like
<ul>inside<ol>#173 (thanks @muhamad-rizki) - Don't update
HTMLImage's state after it's been unmounted. This prevents warnings during development. 4fca299 - Don't strip line breaks in
<pre>tags #196 (thanks @henry40408 !)
- Remove useless
streamdependency frompackage.json#190 (thanks @ramuse !) - Fix typo in the documentation #205 (thanks @ajmeese7 !)
⚠️ This version requires react-native 0.58 and up. If you're using an older version, please stick to the version 3 of this plugin. ⚠️
- Prevent crash on react-native 0.58 and above since
ViewStylePropTypesandImageStylesPropTypeshave been deprecated. (thanks @ChrisEdson !)
- Add
renderersPropsprop. This lets you pass a set of props to your custom renderers, allowing you to style them furthermore without duplicating the renderers code. For instance, if you create ablockquotecustom renderer, you can alter its color depending on the data you're rendering.
Example :
<HTML source={...} renderers={renderers} renderersProps={{ color: 'blue' } />
<HTML source={...} renderers={renderers} renderersProps={{ color: 'red' } />
const renderers = {
blockquote: (htmlAttribs, children, convertedCSSStyles, passProps) => {
const { renderersProps } = passProps;
// rendersProps : { color: blue/red }
return ...
}
}- The logic that applies text styling has been rewritten from scratch. The previous implementation had a lot of flaws that were hard to debug. This should be a much needed improvement addressing some of the oldest issues of this plugin. The new algorithm is explained here.
3.10.0 might break some of your advanced text styling, just because it's now working as it should have from the beginning.
- Is some cases, text nodes used to be wrapped in additional
<p>tags. This could have unintended style effects. Let's now wrap them in a new custom tag that behaves like an inline tag, but without styling :textwrapper
- Minor fix with the npm release, no code change from the previous version.
- Handle absolute font sizes : medium, xx-small, small... (thanks @ikhsanalatsary) Closes #122
- Add
ptSizeprop (thanks @ikhsanalatsary) - Improve
<iframe>rendering, letting you set their dimensions throughtagsStyles&classesStyles. These are overriden byheightandwidthhtml attributes. Closes #110
- Addresses issues when
fontWeightproperty mistakenly got converted from string to a number. This resulted in crashes due to the wrong type. (thanks @mchudy !) Closes #111 - Prevent a crash when rendering an
<img>if you happen to have a style on your HTML container that's not an array (thanks @ikhsanalatsary) Closes #120 - Remove
!importantannotations that prevented some styles from being rendered Closes #121
- Fix typos &
baseFontStylevalue in README (thanks @charpeni) Closes #116 staticContentMaxWidthandimagesMaxWidthnow haveDimensions.get('window').widthas their default values
- Add
staticContentMaxWidthprop, letting you set a maximal width for "non-responsive" renderers (only<iframe>for now) - All attributes are now passed in
onLinkPress:evt,href,htmlAttribs(thanks @barbogast !) - Add
allowedStylesprop, excluding everything but these ones (thanks @krystofcelba !)
- Properly merge
baseFontStyleand default text styles, fixes #96
- Add
getClosestNodeParentByTagto the available utils functions - Add
textSelectableprop (thanks @hyb175 !)On iOS, you can copy the text, but not actually select what you want. This is a bug from react-native, see facebook/react-native#13938
- Add default renderer for
<s>(thanks @hyb175 !)
- The component should now re-render accordingly to your props updates ! Fixes #89, closes #83 as well as many other related issues
This is very important, especially if you need to update your rendering after it’s been displayed, or simply if you want to use hot reloading.
inheritstyles won't crash the rendering anymore, fixes #87
ignoredStylesprop will now also remove styling passed directly through HTML attributes, see #86
- Removed
lodash.isequaldependency - Rename iOS demo app with a more recognizable name
- You can now alter the
RNElements(basically the representation of your DOM elements into native components) with theonParsedprop, letting you customize even more your content.
- Add missing
parentTagto elements, fixing an important regression where yourtagsStylesmay not be applied. (thanks @Krizzu !)
- Updated the demo with the latest version of
react-nativeand its dependencies.
- Add
alterNodeprop that lets you change the values parsed from your HTML before it's rendered. It's extremely powerful as a last resort to add some very specific styling or circumvent rendering problems. - You can now set your custom renderers as inline components. By default, your renderers will still behave as blocks.
<ul>and<ol>styles aren't hardcoded anymore, you can now style them normally. (thanks @jonathonlui !)<a>tags will properly use yourignoredStylesprop (thanks @YeatsLu !)
- Fix : prevent crash with specific styling. This happens when the renderer is applying text-specific styles from a View wrapper to its Text children.
- Add
baseFontStyleprop, (replacingbaseFontSize!) allowing you to provide complete default styling to your text elements (#25) - Add
listsPrefixesRenderersprop, allowing you to customize the bullets and numbers rendered in your<ul>and<ol>lists - Add
imagesInitialDimensionsprop - Finished writing the base code for loading and parsing remote websites. Added a basic loader and error handlers.
- Add
remoteLoadingView&remoteErrorViewprops - Add
onParsedprop, this is fired upon first rendering with the the parsing result ofhtmlparser2and of this module HTMLImage: render thealtattribute when images couldn't be displayedHTMLImage:widthandheightattribute now resize your image- Add
debugprop, printing the parsing result ofhtmlparser2and of this module after initial rendering
- Make
classesStylestake precedence overtagsStyles(#35) - Greatly improve text styling nested inside views
- In some cases, raw texts children weren't wrapped with their texts siblings, so their styling wouldn't apply properly
- Title tags like
<h1>,<h2>and so on will always break line between each others HTMLImage: don't overscale images whenimagesMaxWidthprop is set to a higher value than the original width of your images- Correct some edge cases where random line breaks would randomly happen
- Properly render raw texts nested inside
<a>tags tagsStylesis now applied_constructStylesso your custom renderers have proper styling
- Add
alterData&alterChildrenprops, allowing you to change your HTML data before the intial rendering !
- Empty lists won't crash (thanks @peacechen !)
baseFontSizeprop won't override thefontSizeset by either : thestyleattribute, thetagsStylesandclassesStylesprop
- Add
customWrapperprop
- Use
ViewPropTypesto get rid of the deprecation warning
- Add
baseFontSizeprop so you can change the size of all your texts in a single prop without having to style every text tag (thanks @peacechen !)
- Texts elements that are siblings of
<br>tags should receive the styling of their parent properly - Line breaks in your HTML won't actually render line breaks in your native components, for instance :
<p>
<b>Description</b><br />Some description...<br />
Item 1, Item 2, Item 3,
</p>Item 1, 2, and 3 will be on the same line, regardless of the line breaks of the snippet.
- Add
decodeEntitiesprop (trueby default)
This is a major overhaul of the whole module, adding a lot of features, fixing numerous bugs, and... breaking some things. The whole codebase has been refactored and cleaned-up. The javascript style and linters have been updated accordingly.
This component now comes with a demo that showcases every feature. It will be very useful to keep track of bugs and rendering differences between the different versions of react-native.
It will be mandatory to refer to an example of the demo or to provide one when submitting an issue or a pull request for a new feature.
- The whole parsing and rendering logic has been written from scratch. It shoud now be able to render anything you throw at it without breaking a sweat (we mean without crashing)
- Greatly improve & fix the default renderer of images, with support for broken links in a browser-like way
- Add support for
emsizing ! - Add support for percentage sizing !
- Add
ignoredTagsprop, you're now able to get rid of those nasty<script> or <blink>(seriously ?) more easily - Add
ignoredStylesprop. Want to make sure nobackground-coloris applied through thestyleattribute ? You got it - Add more parameters to your custom renderers, like the CSS styling that has been converted
- (experimental), use a remote website as the source of parsed HTML !
- Add a default renderer for
<iframes>&<i>tags - Add
classesStylesprop to style your components with their respective HTML classes - Add
ignoreNodesFunctionprop so you can ignore HTML tags very precisely
- You shouldn't encounter random line breaks in your texts when using tags like
<em>,<i>,<strong>... even if they're not wrapped in a parent like<p> - Properly re-render everything if the HTML source changes
- Images nested inside
<a>should behave and receive taps properly - Don't crash when tapping an
<a>tag withouthrefattribute - Prevent the manual prop-checking handling the CSS to RN conversions from drowning you with YellowBoxes
Courtesy @duyphambhtech :)
- Remove
shallowCompareand replace withPureComponent - Fix crash when
<img>tag has no src attribute - Render
<br>tag - Render
<sub>and<sup> - Fix import
PropTypesfromprop-types - Convert code to conform to Javascript Standard Style
- Fix crash calling
PropTypesvalidators directly
Compatibility with react-native 0.43.2+ (react 16)
Initial release, usable with react >= 0.20 <= 0.42.2 (react 15)
