[6.x] 🚀 Welcoming the Foundry release! #430

jsamr · 2020-11-20T01:13:41Z

Foundry Status

Check the PR!

⚠️ This post will be updated on a regular basis! First pre-release has been released in late November. As long as the README is not ready, development is occurring in the dev/foundry branch. Also note that the Foundry Playground app is versioned and regularly updated!

ℹ️ If you have ideas, suggestions or you dislike something in this pre-release, you're invited to comment in this thread: What do you dislike or believe is missing in Foundry?

ℹ️ If you'd like to report a bug, you can comment in this thread or ping us in our Discord channel.

Hello community! I have been working on the new "Foundry" release for a while now, and I have just published a demo on expo, "Foundry Playground", where you can experiment with the new engine and its features. Please give us feedback!

Testing Foundry Playground

Download the expo app on your smartphone (iOS, Android).
Play with the demo:
- iOS: Open the project page from your smartphone and click "Open with Expo".
- Android: Open the project page from any device and scan the QR code to open with Expo.

Trying Foundry

From Scratch

Be careful, a lot of breaking changes! A compat module will be released to ease the transition.

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

Take a look at how to use the new renderer API here: #434 (comment) (section "Renderer API") or take inspiration from the demo snippets.

From the Playground

Clone

Clone this repository, "dev/foundry" branch:

git clone https://github.com/archriss/react-native-render-html.git --branch dev/foundry
cd react-native-render-html

Install

yarn install

Build

yarn build

Start the Playground App

yarn start

Test HTML Snippets on your own!

Play with demo/snippets/test.tsx and change the html variable.

A New Render Engine and CSS Processor

The new release should be significantly more reliable regarding styles and compliance with CSS / HTML standards. I have extracted two packages for this purpose:

@native-html/css-processor, which handles all the logic of translating CSS styles into native styles ;
@native-html/transient-render-engine, which implements RFC002 and is in charge of creating a data structure ready for rendering.

Both packages are available in the @native-html/core project monorepo. These packages are heavily tested against standards.

Features Highlight

See #434 (comment)

Demo

In the demo app, you can toggle the legacy (5.x) vs Foundry (6.x) modes with the L button below. You can inspect the HTML source, and even the Transient Render Tree structure. Try out the demo here.

Foundry / Legacy Modes	HTML Source / Transient Render Tree

And a few extra screenshots

Drawer Menu	Images

Progress

Check the "Remaining Work" section here: #434

Credits

Kudos to Expensify company which has hired me to work on the white space collapsing challenge, without which I would not have been able to commit full bandwidth those last 2 weeks! A great gift to the Open Source community. If you are an expert React Native contractor, they might have work for you (reactnative [at] expensify.com).

The text was updated successfully, but these errors were encountered:

M1ck0 · 2020-12-01T08:30:11Z

For some reason, iframe is not rendered at all. Youtube embed is inside iframe, and it is not loaded. Any ideas what could be the problem?
@jsamr

jsamr · 2020-12-01T10:41:02Z

@M1ck0

EDIT: Use `@native-html/iframe-plugin`

OLD ANSWER

You could write a custom renderer (it scales automatically to available screen width, given you provide contentWidth prop to the RenderHTML component). Example with this html:

<p>
<iframe width="560"
        height="315"
        src="https://www.youtube.com/embed/POK_Iw4m3fY"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>
</p>

⚠️ Make sure you use the latest release (6.0.0-alpha.9) to gain access to useSharedProps hook!

Code Rendered

import React from 'react';
import {
  useSharedProps,
  defaultHTMLElementModels
} from 'react-native-render-html';
import WebView from 'react-native-webview';
import { SnippetDeclaration } from '../types';

