[5.x] 🚀 A new "Legacy" Major

[jsamr]

In #430, I have introduced the new "Foundry" release, which is a complete rewrite of this library. This release is yet experimental, and not scheduled for stable before the first trimester of 2021. Although I recommend anyone to try out the Foundry release, I wouldn't recommend it for users already using this library in production. You should expect a lot of breaking changes , and I would suggest to wait for the compat module which will be published along.
In the meantime, I decided to release a v5, which ships a good amount of features and fixes requested by the community.

There are 3 breaking changes, but there is an easy upgrade path for each of those. Feel free to ask questions in this post or on our Discord channel if you need help during your upgrade!

Install

npm install --save react-native-render-html

yarn add react-native-render-html

Highlights

• Compliance with RFC001 and a brand new Image component!
• new source prop with support for method, headers and body 🚀! Deprecates uri and html
• new contentWidth prop in accordance with RFC001. We recommend using useWindowDimensions().width to handle screen
  rotation gracefully (be careful, there is a nasty bug in RN 0.63.3, fixed in 0.63.4 where screen rotations don't trigger dimension changes).
• iframe tag element is not rendered anymore, and react-native-webview has been removed from peer dependencies; use the official @native-html/iframe-plugin instead, which supports onLinkPress and scales to content width 🚀.
• imagesMaxWidth and staticContentMaxWidth have been discontinued in favor of computeEmbeddedMaxWidth. This function takes the provided contentWidth as 1st argument, tag name as 2d argument and returns the max width of the embedded (iframe, image...).

Other features

• New prop htmlParserOptions to override htmlparser2 ParserOptions object
• Podspec file
• New WebView optional prop for plugins which requires it, ses @native-html/plugins
• New defaultTextProps
• New defaultWebViewProps
• Export constructStyles, getParentsTagsRecursively, getClosestNodeParentByTag and IGNORED_TAGS from index.js.
• New domNode field in passProps.
• New domNodeToHTMLString util to get the HTML representation of a DOM node.

Bugfixes

• Image getting blur on iOS, #141;
• img's tag resizeMode property not modifiable through tagStyles, #172;

Final notes

• Read the whole CHANGELOG here
• If you've been following the foundry release, you might realize some features described above are not shipped yet. Don't worry, they will soon!

[ApayRus]

Hi. Thank you for your work.

Yesterday I faced, that custom renderer doesn't see changes in setState (useState) value of react root component.

I think it is important and should be noticed somewhere in documentation. (I've read it carefully as well many issues).

Please, can someone give me an advice what to do?

this is my html - it is a quiz with options for answer.

<p>Question 1. Multiple choice</p>
<quiz type="multiple" quizId="0">
    <variant type="multiple" quizId="0" variantId="0">variant 1</variant>
    <variant type="multiple" quizId="0" variantId="1">variant 2</variant>
    <variant type="multiple" quizId="0" variantId="2">variant 3</variant>
    <variant type="multiple" quizId="0" variantId="3">variant 4</variant>
</quiz>
<p>Question 2. Single choice</p>
<quiz type="single" quizId="1">
    <variant type="single" quizId="1" variantId="0">variant 1</variant>
    <variant type="single" quizId="1" variantId="1">variant 2</variant>
    <variant type="single" quizId="1" variantId="2">variant 3</variant>
</quiz>

Before any variant I render checkboxes and then handle clicks on them.

Click on Variant changes state userAnswers of root react component. But I can't update checkbox checked prop in custom renderer.

const variantRenderer = (
		htmlAttribs,
		children,
		convertedCSSStyles,
		passProps
	) => {
		const { quizid: quizId, variantid: variantId, type } = htmlAttribs

		return (
			<TouchableOpacity
				key={`variant-${quizId}-${variantId}`}
				onPress={handlePressQuizVariant(quizId, variantId)}
			>
				<Text>
					<CheckBox
						size={18}
						checked={userAnswers[quizId].includes(variantId)}
						{...(type === 'single'
							? { checkedIcon: 'dot-circle-o', uncheckedIcon: 'circle-o' }
							: {})}
						containerStyle={{ margin: 0, padding: 0 }}
					/>{' '}
					{children}
				</Text>
			</TouchableOpacity>
		)
	}

[jsamr]

@Aparus The 5.x release is somehow limited to the legacy architecture, in which the "renderers" prop is not reactive (doesn't trigger re-renders). To overcome your issue, I suggest you test your case with the new foundry pre-release, in which custom renderers are react components. You can then use context, redux, or any other shared state API to share state between your root and custom renderers instances. See #430 for information on how to try out this new pre-release, but be aware there might be breaking changes before reaching beta.