added html example (expo#409)

Author: EvanBacon

with-html/App.js

@@ -0,0 +1,31 @@
+import { Image } from "react-native";
+
+export default function App() {
+  return (
+    <main className="flex-1 items-center justify-center">
+      <article className="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
+        <Image
+          className="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
+          source={{
+            uri: "https://en.gravatar.com/userimage/120276729/078ee8361156d0e1c37b90e7851fed4b.png",
+          }}
+          width="384"
+          height="512"
+        />
+        <main className="pt-6 md:p-8 text-center md:text-left space-y-4">
+          <p className="text-lg font-medium">
+            With <code>@expo/html-elements</code>, you can write HTML syntax
+            that renders to real native components. Combined with Tailwind CSS,
+            you have an experience that makes web developers feel at home.”
+          </p>
+          <article className="font-medium">
+            <p className="text-sky-500 dark:text-sky-400 my-0">Evan Bacon</p>
+            <p className="text-slate-700 dark:text-slate-500 my-2">
+              Engineer, Expo
+            </p>
+          </article>
+        </main>
+      </article>
+    </main>
+  );
+}

with-html/README.md

@@ -0,0 +1,25 @@
+# HTML Elements Example
+
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+</p>
+
+## 🚀 How to use
+
+<!-- Setup instructions -->
+
+- Install with `yarn` or `npm install`.
+- Run `yarn start` or `npm run start` to try it out.
+
+## 📝 Notes
+
+<!-- Link to related Expo or library docs -->
+
+This example combines the [`@expo/html-elements` Babel plugin](https://github.com/expo/expo/blob/d314efccb28d005d5df83df74883eb0365020ae2/packages/html-elements/babel.js#L3-L41) and [`nativewind`](https://www.nativewind.dev/) which enables CSS-like styling.
+
+You can write pure HTML elements which are converted to native views at build time.

with-html/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [
+      // Must come before the nativewind plugin
+      "@expo/html-elements/babel",
+      [
+        "nativewind/babel",
+        {
+          allowModuleTransform: ["@expo/html-elements"],
+        },
+      ],
+    ],
+  };
+};

with-html/package.json

@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+    "@expo/html-elements": "^0.3.0",
+    "expo": "^46.0.0",
+    "nativewind": "^2.0.10",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-web": "~0.18.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "tailwindcss": "^3.1.8"
+  }
+}

with-html/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./App.{js,jsx,ts,tsx}', './screens/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};