function extractPrintDimensions({
  attrWidth,
  attrHeight,
  styleWidth,
  styleHeight,
  contentWidth
}) {
  let printWidth, printHeight;
  let ratio;
  if (typeof attrWidth === 'number' && typeof attrHeight === 'number') {
    ratio = attrWidth / attrHeight;
  } else if (
    typeof styleWidth === 'number' &&
    typeof styleHeight === 'number'
  ) {
    ratio = styleWidth / styleHeight;
  } else {
    ratio = 16 / 9;
  }
  printWidth = Math.min(
    contentWidth,
    typeof attrWidth === 'number'
      ? attrWidth
      : typeof styleWidth === 'number'
      ? styleWidth
      : contentWidth
  );
  printHeight = printWidth / ratio;
  return {
    printWidth,
    printHeight
  };
}

function IframeRenderer({ tnode, style, key }) {
  const { contentWidth } = useSharedProps();
  const { width, height, ...restStyle } = style;
  const attrWidth = Number(tnode.attributes.width);
  const attrHeight = Number(tnode.attributes.height);
  const { printWidth, printHeight } = extractPrintDimensions({
    attrWidth: Number.isNaN(attrWidth) ? null : attrWidth,
    attrHeight: Number.isNaN(attrHeight) ? null : attrHeight,
    styleWidth: width,
    styleHeight: height,
    contentWidth
  });
  const source = tnode.attributes.srcdoc
    ? { html: tnode.attributes.srcdoc }
    : { uri: tnode.attributes.src };
  return (
    <WebView
      key={key}
      source={source}
      style={{ ...restStyle, width: printWidth, height: printHeight }}
    />
  );
}

IframeRenderer.model = defaultHTMLElementModels.iframe;

const renderers = {
  iframe: IframeRenderer
}

Then, make sure you pass renderers as a prop to the RenderHTML component.

jsamr · 2021-04-13T01:01:52Z

For those of you who are interested in CSS counter styles (roman, arabic...), good news are reported here!

nadav2051 · 2021-04-19T07:55:40Z

Hi! Thanks for the great job! not sure where to open bugs regarding Foundry issues, but I've tried to test the RTL with 6.0.24-alpha and it's not 100%,
My code:

return (<HTML
		source={{ html: this.props.htmlSource }}
		imagesMaxWidth={Dimensions.get('window').width}
		alterChildren={this.alterChildren.bind(this)}
		textSelectable
	        WebView={WebView}
	         renderersProps={{
	           ol: { enableExperimentalRtl: true },
	           ul: { enableExperimentalRtl: true }}}/>);

HTML Source:

<body>
                                    <p>English - bullets</p>
<p>&nbsp;</p>
<p style="text-align: center;">Center</p>
<ul style="text-align: center;">
<li dir="ltr">Hello</li>
<li dir="ltr">world</li>
</ul>
<p dir="ltr" style="text-align: center;">&nbsp;</p>
<p>&nbsp;</p>
<p>Left</p>
<ul>
<li>Hello</li>
<li>world</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p dir="rtl" style="text-align: right;">Right</p>
<ul dir="rtl" style="text-align: right;">
<li>Hello</li>
<li>world</li>
</ul>
<p dir="rtl" style="text-align: right;">&nbsp;</p>
                                </body>

react-native-render-html:

https://html-online.com/editor/:

jsamr · 2021-04-19T11:00:12Z

@nadav2051 It's totally appropriate to comment in this thread for Foundry bug reports! I however prefer snacks as it's very fast to reproduce. Also, it would be nice to add in which platform the bug appears. On my end, I didn't manage to reproduce the RTL issue neither on Android (10), nor on iOS (14.4). See the repro I used here: https://snack.expo.io/@jsamr/rnrh-alpha24-rtl-repro

As per the centering issue, worth investigating. I'll take a look.

adderly · 2021-05-04T19:29:48Z

@adderly It's unlikely (though not impossible) that we have a hook misbehavior since the project is covered with the rules of hooks Eslint rules. The most likely causes are explained here. If however you're confident that the problem comes from this library, please share a reproduction in the form of a snack, or a git project.

You are correct @jsamr , i created a new project and it worked.

But in my current codebase it just doesn't work.

Solved it with this. I think it is related to react-native-web coming from expo.

facebook/react#13991 (comment)

