From 3238232a190fb9a96ac2b615d864d3e8de30189b Mon Sep 17 00:00:00 2001 From: Nicola Corti Date: Tue, 1 Mar 2022 18:39:38 +0000 Subject: [PATCH 1/8] Update migration guide feedback link to the working group (#2983) --- docs/_markdown-new-architecture-warning.mdx | 7 +++++++ docs/new-architecture-app-intro.md | 8 ++------ docs/new-architecture-app-modules-android.md | 8 ++------ docs/new-architecture-app-modules-ios.md | 8 ++------ docs/new-architecture-app-renderer-android.md | 8 ++------ docs/new-architecture-app-renderer-ios.md | 9 ++------- docs/new-architecture-appendix.md | 8 ++------ docs/new-architecture-intro.md | 8 ++------ docs/new-architecture-library-android.md | 8 ++------ docs/new-architecture-library-intro.md | 8 ++------ docs/new-architecture-library-ios.md | 9 ++------- docs/new-architecture-troubleshooting.md | 8 ++------ 12 files changed, 29 insertions(+), 68 deletions(-) create mode 100644 docs/_markdown-new-architecture-warning.mdx diff --git a/docs/_markdown-new-architecture-warning.mdx b/docs/_markdown-new-architecture-warning.mdx new file mode 100644 index 00000000000..d52c490153b --- /dev/null +++ b/docs/_markdown-new-architecture-warning.mdx @@ -0,0 +1,7 @@ +:::caution + +This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [discussion inside the working group](https://github.com/reactwg/react-native-new-architecture/discussions/8) for this page. + +Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. + +::: diff --git a/docs/new-architecture-app-intro.md b/docs/new-architecture-app-intro.md index 84b6b5e2bfb..5c41f7ce217 100644 --- a/docs/new-architecture-app-intro.md +++ b/docs/new-architecture-app-intro.md @@ -3,13 +3,9 @@ id: new-architecture-app-intro title: Prerequisites for Applications --- -:::caution - -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + There’s a few prerequisites that should be addressed before the new architecture is enabled in your application. diff --git a/docs/new-architecture-app-modules-android.md b/docs/new-architecture-app-modules-android.md index d291b555a9d..253aa7de299 100644 --- a/docs/new-architecture-app-modules-android.md +++ b/docs/new-architecture-app-modules-android.md @@ -3,13 +3,9 @@ id: new-architecture-app-modules-android title: Enabling TurboModule on Android --- -:::caution - -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + Make sure your application meets all the [prerequisites](new-architecture-app-intro). diff --git a/docs/new-architecture-app-modules-ios.md b/docs/new-architecture-app-modules-ios.md index 8c3cbac6c97..1fcb1bc0d17 100644 --- a/docs/new-architecture-app-modules-ios.md +++ b/docs/new-architecture-app-modules-ios.md @@ -3,13 +3,9 @@ id: new-architecture-app-modules-ios title: Enabling TurboModule on iOS --- -:::caution +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + Make sure your application meets all the [prerequisites](new-architecture-app-intro). diff --git a/docs/new-architecture-app-renderer-android.md b/docs/new-architecture-app-renderer-android.md index 5750b20d1fb..4b7bbe88b04 100644 --- a/docs/new-architecture-app-renderer-android.md +++ b/docs/new-architecture-app-renderer-android.md @@ -3,13 +3,9 @@ id: new-architecture-app-renderer-android title: Enabling Fabric on Android --- -:::caution +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + Make sure your application meets all the [prerequisites](new-architecture-app-intro). diff --git a/docs/new-architecture-app-renderer-ios.md b/docs/new-architecture-app-renderer-ios.md index daae362264e..ed03564700f 100644 --- a/docs/new-architecture-app-renderer-ios.md +++ b/docs/new-architecture-app-renderer-ios.md @@ -4,14 +4,9 @@ title: Enabling Fabric on iOS --- import M1Cocoapods from './\_markdown-m1-cocoapods.mdx'; +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -:::caution - -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + This section will go over how to enable the new renderer in your app. Make sure your application meets all the [prerequisites](new-architecture-app-intro). diff --git a/docs/new-architecture-appendix.md b/docs/new-architecture-appendix.md index 2fd1d692c39..01191f9d0ef 100644 --- a/docs/new-architecture-appendix.md +++ b/docs/new-architecture-appendix.md @@ -3,13 +3,9 @@ id: new-architecture-appendix title: Appendix --- -:::caution +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + ## I. Flow Type to Native Type Mapping diff --git a/docs/new-architecture-intro.md b/docs/new-architecture-intro.md index 88eed0484e1..85d4421639d 100644 --- a/docs/new-architecture-intro.md +++ b/docs/new-architecture-intro.md @@ -3,13 +3,9 @@ id: new-architecture-intro title: Adopting the New Architecture --- -:::caution +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + # Getting Started with the New Architecture diff --git a/docs/new-architecture-library-android.md b/docs/new-architecture-library-android.md index 1efa423e61f..3d58e2c5558 100644 --- a/docs/new-architecture-library-android.md +++ b/docs/new-architecture-library-android.md @@ -3,13 +3,9 @@ id: new-architecture-library-android title: Enabling in Android Library --- -:::caution +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + Once you have defined the JavaScript specs for your native modules as part of the [prerequisites](new-architecture-library-intro) and followed the Android/Gradle setup, you are now ready to migrate your library to the new architecture. Here are the steps you can follow to accomplish this. diff --git a/docs/new-architecture-library-intro.md b/docs/new-architecture-library-intro.md index 688bd76e831..b11ca4743d6 100644 --- a/docs/new-architecture-library-intro.md +++ b/docs/new-architecture-library-intro.md @@ -3,13 +3,9 @@ id: new-architecture-library-intro title: Prerequisites for Libraries --- -:::caution +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + The following steps will help ensure your modules and components are ready for the New Architecture. diff --git a/docs/new-architecture-library-ios.md b/docs/new-architecture-library-ios.md index 48531efe646..acf3e4563f4 100644 --- a/docs/new-architecture-library-ios.md +++ b/docs/new-architecture-library-ios.md @@ -4,14 +4,9 @@ title: Enabling in iOS Library --- import M1Cocoapods from './\_markdown-m1-cocoapods.mdx'; +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -:::caution - -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + You have defined the JavaScript specs for your native modules as part of the [prerequisites](new-architecture-library-intro) and you are now ready to migrate your library to the new architecture. Here are the steps you can follow to accomplish this. diff --git a/docs/new-architecture-troubleshooting.md b/docs/new-architecture-troubleshooting.md index 73fce2cfb62..09bd0e6dc93 100644 --- a/docs/new-architecture-troubleshooting.md +++ b/docs/new-architecture-troubleshooting.md @@ -3,13 +3,9 @@ id: new-architecture-troubleshooting title: Troubleshooting --- -:::caution +import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx'; -This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page. - -Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup. - -::: + This page contains resolutions to common problem you might face when migrating to the New Architecture. From 43a610b8f39ada96d4e46d9c51ab55aab69f2c13 Mon Sep 17 00:00:00 2001 From: Nicola Corti Date: Tue, 1 Mar 2022 19:11:35 +0000 Subject: [PATCH 2/8] Add TOC sections for the 'Render, Commit, and Mount' page (#2985) --- docs/render-pipeline.md | 23 +++++++++++++------ .../version-0.66/render-pipeline.md | 23 +++++++++++++------ .../version-0.67/render-pipeline.md | 23 +++++++++++++------ 3 files changed, 48 insertions(+), 21 deletions(-) diff --git a/docs/render-pipeline.md b/docs/render-pipeline.md index c7cd54a0b8f..41f7d38d326 100644 --- a/docs/render-pipeline.md +++ b/docs/render-pipeline.md @@ -19,13 +19,16 @@ The render pipeline can be broken into three general phases: The render pipeline is executed in three different scenarios: -1. [Initial Render](#initial-render) -2. [React State Updates](#react-state-updates) -3. [React Native Renderer State Updates](#react-native-renderer-state-updates) +- [Initial Render](#initial-render) + - [Phase 1. Render](#phase-1-render) + - [Phase 2. Commit](#phase-2-commit) + - [Phase 3. Mount](#phase-3-mount) +- [React State Updates](#react-state-updates) +- [React Native Renderer State Updates](#react-native-renderer-state-updates) --- -### Initial Render +## Initial Render Imagine you want to render the following: @@ -43,6 +46,8 @@ function MyComponent() { In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#host-view-tree-and-host-view) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). +### Phase 1. Render + ![Phase one: render](/docs/assets/Architecture/renderer-pipeline/phase-one-render.png) During this process of element reduction, as each _React Element_ is invoked, the renderer also synchronously creates a [React Shadow Node](architecture-glossary#react-shadow-tree-and-react-shadow-node). This happens only for _React Host Components_, not for [React Composite Components](architecture-glossary#react-composite-components). In the example above, the `` leads to the creation of a `ViewShadowNode` object, and the @@ -62,6 +67,8 @@ In the example above, the result of the render phase looks like this: After the _React Shadow Tree_ is complete, the renderer triggers a commit of the _React Element Tree_. +### Phase 2. Commit + ![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-two-commit.png) The commit phase consists of two operations: _Layout Calculation_ and _Tree Promotion_. @@ -77,7 +84,9 @@ The commit phase consists of two operations: _Layout Calculation_ and _Tree Prom - These operations are asynchronously executed on a background thread. - Majority of layout calculation executes entirely within C++. However, the layout calculation of some components depend on the _host platform_ (e.g. `Text`, `TextInput`, etc.). Size and position of text is specific to each _host platform_ and needs to be calculated on the _host platform_ layer. For this purpose, Yoga invokes a function defined in the _host platform_ to calculate the component’s layout. -![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png) +### Phase 3. Mount + +![Phase three: mount](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png) The mount phase transforms the _React Shadow Tree_ (which now contains data from layout calculation) into a _Host_ _View Tree_ with rendered pixels on the screen. As a reminder, the _React Element Tree_ looks like this: @@ -106,7 +115,7 @@ In more detail, the mounting phase consists of these three steps: --- -### React State Updates +## React State Updates Let’s explore each phase of the render pipeline when the state of a _React Element Tree_ is updated. Let’s say, you’ve rendered the following component in an initial render: @@ -189,7 +198,7 @@ After React creates the new _React Element Tree_ and _React Shadow Tree_, it mus --- -### React Native Renderer State Updates +## React Native Renderer State Updates For most information in the _Shadow Tree_, React is the single owner and single source of truth. All data originates from React and there is a single-direction flow of data. diff --git a/website/versioned_docs/version-0.66/render-pipeline.md b/website/versioned_docs/version-0.66/render-pipeline.md index cd5a74fe3fc..38166c9731e 100644 --- a/website/versioned_docs/version-0.66/render-pipeline.md +++ b/website/versioned_docs/version-0.66/render-pipeline.md @@ -19,13 +19,16 @@ The render pipeline can be broken into three general phases: The render pipeline is executed in three different scenarios: -1. [Initial Render](#initial-render) -2. [React State Updates](#react-state-updates) -3. [React Native Renderer State Updates](#react-native-renderer-state-updates) +- [Initial Render](#initial-render) + - [Phase 1. Render](#phase-1-render) + - [Phase 2. Commit](#phase-2-commit) + - [Phase 3. Mount](#phase-3-mount) +- [React State Updates](#react-state-updates) +- [React Native Renderer State Updates](#react-native-renderer-state-updates) --- -### Initial Render +## Initial Render Imagine you want to render the following: @@ -43,6 +46,8 @@ function MyComponent() { In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#host-view-tree-and-host-view) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). +### Phase 1. Render + ![Phase one: render](/docs/assets/Architecture/renderer-pipeline/phase-one-render.png) During this process of element reduction, as each _React Element_ is invoked, the renderer also synchronously creates a [React Shadow Node](architecture-glossary#react-shadow-tree-and-react-shadow-node). This happens only for _React Host Components_, not for [React Composite Components](architecture-glossary#react-composite-components). In the example above, the `` leads to the creation of a `ViewShadowNode` object, and the @@ -62,6 +67,8 @@ In the example above, the result of the render phase looks like this: After the _React Shadow Tree_ is complete, the renderer triggers a commit of the _React Element Tree_. +### Phase 2. Commit + ![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-two-commit.png) The commit phase consists of two operations: _Layout Calculation_ and _Tree Promotion_. @@ -77,7 +84,9 @@ The commit phase consists of two operations: _Layout Calculation_ and _Tree Prom - These operations are asynchronously executed on a background thread. - Majority of layout calculation executes entirely within C++. However, the layout calculation of some components depend on the _host platform_ (e.g. `Text`, `TextInput`, etc.). Size and position of text is specific to each _host platform_ and needs to be calculated on the _host platform_ layer. For this purpose, Yoga invokes a function defined in the _host platform_ to calculate the component’s layout. -![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png) +### Phase 3. Mount + +![Phase three: mount](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png) The mount phase transforms the _React Shadow Tree_ (which now contains data from layout calculation) into a _Host_ _View Tree_ with rendered pixels on the screen. As a reminder, the _React Element Tree_ looks like this: @@ -106,7 +115,7 @@ In more detail, the mounting phase consists of these three steps: --- -### React State Updates +## React State Updates Let’s explore each phase of the render pipeline when the state of a _React Element Tree_ is updated. Let’s say, you’ve rendered the following component in an initial render: @@ -189,7 +198,7 @@ After React creates the new _React Element Tree_ and _React Shadow Tree_, it mus --- -### React Native Renderer State Updates +## React Native Renderer State Updates For most information in the _Shadow Tree_, React is the single owner and single source of truth. All data originates from React and there is a single-direction flow of data. diff --git a/website/versioned_docs/version-0.67/render-pipeline.md b/website/versioned_docs/version-0.67/render-pipeline.md index cd5a74fe3fc..38166c9731e 100644 --- a/website/versioned_docs/version-0.67/render-pipeline.md +++ b/website/versioned_docs/version-0.67/render-pipeline.md @@ -19,13 +19,16 @@ The render pipeline can be broken into three general phases: The render pipeline is executed in three different scenarios: -1. [Initial Render](#initial-render) -2. [React State Updates](#react-state-updates) -3. [React Native Renderer State Updates](#react-native-renderer-state-updates) +- [Initial Render](#initial-render) + - [Phase 1. Render](#phase-1-render) + - [Phase 2. Commit](#phase-2-commit) + - [Phase 3. Mount](#phase-3-mount) +- [React State Updates](#react-state-updates) +- [React Native Renderer State Updates](#react-native-renderer-state-updates) --- -### Initial Render +## Initial Render Imagine you want to render the following: @@ -43,6 +46,8 @@ function MyComponent() { In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#host-view-tree-and-host-view) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). +### Phase 1. Render + ![Phase one: render](/docs/assets/Architecture/renderer-pipeline/phase-one-render.png) During this process of element reduction, as each _React Element_ is invoked, the renderer also synchronously creates a [React Shadow Node](architecture-glossary#react-shadow-tree-and-react-shadow-node). This happens only for _React Host Components_, not for [React Composite Components](architecture-glossary#react-composite-components). In the example above, the `` leads to the creation of a `ViewShadowNode` object, and the @@ -62,6 +67,8 @@ In the example above, the result of the render phase looks like this: After the _React Shadow Tree_ is complete, the renderer triggers a commit of the _React Element Tree_. +### Phase 2. Commit + ![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-two-commit.png) The commit phase consists of two operations: _Layout Calculation_ and _Tree Promotion_. @@ -77,7 +84,9 @@ The commit phase consists of two operations: _Layout Calculation_ and _Tree Prom - These operations are asynchronously executed on a background thread. - Majority of layout calculation executes entirely within C++. However, the layout calculation of some components depend on the _host platform_ (e.g. `Text`, `TextInput`, etc.). Size and position of text is specific to each _host platform_ and needs to be calculated on the _host platform_ layer. For this purpose, Yoga invokes a function defined in the _host platform_ to calculate the component’s layout. -![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png) +### Phase 3. Mount + +![Phase three: mount](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png) The mount phase transforms the _React Shadow Tree_ (which now contains data from layout calculation) into a _Host_ _View Tree_ with rendered pixels on the screen. As a reminder, the _React Element Tree_ looks like this: @@ -106,7 +115,7 @@ In more detail, the mounting phase consists of these three steps: --- -### React State Updates +## React State Updates Let’s explore each phase of the render pipeline when the state of a _React Element Tree_ is updated. Let’s say, you’ve rendered the following component in an initial render: @@ -189,7 +198,7 @@ After React creates the new _React Element Tree_ and _React Shadow Tree_, it mus --- -### React Native Renderer State Updates +## React Native Renderer State Updates For most information in the _Shadow Tree_, React is the single owner and single source of truth. All data originates from React and there is a single-direction flow of data. From c98c482c4f5c455659e49a0b47d2c67a08db4f11 Mon Sep 17 00:00:00 2001 From: Dmitry Vinnik Date: Wed, 2 Mar 2022 07:35:15 -0800 Subject: [PATCH 3/8] Adding Social Banner in Support of Ukraine (#2986) --- website/src/css/index.scss | 10 ++++++++++ website/src/pages/index.js | 15 +++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/website/src/css/index.scss b/website/src/css/index.scss index b00cc6b5d85..6a8b0b651ec 100644 --- a/website/src/css/index.scss +++ b/website/src/css/index.scss @@ -284,6 +284,16 @@ } } +/* Social Banner */ +.SocialBanner { + font-weight: bold; + font-size: 20px; + padding: 20px; + max-width: 768px; + margin: 0 auto; + text-align: center; +} + /* Header Hero */ .HeaderHero { diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 96ef43cecd2..a9422b2115a 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -543,6 +543,20 @@ function GetStarted() { ); } +function SocialBanner() { + return ( +
+
+ Support Ukraine 🇺🇦{' '} + + Help Provide Humanitarian Aid to Ukraine + + . +
+
+ ); +} + const useHomePageAnimations = () => { useEffect(() => setupHeaderAnimations(), []); useEffect(() => setupDissectionAnimation(), []); @@ -565,6 +579,7 @@ const Index = () => { content="React Native · Learn once, write anywhere" /> + From aed56f97bbaa412b6e093c7f8c8e9ed548ae77eb Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Thu, 3 Mar 2022 00:29:37 +0100 Subject: [PATCH 4/8] fix layout resizing when page includes wide code block (#2980) --- website/src/css/customTheme.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 8f9fac71640..99fa385dd5b 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -277,6 +277,11 @@ hr { background-color: var(--light); } + div[class^="codeBlockContent"] { + display: inline-grid; + min-width: 100%; + } + div[class^="codeBlockLines"] { font-size: 80%; } From af1484b1f0ed551e7e2d02595dce66bd404c4023 Mon Sep 17 00:00:00 2001 From: Dmitry Vinnik Date: Wed, 2 Mar 2022 19:49:52 -0800 Subject: [PATCH 5/8] docs: Moving to use Announcement Banner for the Support Ukraine Initiative (#2988) --- website/docusaurus.config.js | 8 ++++++++ website/src/css/index.scss | 10 ---------- website/src/pages/index.js | 15 --------------- 3 files changed, 8 insertions(+), 25 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 4bfaf881b2f..c66b9c2b45a 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -152,6 +152,14 @@ const lastVersion = versions[0]; themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ + announcementBar: { + id: 'support_ukraine', + content: + 'Support Ukraine 🇺🇦 Help Provide Humanitarian Aid to Ukraine.', + backgroundColor: '#20232a', + textColor: '#fff', + isCloseable: false, + }, prism: { defaultLanguage: 'jsx', theme: require('./core/PrismTheme'), diff --git a/website/src/css/index.scss b/website/src/css/index.scss index 6a8b0b651ec..b00cc6b5d85 100644 --- a/website/src/css/index.scss +++ b/website/src/css/index.scss @@ -284,16 +284,6 @@ } } -/* Social Banner */ -.SocialBanner { - font-weight: bold; - font-size: 20px; - padding: 20px; - max-width: 768px; - margin: 0 auto; - text-align: center; -} - /* Header Hero */ .HeaderHero { diff --git a/website/src/pages/index.js b/website/src/pages/index.js index a9422b2115a..96ef43cecd2 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -543,20 +543,6 @@ function GetStarted() { ); } -function SocialBanner() { - return ( -
-
- Support Ukraine 🇺🇦{' '} - - Help Provide Humanitarian Aid to Ukraine - - . -
-
- ); -} - const useHomePageAnimations = () => { useEffect(() => setupHeaderAnimations(), []); useEffect(() => setupDissectionAnimation(), []); @@ -579,7 +565,6 @@ const Index = () => { content="React Native · Learn once, write anywhere" /> - From f610ca2bd4d918718a61db65ac052b8e064dc2a0 Mon Sep 17 00:00:00 2001 From: Nicola Corti Date: Fri, 4 Mar 2022 15:59:02 +0000 Subject: [PATCH 6/8] Fix deeplink to react-host-components-or-host-components in Glossary (#2992) --- docs/render-pipeline.md | 2 +- website/versioned_docs/version-0.66/render-pipeline.md | 2 +- website/versioned_docs/version-0.67/render-pipeline.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/render-pipeline.md b/docs/render-pipeline.md index 41f7d38d326..f547a098acf 100644 --- a/docs/render-pipeline.md +++ b/docs/render-pipeline.md @@ -44,7 +44,7 @@ function MyComponent() { // ``` -In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#host-view-tree-and-host-view) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). +In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#react-host-components-or-host-components) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). ### Phase 1. Render diff --git a/website/versioned_docs/version-0.66/render-pipeline.md b/website/versioned_docs/version-0.66/render-pipeline.md index 38166c9731e..1db563dce8b 100644 --- a/website/versioned_docs/version-0.66/render-pipeline.md +++ b/website/versioned_docs/version-0.66/render-pipeline.md @@ -44,7 +44,7 @@ function MyComponent() { // ``` -In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#host-view-tree-and-host-view) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). +In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#react-host-components-or-host-components) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). ### Phase 1. Render diff --git a/website/versioned_docs/version-0.67/render-pipeline.md b/website/versioned_docs/version-0.67/render-pipeline.md index 38166c9731e..1db563dce8b 100644 --- a/website/versioned_docs/version-0.67/render-pipeline.md +++ b/website/versioned_docs/version-0.67/render-pipeline.md @@ -44,7 +44,7 @@ function MyComponent() { // ``` -In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#host-view-tree-and-host-view) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). +In the example above, `` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#react-host-components-or-host-components) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components). ### Phase 1. Render From 49aadfcbad0d60f9cbbdaa6e415687e84ca3a783 Mon Sep 17 00:00:00 2001 From: Samuel Susla Date: Tue, 8 Mar 2022 12:42:58 +0000 Subject: [PATCH 7/8] Clarify intended audience for architecture overview (#2995) --- docs/architecture-overview.md | 2 +- website/versioned_docs/version-0.67/architecture-overview.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/architecture-overview.md b/docs/architecture-overview.md index 0b22e32564a..a29e48b2475 100644 --- a/docs/architecture-overview.md +++ b/docs/architecture-overview.md @@ -3,4 +3,4 @@ id: architecture-overview title: Architecture Overview --- -This section is a work in progress intended to share conceptual overviews of how React Native's architecture works. Its intended audience includes library authors, core contributors, and the exceptionally curious. +This section is a work in progress intended to share conceptual overviews of how React Native's architecture works. Its intended audience includes library authors, core contributors, and the exceptionally curious. It is not a requirement to be familiar with this material to use React Native. diff --git a/website/versioned_docs/version-0.67/architecture-overview.md b/website/versioned_docs/version-0.67/architecture-overview.md index 0b22e32564a..a29e48b2475 100644 --- a/website/versioned_docs/version-0.67/architecture-overview.md +++ b/website/versioned_docs/version-0.67/architecture-overview.md @@ -3,4 +3,4 @@ id: architecture-overview title: Architecture Overview --- -This section is a work in progress intended to share conceptual overviews of how React Native's architecture works. Its intended audience includes library authors, core contributors, and the exceptionally curious. +This section is a work in progress intended to share conceptual overviews of how React Native's architecture works. Its intended audience includes library authors, core contributors, and the exceptionally curious. It is not a requirement to be familiar with this material to use React Native. From 1dfbf19a877cbf1e182d8f53c27435074aafe1f1 Mon Sep 17 00:00:00 2001 From: zegermouw Date: Tue, 8 Mar 2022 16:12:36 +0100 Subject: [PATCH 8/8] changed android_hyphenation for 0.67+ (#2982) --- docs/text.md | 6 +++--- website/versioned_docs/version-0.67/text.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/text.md b/docs/text.md index 391d6befbf6..ac30e1752bb 100644 --- a/docs/text.md +++ b/docs/text.md @@ -358,9 +358,9 @@ Specifies whether fonts should scale to respect Text Size accessibility settings Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+. -| Type | Default | -| ------------------------------------------------ | -------- | -| enum(`'none'`, `'full'`, `'balanced'`, `'high'`) | `'none'` | +| Type | Default | +| ------------------------ | -------- | +| enum(`'none'`, `'full'`) | `'none'` | --- diff --git a/website/versioned_docs/version-0.67/text.md b/website/versioned_docs/version-0.67/text.md index 391d6befbf6..ac30e1752bb 100644 --- a/website/versioned_docs/version-0.67/text.md +++ b/website/versioned_docs/version-0.67/text.md @@ -358,9 +358,9 @@ Specifies whether fonts should scale to respect Text Size accessibility settings Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+. -| Type | Default | -| ------------------------------------------------ | -------- | -| enum(`'none'`, `'full'`, `'balanced'`, `'high'`) | `'none'` | +| Type | Default | +| ------------------------ | -------- | +| enum(`'none'`, `'full'`) | `'none'` | ---