Update documentation for 0.16

necolas · necolas · commit ab5d11953de7 · 2021-04-20T10:46:52.000-07:00
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 ## Documentation
 
-The [documentation site](https://necolas.github.com/react-native-web/) covers installation, guides, and APIs.
+The [documentation site](https://necolas.github.io/react-native-web/) covers installation, guides, and APIs.
 
 ## Example
 
diff --git a/packages/docs/src/pages/docs/apis/i18n-manager.md b/packages/docs/src/pages/docs/apis/i18n-manager.md
@@ -5,7 +5,6 @@ permalink: /docs/i18n-manager/index.html
 eleventyNavigation:
   key: I18nManager
   parent: APIs
-  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
diff --git a/packages/docs/src/pages/docs/apis/linking.md b/packages/docs/src/pages/docs/apis/linking.md
@@ -5,7 +5,6 @@ permalink: /docs/linking/index.html
 eleventyNavigation:
   key: Linking
   parent: APIs
-  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
diff --git a/packages/docs/src/pages/docs/components/modal.md b/packages/docs/src/pages/docs/components/modal.md
@@ -5,7 +5,6 @@ permalink: /docs/modal/index.html
 eleventyNavigation:
   key: Modal
   parent: Components
-  label: "New"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
diff --git a/packages/docs/src/pages/docs/components/pressable.md b/packages/docs/src/pages/docs/components/pressable.md
@@ -5,7 +5,6 @@ permalink: /docs/pressable/index.html
 eleventyNavigation:
   key: Pressable
   parent: Components
-  label: "New"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
diff --git a/packages/docs/src/pages/docs/components/text.md b/packages/docs/src/pages/docs/components/text.md
@@ -5,7 +5,6 @@ permalink: /docs/text/index.html
 eleventyNavigation:
   key: Text
   parent: Components
-  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
diff --git a/packages/docs/src/pages/docs/components/view.md b/packages/docs/src/pages/docs/components/view.md
@@ -5,7 +5,6 @@ permalink: /docs/view/index.html
 eleventyNavigation:
   key: View
   parent: Components
-  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
diff --git a/packages/docs/src/pages/docs/concepts/accessibility.md b/packages/docs/src/pages/docs/concepts/accessibility.md
@@ -5,7 +5,6 @@ permalink: /docs/accessibility/index.html
 eleventyNavigation:
   key: Accessibility
   parent: Concepts
-  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
diff --git a/packages/docs/src/pages/docs/getting-started/browser-compatibility.md b/packages/docs/src/pages/docs/getting-started/browser-compatibility.md
@@ -5,7 +5,7 @@ permalink: /docs/browser-compatibility/index.html
 eleventyNavigation:
   key: Browser compatibility
   parent: Start
-  order: 3
+  order: 4
 ---
 
 :::lead
diff --git a/packages/docs/src/pages/docs/getting-started/help.md b/packages/docs/src/pages/docs/getting-started/help.md
@@ -6,7 +6,7 @@ description:
 eleventyNavigation:
   key: Help
   parent: Start
-  order: 5
+  order: 6
 ---
 
 :::lead
diff --git a/packages/docs/src/pages/docs/getting-started/introduction.md b/packages/docs/src/pages/docs/getting-started/introduction.md
@@ -22,7 +22,7 @@ React Native for Web is a compatibility layer between React DOM and React Native
 
 ## Modern Web
 
-{{ site.name }} makes direct use of native DOM APIs to implement specific features. As the Web platform improves, so does {{ site.name }}. Although certains APIs in the project have remained unchanged since inception, the implementations have become smaller and faster by migrating to new DOM APIs as they became broadly available in browsers.
+{{ site.name }} makes direct use of native DOM APIs to implement specific features. As the Web platform improves, so does {{ site.name }}. Although certain APIs in the project have remained unchanged since inception, the implementations have become smaller and faster by migrating to new DOM APIs as they became broadly available in browsers.
 
 ## Components
 
diff --git a/packages/docs/src/pages/docs/getting-started/multi-platform.md b/packages/docs/src/pages/docs/getting-started/multi-platform.md
@@ -3,104 +3,18 @@ title: Multi-platform setup
 date: Last Modified
 permalink: /docs/multi-platform/index.html
 eleventyNavigation:
-  key: Multi-platform
+  key: Multi-platform setup
   parent: Start
-  order: 2
+  order: 3
 ---
 
 :::lead
-An overview of how to integrate React Native for Web into an existing React Native codebase.
+How to integrate React Native for Web into an existing React Native codebase.
 :::
 
-If you are interested in making a multi-platform app it is strongly recommended that you use Expo (or learn from the source code for the Web integration). Expo includes [web support](https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/) and takes care of all the configuration work required.
+Please read the [setup]({{ '/docs/setup' | url }}) guide first. If you have an existing React Native application, there are more areas that require attention and customization before most web bundlers can consume the non-standard JavaScript in packages produced by the React Native ecosystem. Additionally, 3rd party React Native packages with web support are listed in the [React Native Directory](https://reactnative.directory/?web=true).
 
-If you have an existing application, this guide will surface the areas that require attention and customization before most web bundlers can consume the non-standard JavaScript in packages produced by the React Native ecosystem. Additionally, 3rd party React Native packages with web support are listed in the [React Native Directory](https://reactnative.directory/?web=true).
-
----
-
-## Package aliasing
-
-### Bundler
-
-Configure your module bundler to alias the package to `react-native`. For example, modify your [webpack](https://github.com/webpack/webpack) configuration as follows:
-
-```js
-// webpack.config.js
-module.exports = {
-  // ...the rest of your config
-
-  resolve: {
-    alias: {
-      'react-native$': 'react-native-web'
-    }
-  }
-}
-```
-
-### Compiler
-
-[Babel](https://babeljs.io/) supports module aliasing using [babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver)
-
-```js
-{
-  "plugins": [
-    ["module-resolver", {
-      "alias": {
-        "^react-native$": "react-native-web"
-      }
-    }]
-  ]
-}
-```
-
-### Jest
-
-[Jest](https://facebook.github.io/jest/) can be configured using the provided preset. This will map `react-native` to `react-native-web` and provide appropriate mocks. Please refer to the Jest documentation for more information.
-
-```js
-{
-  "preset": "react-native-web"
-}
-```
-
-### Flow
-
-[Flow](https://flow.org) can be configured to understand the aliased module and pull types from Reac Native Web's source code. To do this, you can alias the name as below. You will also need to tell flow to use the `module` field of RNW's `package.json` or it may not find the flow types.
-
-```yml
-[options]
-module.system.node.main_field=module
-module.system.node.main_field=main
-module.name_mapper='^react-native$' -> 'react-native-web'
-```
-
-### Node.js
-
-Node.js can alias `react-native` to `react-native-web` using [`module-alias`](https://www.npmjs.com/package/module-alias). This is useful if you want to pre-render the app (e.g., server-side rendering or build-time rendering).
-
-```js
-// Install the `module-alias` package as a dependency first
-const moduleAlias = require("module-alias");
-moduleAlias.addAliases({
-  "react-native": require.resolve("react-native-web"),
-});
-moduleAlias();
-```
-
----
-
-## Root element
-
-Full-screen React Native apps may require the following styles inlined in the HTML document shell. ([Example](https://codesandbox.io/s/52x1871vjl?file=/public/index.html:352-644).)
-
-```css
-/* These styles make the body full-height */
-html, body { height: 100%; }
-/* These styles disable body scrolling if you are using <ScrollView> */
-body { overflow: hidden; }
-/* These styles make the root element full-height */
-#root { display:flex; height:100%; }
-```
+If you are interested in making a multi-platform app it is *strongly recommended* that you use [Expo](https://expo.io) (or learn from the source code for the Web integration). Expo includes [web support](https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/) and takes care of all the configuration work required.
 
 ---
 
diff --git a/packages/docs/src/pages/docs/getting-started/react-native-compatibility.md b/packages/docs/src/pages/docs/getting-started/react-native-compatibility.md
@@ -5,7 +5,7 @@ permalink: /docs/react-native-compatibility/index.html
 eleventyNavigation:
   key: React Native compatibility
   parent: Start
-  order: 4
+  order: 5
 ---
 
 :::lead
diff --git a/packages/docs/src/pages/docs/getting-started/setup.md b/packages/docs/src/pages/docs/getting-started/setup.md
@@ -0,0 +1,125 @@
+---
+title: Setup
+date: Last Modified
+permalink: /docs/setup/index.html
+eleventyNavigation:
+  key: Setup
+  parent: Start
+  order: 2
+---
+
+:::lead
+How to integrate React Native for Web with various development tools.
+:::
+
+Find out about package aliasing, package optimization, using types, and customizing the app's HTML shell.
+
+---
+
+## Package aliasing
+
+### Bundler
+
+Configure your module bundler to alias the package to `react-native`. For example, modify your [webpack](https://github.com/webpack/webpack) configuration as follows:
+
+```js
+// webpack.config.js
+module.exports = {
+  // ...the rest of your config
+
+  resolve: {
+    alias: {
+      'react-native$': 'react-native-web'
+    }
+  }
+}
+```
+
+### Compiler
+
+[Babel](https://babeljs.io/) supports module aliasing using [babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver)
+
+```js
+{
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "^react-native$": "react-native-web"
+      }
+    }]
+  ]
+}
+```
+
+### Jest
+
+[Jest](https://facebook.github.io/jest/) can be configured using the provided preset. This will map `react-native` to `react-native-web` and provide appropriate mocks. Please refer to the Jest documentation for more information.
+
+```js
+{
+  "preset": "react-native-web"
+}
+```
+
+### Flow
+
+[Flow](https://flow.org) can be configured to understand the aliased module
+
+```yml
+[options]
+# Alias the package name
+module.name_mapper='^react-native$' -> 'react-native-web'
+```
+
+### Node.js
+
+Node.js can alias `react-native` to `react-native-web` using [`module-alias`](https://www.npmjs.com/package/module-alias). This is useful if you want to pre-render the app (e.g., server-side rendering or build-time rendering).
+
+```js
+// Install the `module-alias` package as a dependency first
+const moduleAlias = require("module-alias");
+moduleAlias.addAliases({
+  "react-native": require.resolve("react-native-web"),
+});
+moduleAlias();
+```
+
+---
+
+## Package optimization
+
+The project's Babel plugin (see [Installation]({{ '/docs/installation' | url }})) is recommended for build-time optimizations and to prune modules not used by your application.
+
+```js
+{
+  "plugins": ['react-native-web']
+}
+```
+
+---
+
+## Types
+
+Flow can be configured to pull types from React Native for Web's source code.
+
+```yml
+[options]
+# Point flow to the 'module' field by default
+module.system.node.main_field=module
+module.system.node.main_field=main
+```
+
+---
+
+## Root element
+
+Full-screen React Native apps with a root `<ScrollView>` may require the following styles inlined in the HTML document shell. ([Example](https://codesandbox.io/s/52x1871vjl?file=/public/index.html:352-644).)
+
+```css
+/* These styles make the body full-height */
+html, body { height: 100%; }
+/* These styles disable body scrolling if you are using <ScrollView> */
+body { overflow: hidden; }
+/* These styles make the root element full-height */
+#root { display:flex; height:100%; }
+```