castalonirenz · 2021-05-18T08:20:19Z

onLinkPress is not working on the foundry version.

im trying to console the function.

jsamr · 2021-05-18T11:22:59Z

@castalonirenz onLinkPress has been moved to renderersProps.a.onPress since version 6.0.0-alpha.23

castalonirenz · 2021-05-18T11:56:40Z

@jsamr Hi, only the attributes ref is being get from the props. How can i get the text that has been press by the user?

jsamr · 2021-05-18T13:03:37Z

@castalonirenz Not an obvious solution at the moment, although we could pass the TNode instead of attributes, so that you can freely inspect its children. Right now, you could mangle the dom via dom visitors, and setting a data-text attribute:

alpha.25

import { getText } from "domutils";

const domVisitors = {
  onElement(element) {
    if (element.tagName === "a") {
      element.attributes["data-text"] = getText(element);
    }
  },
};

alpha.24 and below

import { getText, isTag } from "domutils";

function alterDOMNode(node) {
  if (isTag(node) && node.tagName === "a") {
    node.attributes["data-text"] = getText(node);
  }
}

Now you will have a data-text attribute passed to your onPress callback.

castalonirenz · 2021-05-18T15:46:31Z

@castalonirenz Not an obvious solution at the moment, although we could pass the TNode instead of attributes, so that you can freely inspect its children. Right now, you could mangle the dom via dom visitors, and setting a data-text attribute:

alpha.25
import { getText } from "domutils";

const domVisitors = {
  onElement(element) {
    if (element.tagName === "a") {
      element.attributes["data-text"] = getText(element);
    }
  },
};
alpha.24 and below
import { getText, isTag } from "domutils";

function alterDOMNode(node) {
  if (isTag(node) && node.tagName === "a") {
    node.attributes["data-text"] = getText(node);
  }
}
Now you will have a data-text attribute passed to your onPress callback.

i will try this one and will give you an update in the next day. thanks for the reply appreciate it!

castalonirenz · 2021-05-18T16:14:15Z

@castalonirenz Not an obvious solution at the moment, although we could pass the TNode instead of attributes, so that you can freely inspect its children. Right now, you could mangle the dom via dom visitors, and setting a data-text attribute:

alpha.25
import { getText } from "domutils";

const domVisitors = {
  onElement(element) {
    if (element.tagName === "a") {
      element.attributes["data-text"] = getText(element);
    }
  },
};
alpha.24 and below
import { getText, isTag } from "domutils";

function alterDOMNode(node) {
  if (isTag(node) && node.tagName === "a") {
    node.attributes["data-text"] = getText(node);
  }
}
Now you will have a data-text attribute passed to your onPress callback.

this is working see my screenshot

Console:

castalonirenz · 2021-05-19T04:55:11Z

Is there anyway to implement numberOfLines in HTML? @jsamr thanks in advanced

jsamr · 2021-05-19T15:49:56Z

@castalonirenz See #243 (comment)

jsamr · 2021-06-04T21:10:13Z

@nadav2051 Regarding the centering issue, there is unfortunately nothing I can do since textAlign will only target Text elements, and the marker box where the counter is printed is wrapped in a View... consider this a "React Native barrier".

jsamr · 2021-06-08T18:27:47Z

Hi everyone! Good news, The Beta is out! Check this ticket.
I'm closing this thread; and I want to say a big thanks to anyone participating in the alpha ❤️.

jsamr pinned this issue Nov 20, 2020

This was referenced Nov 20, 2020

Error while updating property padding in shadow node of type: RCTView #432

Closed

Click to open url #433

Closed

jsamr added the release Discuss a new release. label Nov 26, 2020

This comment has been minimized.

Sign in to view

jsamr mentioned this issue Dec 3, 2020

React Native Render HTML: whitespace collapsing (2d shot) Expensify/App#882

Merged

jsamr changed the title ~~🚀 Welcoming the Foundry release!~~ [6.x] 🚀 Welcoming the Foundry release! Dec 5, 2020

jsamr mentioned this issue Dec 5, 2020

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

