[6.x] 🚀 Welcoming the Foundry release!

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

1. Download the expo app on your smartphone (iOS, Android).
2. 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: https://github.com/archriss/react-native-render-html/pull/434#issue-527747509 (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 https://github.com/archriss/react-native-render-html/pull/434#issue-527747509

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: https://github.com/archriss/react-native-render-html/pull/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).

[jsamr]

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 ❤️.

[castalonirenz]

@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!