From eff0c8b69e6a480e42fb3ae310b3d88bd4ca068f Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Thu, 23 Jul 2020 20:39:24 -0300 Subject: [PATCH] feat: a revamped scalable HTMLImage component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING: imagesMaxWidth prop is discontinued in favor of contentWidth and computeImagesMaxWidth. See RFC001 for an exhaustive description. This patch offers a rewrite of the HTMLImage component to get a close match with RFC001, “a deterministic approach to images scaling”. The only part of this RFC which is unsupported is the unitConverter behavior, which is planned for a later major release. In addition to the capabilities defined in the RFC, this patch provides the following features and behaviors: - new property enableExperimentalPercentWidth. It allows percent width for tags, computed relatively to contentWidth. - take margins into account when scaling down images; - support for overriding image styles, including resizeMode; - support for minWidth, minHeight, maxWidth, maxHeight styles. This patch also fixes #141, #172 and provides the features offered in PR #242 and #315. fixes #141 fixes #172 closes #315 closes #242 --- README.md | 220 ++++++------ src/HTML.js | 32 +- src/HTMLImage.js | 412 ++++++++++++++++------ src/HTMLRenderers.js | 366 ++++++++++--------- src/__mocks__/react-native.js | 24 +- src/__tests__/README.MD | 4 +- src/__tests__/component.html.test.js | 17 + src/__tests__/component.image.test.js | 322 +++++++++++++++++ types/react-native-render-html/index.d.ts | 17 +- 9 files changed, 1022 insertions(+), 392 deletions(-) create mode 100644 src/__tests__/component.html.test.js create mode 100644 src/__tests__/component.image.test.js diff --git a/README.md b/README.md index 520e35e41..6cbd9c92e 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ An iOS/Android pure javascript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it. -> Based on the original work of [Thomas Beverley](https://github.com/Thomas101), props to him. +> Based on the original work of [Thomas Beverley](https://github.com/Thomas101), props to him. [![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?colorB=191A17)](#) [![npm](https://img.shields.io/npm/v/react-native-render-html/latest)](https://www.npmjs.com/package/react-native-render-html) @@ -17,8 +17,8 @@ An iOS/Android pure javascript react-native component that renders your HTML int

> ## :city_sunrise: -> To try out pre-releases up-to-date with master, including many fixes, you are encouraged to install the `next` tag versions. With our (new) test-first approach, the fixes and features in this branch will have been tested, so the chances you encounter a bug is pretty low. If you encounter any issue on a pre-release, you don't need to fill a full bug report. Just [comment our latest release thread](https://github.com/archriss/react-native-render-html/issues?q=is%3Aissue+is%3Aopen+label%3Arelease). To install the `next` version: 
npm i --save react-native-render-html@next
- +> +> To try out pre-releases up-to-date with master, including many fixes, you are encouraged to install the `next` tag versions. With our (new) test-first approach, the fixes and features in this branch will have been tested, so the chances you encounter a bug is pretty low. If you encounter any issue on a pre-release, you don't need to fill a full bug report. Just [comment our latest release thread](https://github.com/archriss/react-native-render-html/issues?q=is%3Aissue+is%3Aopen+label%3Arelease). To install the `next` version: 
npm i --save react-native-render-html@next
## Table of contents @@ -51,9 +51,9 @@ An iOS/Android pure javascript react-native component that renders your HTML int ## Basic usage ```javascript -import React, { Component } from 'react'; -import { ScrollView, Dimensions } from 'react-native'; -import HTML from 'react-native-render-html'; +import React, { Component } from "react"; +import { ScrollView, useWindowDimensions } from "react-native"; +import HTML from "react-native-render-html"; const htmlContent = `

This HTML snippet is now rendered with native components !

@@ -62,51 +62,52 @@ const htmlContent = ` Look at how happy this native cat is `; -export default class Demo extends Component { - render () { - return ( - - - - ); - } +export default function Demo() { + const contentWidth = useWindowDimensions().width; + return ( + + + + ); } ``` ## Props -Prop | Description | Type | Required/Default ------- | ------ | ------ | ------ -`renderers` | Your [custom renderers](#creating-custom-renderers) | `object` | Optional, some default ones are supplied (``, ``...) -`renderersProps` | Set of props accessible into your [custom renderers](#creating-custom-renderers) in `passProps` (4th argument) | `object` | Optional -`html` | HTML string to parse and render | `string` | Required -`uri` | *(experimental)* remote website to parse and render | `string` | Optional -`decodeEntities` | Decode HTML entities of your content | `bool` | Optional, defaults to `true` -`imagesMaxWidth` | Resize your images to this maximum width, see [images](#images) | `number` | Optional -`staticContentMaxWidth` | Set a maximum width to non-responsive content (`