Closed

This comment has been minimized.

Sign in to view

jsamr mentioned this issue Jan 27, 2021

Cannot override list margins (ul, ol li) #68

Closed

jsamr mentioned this issue Apr 13, 2021

Support <pre> tag #168

Closed

This comment has been minimized.

Sign in to view

This was referenced Apr 17, 2021

"Start" attribute not working for Ordered List #336

Closed

HTML string is too long, lead to can't render the content #208

Closed

This was referenced May 7, 2021

Square bullet and Alphabetical list not showing #481

Closed

[iframe-plugin] Content doesn't scale to fit if the container has some padding native-html/plugins#34

Closed

Text decoration style is not getting decoded #482

Closed

jsamr mentioned this issue May 17, 2021

includeFontPadding crashed at android as it convert boolean to string type "false" or "true" #485

Closed

jsamr mentioned this issue May 18, 2021

I want to use "!important" flag on some color tag but not able to do after different methods and trials also i am unable to use that. #486

Closed

8 tasks

jsamr mentioned this issue May 18, 2021

Lists bullets and numbers are always Black #165

Closed

jsamr mentioned this issue May 31, 2021

Custom Font Family being implement is not working correctly in Android but is working fine in IOS #488

Closed

jsamr closed this as completed Jun 8, 2021

jsamr unpinned this issue Jun 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[6.x] 🚀 Welcoming the Foundry release! #430

[6.x] 🚀 Welcoming the Foundry release! #430

jsamr commented Nov 20, 2020 •

edited

Loading

M1ck0 commented Dec 1, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

jsamr commented Dec 1, 2020 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

jsamr commented Apr 13, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

nadav2051 commented Apr 19, 2021 •

edited

Loading

jsamr commented Apr 19, 2021

adderly commented May 4, 2021

castalonirenz commented May 18, 2021

jsamr commented May 18, 2021

castalonirenz commented May 18, 2021

jsamr commented May 18, 2021 •

edited

Loading

castalonirenz commented May 18, 2021

alpha.25

alpha.24 and below

castalonirenz commented May 18, 2021

alpha.25

alpha.24 and below

castalonirenz commented May 19, 2021 •

edited

Loading

jsamr commented May 19, 2021

jsamr commented Jun 4, 2021

jsamr commented Jun 8, 2021

[6.x] 🚀 Welcoming the Foundry release! #430

[6.x] 🚀 Welcoming the Foundry release! #430

Comments

jsamr commented Nov 20, 2020 • edited Loading

Testing Foundry Playground

Trying Foundry

From Scratch

From the Playground

Clone

Install

Build

Start the Playground App

Test HTML Snippets on your own!

A New Render Engine and CSS Processor

Features Highlight

Demo

Progress

Credits

M1ck0 commented Dec 1, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

jsamr commented Dec 1, 2020 • edited Loading

EDIT: Use @native-html/iframe-plugin

OLD ANSWER

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

jsamr commented Apr 13, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

nadav2051 commented Apr 19, 2021 • edited Loading

jsamr commented Apr 19, 2021

adderly commented May 4, 2021

castalonirenz commented May 18, 2021

jsamr commented May 18, 2021

castalonirenz commented May 18, 2021

jsamr commented May 18, 2021 • edited Loading

alpha.25

alpha.24 and below

castalonirenz commented May 18, 2021

alpha.25

alpha.24 and below

castalonirenz commented May 18, 2021

alpha.25

alpha.24 and below

castalonirenz commented May 19, 2021 • edited Loading

jsamr commented May 19, 2021

jsamr commented Jun 4, 2021

jsamr commented Jun 8, 2021

jsamr commented Nov 20, 2020 •

edited

Loading

jsamr commented Dec 1, 2020 •

edited

Loading

EDIT: Use `@native-html/iframe-plugin`

nadav2051 commented Apr 19, 2021 •

edited

Loading

jsamr commented May 18, 2021 •

edited

Loading

castalonirenz commented May 19, 2021 •

edited

Loading