Upgrade React-Native website to Docusaurus v3

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" />
+<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/introduction.md

@@ -7,9 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <div className="content-banner">
- <p>
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
- </p>
+ Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 

plugins/remark-snackplayer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@react-native-website/remark-snackplayer",
- "version": "0.0.7",
+ "version": "0.1.0",
  "private": true,
  "description": "Remark Expo Snack Plugin",
  "main": "src/index.js",
@@ -21,7 +21,6 @@
  "dependencies": {
  "dedent": "^0.7.0",
  "object.fromentries": "^2.0.3",
- "unist-builder": "^2.0.3",
  "unist-util-visit-parents": "^3.1.1"
  },
  "devDependencies": {

plugins/remark-snackplayer/src/index.js

@@ -8,8 +8,6 @@
 'use strict';
 
 const visit = require('unist-util-visit-parents');
-const u = require('unist-builder');
-const dedent = require('dedent');
 const fromEntries = require('object.fromentries');
 
 const parseParams = (paramString = '') => {
@@ -22,81 +20,79 @@ const parseParams = (paramString = '') => {
  return params;
 };
 
-const processNode = (node, parent) => {
- return new Promise(async (resolve, reject) => {
- try {
- const params = parseParams(node.meta);
+function attr(name, value) {
+ return {
+ type: 'mdxJsxAttribute',
+ name,
+ value,
+ };
+}
 
- // Gather necessary Params
- const name = params.name ? decodeURIComponent(params.name) : 'Example';
- const description = params.description
- ? decodeURIComponent(params.description)
- : 'Example usage';
- const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
- const filename = `App.${ext}`;
- const files = encodeURIComponent(
- JSON.stringify({
- [filename]: {
- type: 'CODE',
- contents: node.value,
- },
- })
- );
- const dependencies = params.dependencies || '';
- const platform = params.platform || 'web';
- const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
- const theme = params.theme || 'light';
- const preview = params.preview || 'true';
- const loading = params.loading || 'lazy';
- const deviceAndroid = params.deviceAndroid || 'pixel4';
- const deviceIos = params.deviceIos || 'iphone12';
+async function toJsxNode(node) {
+ const params = parseParams(node.meta);
 
- // Generate Node for SnackPlayer
- // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
- const snackPlayerDiv = u('html', {
- value: dedent`
- <div
- class="snack-player"
- data-snack-name="${name}"
- data-snack-description="${description}"
- data-snack-files="${files}"
- data-snack-dependencies="${dependencies}"
- data-snack-platform="${platform}"
- data-snack-supported-platforms="${supportedPlatforms}"
- data-snack-theme="${theme}"
- data-snack-preview="${preview}"
- data-snack-loading="${loading}"
- data-snack-device-android="${deviceAndroid}"
- data-snack-device-ios="${deviceIos}"
- ></div>
- `,
- });
+ // Gather necessary Params
+ const name = params.name ? decodeURIComponent(params.name) : 'Example';
+ const description = params.description
+ ? decodeURIComponent(params.description)
+ : 'Example usage';
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
+ const dependencies = params.dependencies || '';
+ const platform = params.platform || 'web';
+ const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
+ const theme = params.theme || 'light';
+ const preview = params.preview || 'true';
+ const loading = params.loading || 'lazy';
+ const deviceAndroid = params.deviceAndroid || 'pixel4';
+ const deviceIos = params.deviceIos || 'iphone12';
 
- // Replace code block with SnackPlayer Node
- const index = parent[0].children.indexOf(node);
- parent[0].children.splice(index, 1, snackPlayerDiv);
- } catch (e) {
- return reject(e);
- }
- resolve();
- });
-};
+ // Need help constructing this AST node?
+ // Use the MDX Playground and explore what your output mdast should look like
+ // https://mdxjs.com/playground/
+ const jsxNode = {
+ type: 'mdxJsxTextElement',
+ name: 'div',
+ attributes: [
+ attr('class', 'snack-player'),
+ attr('data-snack-name', name),
+ attr('data-snack-description', description),
+ attr('data-snack-files', files),
+ attr('data-snack-dependencies', dependencies),
+ attr('data-snack-platform', platform),
+ attr('data-snack-supported-platforms', supportedPlatforms),
+ attr('data-snack-theme', theme),
+ attr('data-snack-preview', preview),
+ attr('data-snack-loading', loading),
+ attr('data-snack-device-android', deviceAndroid),
+ attr('data-snack-device-ios', deviceIos),
+ ],
+ children: [],
+ };
 
-const SnackPlayer = () => {
- return tree =>
- new Promise(async (resolve, reject) => {
- const nodesToProcess = [];
- // Parse all CodeBlocks
- visit(tree, 'code', (node, parent) => {
- // Add SnackPlayer CodeBlocks to processing queue
- if (node.lang == 'SnackPlayer') {
- nodesToProcess.push(processNode(node, parent));
- }
- });
+ // We "replace" the current node by a JSX node
+ Object.keys(node).forEach(key => delete node[key]);
+ Object.keys(jsxNode).forEach(key => (node[key] = jsxNode[key]));
+}
 
- // Wait for all promises to be resolved
- Promise.all(nodesToProcess).then(resolve()).catch(reject());
+const SnackPlayer = () => {
+ return async tree => {
+ const nodesToProcess = [];
+ visit(tree, 'code', (node, parent) => {
+ if (node.lang === 'SnackPlayer') {
+ nodesToProcess.push(toJsxNode(node, parent));
+ }
  });
+ await Promise.all(nodesToProcess);
+ };
 };
 
 module.exports = SnackPlayer;

website/blog/2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md

@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som
 <footer>
  <a
  href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

website/blog/2015-09-14-react-native-for-android.md

@@ -15,9 +15,7 @@ At Facebook we've been using React Native in production for over a year now. Alm
 <footer>
  <a
  href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

website/blog/2015-11-23-making-react-native-apps-accessible.md

@@ -21,9 +21,7 @@ Let's walk through a slightly more involved application of the React AX API by l
 <footer>
  <a
  href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

website/blog/2016-03-28-dive-into-react-native-performance.md

@@ -19,9 +19,7 @@ Since releasing React Native on [iOS](https://reactjs.org/blog/2015/03/26/introd
 <footer>
  <a
  href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

website/blog/2016-04-13-react-native-a-year-in-review.md

@@ -16,9 +16,7 @@ It's been an epic ride — but we are only getting started. Here is a look back
 <footer>
  <a
  href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

website/blog/2018-03-05-AWS-app-sync.md

@@ -94,7 +94,7 @@ return <S3Album track/>
 
 AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources.
 
-For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
+For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
 
 ## AWS AppSync
 

website/blog/2019-06-12-react-native-open-source-update.md

@@ -26,7 +26,7 @@ We’d like to highlight a number of recent contributions which we thought were
  - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._
  - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS.
 - **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration!
- - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series.
+ - Check out the new app screen on the “_[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)_“ video series.
 - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests.
 - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more.
 - **Android Fragments:** [John Shelley](https://github.com/jpshelley)‘s proposal to make React Native work via [Android Fragments](https://github.com/facebook/react-native/pull/12199) was merged and will be available in 0.61. [Read more about Android Fragments here](https://developer.android.com/guide/components/fragments).

website/core/DocsRating.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 const DocsRating = ({label}) => {
- if (!ExecutionEnvironment.canUseDOM) {
+ const isBrowser = useIsBrowser();
+ if (!isBrowser) {
  return null;
  }
 

website/docusaurus.config.js

@@ -20,6 +20,8 @@ const commonDocsOptions = {
  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
 };
 
+const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
  title: 'React Native',
@@ -74,10 +76,9 @@ module.exports = {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.json'),
  editCurrentVersion: true,
- onlyIncludeVersions:
- process.env.PREVIEW_DEPLOY === 'true'
- ? ['current', ...versions.slice(0, 2)]
- : undefined,
+ onlyIncludeVersions: isDeployPreview
+ ? ['current', ...versions.slice(0, 2)]
+ : undefined,
  versions: {
  [lastVersion]: {
  badge: false, // Do not show version badge for last RN version

website/package.json

@@ -48,10 +48,10 @@
  ]
  },
  "dependencies": {
- "@docusaurus/core": "^2.4.1",
- "@docusaurus/plugin-google-gtag": "^2.4.1",
- "@docusaurus/plugin-pwa": "^2.4.1",
- "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/core": "0.0.0-5658",
+ "@docusaurus/plugin-google-gtag": "0.0.0-5658",
+ "@docusaurus/plugin-pwa": "0.0.0-5658",
+ "@docusaurus/preset-classic": "0.0.0-5658",
  "docusaurus-plugin-sass": "^0.2.2",
  "esbuild-loader": "^2.19.0",
  "react": "^18.2.0",
@@ -60,7 +60,7 @@
  "sass": "^1.53.0"
  },
  "devDependencies": {
- "@docusaurus/types": "^2.4.1",
+ "@docusaurus/types": "0.0.0-5658",
  "@react-native-website/lint-examples": "0.0.0",
  "@react-native-website/update-redirects": "0.0.0",
  "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -116,7 +116,7 @@ html[data-theme="dark"] {
  align-self: center;
  font-weight: 300;
 
- div[class*="docPage"] {
+ div[class*="docRoot"] {
  justify-content: center;
  }
 
@@ -387,10 +387,10 @@ html[data-theme="dark"] {
  }
 }
 
-div[class^="docPage"] .hash-link,
+div[class^="docRoot"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-html[data-theme="dark"] div[class^="docPage"] .hash-link,
+html[data-theme="dark"] div[class^="docRoot"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
 html[data-theme="dark"].mdx-page .hash-link {
  @extend %hash-link-style;
@@ -1865,3 +1865,13 @@ html[data-theme="light"].blog-wrapper {
  }
  }
 }
+
+/*
+Prevent useless bottom margin for multiline <figcaption> tags in MDX:
+<figcaption>
+ some paragraph text
+</figcaption>
+ */
+figcaption > p:last-child {
+ margin-bottom: 0;
+}

website/src/theme/MDXComponents/Code.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import InlineCode from './InlineCode';
+
+export default function MDXCode(props) {
+ const shouldBeInline = React.Children.toArray(props.children).every(
+ el => typeof el === 'string' && !el.includes('\n')
+ );
+
+ return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />;
+}

website/src/theme/MDXComponents/InlineCode.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
+// Note: this component is a custom React-Native-Website feature
+
 const MarkdownInlineCodePrefix = 'md ';
 
 export default function InlineCode(props) {

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" />
+<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/introduction.md

@@ -7,9 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <div className="content-banner">
- <p>
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
- </p>
+ Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 

plugins/remark-snackplayer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@react-native-website/remark-snackplayer",
- "version": "0.0.7",
+ "version": "0.1.0",
  "private": true,
  "description": "Remark Expo Snack Plugin",
  "main": "src/index.js",
@@ -21,7 +21,6 @@
  "dependencies": {
  "dedent": "^0.7.0",
  "object.fromentries": "^2.0.3",
- "unist-builder": "^2.0.3",
  "unist-util-visit-parents": "^3.1.1"
  },
  "devDependencies": {

plugins/remark-snackplayer/src/index.js

@@ -8,8 +8,6 @@
 'use strict';
 
 const visit = require('unist-util-visit-parents');
-const u = require('unist-builder');
-const dedent = require('dedent');
 const fromEntries = require('object.fromentries');
 
 const parseParams = (paramString = '') => {
@@ -22,81 +20,79 @@ const parseParams = (paramString = '') => {
  return params;
 };
 
-const processNode = (node, parent) => {
- return new Promise(async (resolve, reject) => {
- try {
- const params = parseParams(node.meta);
+function attr(name, value) {
+ return {
+ type: 'mdxJsxAttribute',
+ name,
+ value,
+ };
+}
 
- // Gather necessary Params
- const name = params.name ? decodeURIComponent(params.name) : 'Example';
- const description = params.description
- ? decodeURIComponent(params.description)
- : 'Example usage';
- const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
- const filename = `App.${ext}`;
- const files = encodeURIComponent(
- JSON.stringify({
- [filename]: {
- type: 'CODE',
- contents: node.value,
- },
- })
- );
- const dependencies = params.dependencies || '';
- const platform = params.platform || 'web';
- const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
- const theme = params.theme || 'light';
- const preview = params.preview || 'true';
- const loading = params.loading || 'lazy';
- const deviceAndroid = params.deviceAndroid || 'pixel4';
- const deviceIos = params.deviceIos || 'iphone12';
+async function toJsxNode(node) {
+ const params = parseParams(node.meta);
 
- // Generate Node for SnackPlayer
- // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
- const snackPlayerDiv = u('html', {
- value: dedent`
- <div
- class="snack-player"
- data-snack-name="${name}"
- data-snack-description="${description}"
- data-snack-files="${files}"
- data-snack-dependencies="${dependencies}"
- data-snack-platform="${platform}"
- data-snack-supported-platforms="${supportedPlatforms}"
- data-snack-theme="${theme}"
- data-snack-preview="${preview}"
- data-snack-loading="${loading}"
- data-snack-device-android="${deviceAndroid}"
- data-snack-device-ios="${deviceIos}"
- ></div>
- `,
- });
+ // Gather necessary Params
+ const name = params.name ? decodeURIComponent(params.name) : 'Example';
+ const description = params.description
+ ? decodeURIComponent(params.description)
+ : 'Example usage';
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
+ const dependencies = params.dependencies || '';
+ const platform = params.platform || 'web';
+ const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
+ const theme = params.theme || 'light';
+ const preview = params.preview || 'true';
+ const loading = params.loading || 'lazy';
+ const deviceAndroid = params.deviceAndroid || 'pixel4';
+ const deviceIos = params.deviceIos || 'iphone12';
 
- // Replace code block with SnackPlayer Node
- const index = parent[0].children.indexOf(node);
- parent[0].children.splice(index, 1, snackPlayerDiv);
- } catch (e) {
- return reject(e);
- }
- resolve();
- });
-};
+ // Need help constructing this AST node?
+ // Use the MDX Playground and explore what your output mdast should look like
+ // https://mdxjs.com/playground/
+ const jsxNode = {
+ type: 'mdxJsxTextElement',
+ name: 'div',
+ attributes: [
+ attr('class', 'snack-player'),
+ attr('data-snack-name', name),
+ attr('data-snack-description', description),
+ attr('data-snack-files', files),
+ attr('data-snack-dependencies', dependencies),
+ attr('data-snack-platform', platform),
+ attr('data-snack-supported-platforms', supportedPlatforms),
+ attr('data-snack-theme', theme),
+ attr('data-snack-preview', preview),
+ attr('data-snack-loading', loading),
+ attr('data-snack-device-android', deviceAndroid),
+ attr('data-snack-device-ios', deviceIos),
+ ],
+ children: [],
+ };
 
-const SnackPlayer = () => {
- return tree =>
- new Promise(async (resolve, reject) => {
- const nodesToProcess = [];
- // Parse all CodeBlocks
- visit(tree, 'code', (node, parent) => {
- // Add SnackPlayer CodeBlocks to processing queue
- if (node.lang == 'SnackPlayer') {
- nodesToProcess.push(processNode(node, parent));
- }
- });
+ // We "replace" the current node by a JSX node
+ Object.keys(node).forEach(key => delete node[key]);
+ Object.keys(jsxNode).forEach(key => (node[key] = jsxNode[key]));
+}
 
- // Wait for all promises to be resolved
- Promise.all(nodesToProcess).then(resolve()).catch(reject());
+const SnackPlayer = () => {
+ return async tree => {
+ const nodesToProcess = [];
+ visit(tree, 'code', (node, parent) => {
+ if (node.lang === 'SnackPlayer') {
+ nodesToProcess.push(toJsxNode(node, parent));
+ }
  });
+ await Promise.all(nodesToProcess);
+ };
 };
 
 module.exports = SnackPlayer;

website/blog/2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md

@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som
 <footer>
  <a
  href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

website/blog/2015-09-14-react-native-for-android.md

@@ -15,9 +15,7 @@ At Facebook we've been using React Native in production for over a year now. Alm
 <footer>
  <a
  href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

website/blog/2015-11-23-making-react-native-apps-accessible.md

@@ -21,9 +21,7 @@ Let's walk through a slightly more involved application of the React AX API by l
 <footer>
  <a
  href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

website/blog/2016-03-28-dive-into-react-native-performance.md

@@ -19,9 +19,7 @@ Since releasing React Native on [iOS](https://reactjs.org/blog/2015/03/26/introd
 <footer>
  <a
  href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

website/blog/2016-04-13-react-native-a-year-in-review.md

@@ -16,9 +16,7 @@ It's been an epic ride — but we are only getting started. Here is a look back
 <footer>
  <a
  href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

website/blog/2018-03-05-AWS-app-sync.md

@@ -94,7 +94,7 @@ return <S3Album track/>
 
 AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources.
 
-For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
+For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
 
 ## AWS AppSync
 

website/blog/2019-06-12-react-native-open-source-update.md

@@ -26,7 +26,7 @@ We’d like to highlight a number of recent contributions which we thought were
  - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._
  - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS.
 - **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration!
- - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series.
+ - Check out the new app screen on the “_[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)_“ video series.
 - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests.
 - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more.
 - **Android Fragments:** [John Shelley](https://github.com/jpshelley)‘s proposal to make React Native work via [Android Fragments](https://github.com/facebook/react-native/pull/12199) was merged and will be available in 0.61. [Read more about Android Fragments here](https://developer.android.com/guide/components/fragments).

website/core/DocsRating.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 const DocsRating = ({label}) => {
- if (!ExecutionEnvironment.canUseDOM) {
+ const isBrowser = useIsBrowser();
+ if (!isBrowser) {
  return null;
  }
 

website/docusaurus.config.js

@@ -20,6 +20,8 @@ const commonDocsOptions = {
  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
 };
 
+const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
  title: 'React Native',
@@ -74,10 +76,9 @@ module.exports = {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.json'),
  editCurrentVersion: true,
- onlyIncludeVersions:
- process.env.PREVIEW_DEPLOY === 'true'
- ? ['current', ...versions.slice(0, 2)]
- : undefined,
+ onlyIncludeVersions: isDeployPreview
+ ? ['current', ...versions.slice(0, 2)]
+ : undefined,
  versions: {
  [lastVersion]: {
  badge: false, // Do not show version badge for last RN version

website/package.json

@@ -48,10 +48,10 @@
  ]
  },
  "dependencies": {
- "@docusaurus/core": "^2.4.1",
- "@docusaurus/plugin-google-gtag": "^2.4.1",
- "@docusaurus/plugin-pwa": "^2.4.1",
- "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/core": "0.0.0-5658",
+ "@docusaurus/plugin-google-gtag": "0.0.0-5658",
+ "@docusaurus/plugin-pwa": "0.0.0-5658",
+ "@docusaurus/preset-classic": "0.0.0-5658",
  "docusaurus-plugin-sass": "^0.2.2",
  "esbuild-loader": "^2.19.0",
  "react": "^18.2.0",
@@ -60,7 +60,7 @@
  "sass": "^1.53.0"
  },
  "devDependencies": {
- "@docusaurus/types": "^2.4.1",
+ "@docusaurus/types": "0.0.0-5658",
  "@react-native-website/lint-examples": "0.0.0",
  "@react-native-website/update-redirects": "0.0.0",
  "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -116,7 +116,7 @@ html[data-theme="dark"] {
  align-self: center;
  font-weight: 300;
 
- div[class*="docPage"] {
+ div[class*="docRoot"] {
  justify-content: center;
  }
 
@@ -387,10 +387,10 @@ html[data-theme="dark"] {
  }
 }
 
-div[class^="docPage"] .hash-link,
+div[class^="docRoot"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-html[data-theme="dark"] div[class^="docPage"] .hash-link,
+html[data-theme="dark"] div[class^="docRoot"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
 html[data-theme="dark"].mdx-page .hash-link {
  @extend %hash-link-style;
@@ -1865,3 +1865,13 @@ html[data-theme="light"].blog-wrapper {
  }
  }
 }
+
+/*
+Prevent useless bottom margin for multiline <figcaption> tags in MDX:
+<figcaption>
+ some paragraph text
+</figcaption>
+ */
+figcaption > p:last-child {
+ margin-bottom: 0;
+}

website/src/theme/MDXComponents/Code.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import InlineCode from './InlineCode';
+
+export default function MDXCode(props) {
+ const shouldBeInline = React.Children.toArray(props.children).every(
+ el => typeof el === 'string' && !el.includes('\n')
+ );
+
+ return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />;
+}

website/src/theme/MDXComponents/InlineCode.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
+// Note: this component is a custom React-Native-Website feature
+
 const MarkdownInlineCodePrefix = 'md ';
 
 export default function InlineCode(props) {

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" />
+<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/introduction.md

@@ -7,9 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <div className="content-banner">
- <p>
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
- </p>
+ Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 

plugins/remark-snackplayer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@react-native-website/remark-snackplayer",
- "version": "0.0.7",
+ "version": "0.1.0",
  "private": true,
  "description": "Remark Expo Snack Plugin",
  "main": "src/index.js",
@@ -21,7 +21,6 @@
  "dependencies": {
  "dedent": "^0.7.0",
  "object.fromentries": "^2.0.3",
- "unist-builder": "^2.0.3",
  "unist-util-visit-parents": "^3.1.1"
  },
  "devDependencies": {

plugins/remark-snackplayer/src/index.js

@@ -8,8 +8,6 @@
 'use strict';
 
 const visit = require('unist-util-visit-parents');
-const u = require('unist-builder');
-const dedent = require('dedent');
 const fromEntries = require('object.fromentries');
 
 const parseParams = (paramString = '') => {
@@ -22,81 +20,79 @@ const parseParams = (paramString = '') => {
  return params;
 };
 
-const processNode = (node, parent) => {
- return new Promise(async (resolve, reject) => {
- try {
- const params = parseParams(node.meta);
+function attr(name, value) {
+ return {
+ type: 'mdxJsxAttribute',
+ name,
+ value,
+ };
+}
 
- // Gather necessary Params
- const name = params.name ? decodeURIComponent(params.name) : 'Example';
- const description = params.description
- ? decodeURIComponent(params.description)
- : 'Example usage';
- const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
- const filename = `App.${ext}`;
- const files = encodeURIComponent(
- JSON.stringify({
- [filename]: {
- type: 'CODE',
- contents: node.value,
- },
- })
- );
- const dependencies = params.dependencies || '';
- const platform = params.platform || 'web';
- const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
- const theme = params.theme || 'light';
- const preview = params.preview || 'true';
- const loading = params.loading || 'lazy';
- const deviceAndroid = params.deviceAndroid || 'pixel4';
- const deviceIos = params.deviceIos || 'iphone12';
+async function toJsxNode(node) {
+ const params = parseParams(node.meta);
 
- // Generate Node for SnackPlayer
- // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
- const snackPlayerDiv = u('html', {
- value: dedent`
- <div
- class="snack-player"
- data-snack-name="${name}"
- data-snack-description="${description}"
- data-snack-files="${files}"
- data-snack-dependencies="${dependencies}"
- data-snack-platform="${platform}"
- data-snack-supported-platforms="${supportedPlatforms}"
- data-snack-theme="${theme}"
- data-snack-preview="${preview}"
- data-snack-loading="${loading}"
- data-snack-device-android="${deviceAndroid}"
- data-snack-device-ios="${deviceIos}"
- ></div>
- `,
- });
+ // Gather necessary Params
+ const name = params.name ? decodeURIComponent(params.name) : 'Example';
+ const description = params.description
+ ? decodeURIComponent(params.description)
+ : 'Example usage';
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
+ const dependencies = params.dependencies || '';
+ const platform = params.platform || 'web';
+ const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
+ const theme = params.theme || 'light';
+ const preview = params.preview || 'true';
+ const loading = params.loading || 'lazy';
+ const deviceAndroid = params.deviceAndroid || 'pixel4';
+ const deviceIos = params.deviceIos || 'iphone12';
 
- // Replace code block with SnackPlayer Node
- const index = parent[0].children.indexOf(node);
- parent[0].children.splice(index, 1, snackPlayerDiv);
- } catch (e) {
- return reject(e);
- }
- resolve();
- });
-};
+ // Need help constructing this AST node?
+ // Use the MDX Playground and explore what your output mdast should look like
+ // https://mdxjs.com/playground/
+ const jsxNode = {
+ type: 'mdxJsxTextElement',
+ name: 'div',
+ attributes: [
+ attr('class', 'snack-player'),
+ attr('data-snack-name', name),
+ attr('data-snack-description', description),
+ attr('data-snack-files', files),
+ attr('data-snack-dependencies', dependencies),
+ attr('data-snack-platform', platform),
+ attr('data-snack-supported-platforms', supportedPlatforms),
+ attr('data-snack-theme', theme),
+ attr('data-snack-preview', preview),
+ attr('data-snack-loading', loading),
+ attr('data-snack-device-android', deviceAndroid),
+ attr('data-snack-device-ios', deviceIos),
+ ],
+ children: [],
+ };
 
-const SnackPlayer = () => {
- return tree =>
- new Promise(async (resolve, reject) => {
- const nodesToProcess = [];
- // Parse all CodeBlocks
- visit(tree, 'code', (node, parent) => {
- // Add SnackPlayer CodeBlocks to processing queue
- if (node.lang == 'SnackPlayer') {
- nodesToProcess.push(processNode(node, parent));
- }
- });
+ // We "replace" the current node by a JSX node
+ Object.keys(node).forEach(key => delete node[key]);
+ Object.keys(jsxNode).forEach(key => (node[key] = jsxNode[key]));
+}
 
- // Wait for all promises to be resolved
- Promise.all(nodesToProcess).then(resolve()).catch(reject());
+const SnackPlayer = () => {
+ return async tree => {
+ const nodesToProcess = [];
+ visit(tree, 'code', (node, parent) => {
+ if (node.lang === 'SnackPlayer') {
+ nodesToProcess.push(toJsxNode(node, parent));
+ }
  });
+ await Promise.all(nodesToProcess);
+ };
 };
 
 module.exports = SnackPlayer;

website/blog/2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md

@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som
 <footer>
  <a
  href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

website/blog/2015-09-14-react-native-for-android.md

@@ -15,9 +15,7 @@ At Facebook we've been using React Native in production for over a year now. Alm
 <footer>
  <a
  href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

website/blog/2015-11-23-making-react-native-apps-accessible.md

@@ -21,9 +21,7 @@ Let's walk through a slightly more involved application of the React AX API by l
 <footer>
  <a
  href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

website/blog/2016-03-28-dive-into-react-native-performance.md

@@ -19,9 +19,7 @@ Since releasing React Native on [iOS](https://reactjs.org/blog/2015/03/26/introd
 <footer>
  <a
  href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

website/blog/2016-04-13-react-native-a-year-in-review.md

@@ -16,9 +16,7 @@ It's been an epic ride — but we are only getting started. Here is a look back
 <footer>
  <a
  href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

website/blog/2018-03-05-AWS-app-sync.md

@@ -94,7 +94,7 @@ return <S3Album track/>
 
 AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources.
 
-For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
+For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
 
 ## AWS AppSync
 

website/blog/2019-06-12-react-native-open-source-update.md

@@ -26,7 +26,7 @@ We’d like to highlight a number of recent contributions which we thought were
  - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._
  - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS.
 - **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration!
- - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series.
+ - Check out the new app screen on the “_[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)_“ video series.
 - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests.
 - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more.
 - **Android Fragments:** [John Shelley](https://github.com/jpshelley)‘s proposal to make React Native work via [Android Fragments](https://github.com/facebook/react-native/pull/12199) was merged and will be available in 0.61. [Read more about Android Fragments here](https://developer.android.com/guide/components/fragments).

website/core/DocsRating.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 const DocsRating = ({label}) => {
- if (!ExecutionEnvironment.canUseDOM) {
+ const isBrowser = useIsBrowser();
+ if (!isBrowser) {
  return null;
  }
 

website/docusaurus.config.js

@@ -20,6 +20,8 @@ const commonDocsOptions = {
  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
 };
 
+const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
  title: 'React Native',
@@ -74,10 +76,9 @@ module.exports = {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.json'),
  editCurrentVersion: true,
- onlyIncludeVersions:
- process.env.PREVIEW_DEPLOY === 'true'
- ? ['current', ...versions.slice(0, 2)]
- : undefined,
+ onlyIncludeVersions: isDeployPreview
+ ? ['current', ...versions.slice(0, 2)]
+ : undefined,
  versions: {
  [lastVersion]: {
  badge: false, // Do not show version badge for last RN version

website/package.json

@@ -48,10 +48,10 @@
  ]
  },
  "dependencies": {
- "@docusaurus/core": "^2.4.1",
- "@docusaurus/plugin-google-gtag": "^2.4.1",
- "@docusaurus/plugin-pwa": "^2.4.1",
- "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/core": "0.0.0-5658",
+ "@docusaurus/plugin-google-gtag": "0.0.0-5658",
+ "@docusaurus/plugin-pwa": "0.0.0-5658",
+ "@docusaurus/preset-classic": "0.0.0-5658",
  "docusaurus-plugin-sass": "^0.2.2",
  "esbuild-loader": "^2.19.0",
  "react": "^18.2.0",
@@ -60,7 +60,7 @@
  "sass": "^1.53.0"
  },
  "devDependencies": {
- "@docusaurus/types": "^2.4.1",
+ "@docusaurus/types": "0.0.0-5658",
  "@react-native-website/lint-examples": "0.0.0",
  "@react-native-website/update-redirects": "0.0.0",
  "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -116,7 +116,7 @@ html[data-theme="dark"] {
  align-self: center;
  font-weight: 300;
 
- div[class*="docPage"] {
+ div[class*="docRoot"] {
  justify-content: center;
  }
 
@@ -387,10 +387,10 @@ html[data-theme="dark"] {
  }
 }
 
-div[class^="docPage"] .hash-link,
+div[class^="docRoot"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-html[data-theme="dark"] div[class^="docPage"] .hash-link,
+html[data-theme="dark"] div[class^="docRoot"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
 html[data-theme="dark"].mdx-page .hash-link {
  @extend %hash-link-style;
@@ -1865,3 +1865,13 @@ html[data-theme="light"].blog-wrapper {
  }
  }
 }
+
+/*
+Prevent useless bottom margin for multiline <figcaption> tags in MDX:
+<figcaption>
+ some paragraph text
+</figcaption>
+ */
+figcaption > p:last-child {
+ margin-bottom: 0;
+}

website/src/theme/MDXComponents/Code.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import InlineCode from './InlineCode';
+
+export default function MDXCode(props) {
+ const shouldBeInline = React.Children.toArray(props.children).every(
+ el => typeof el === 'string' && !el.includes('\n')
+ );
+
+ return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />;
+}

website/src/theme/MDXComponents/InlineCode.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
+// Note: this component is a custom React-Native-Website feature
+
 const MarkdownInlineCodePrefix = 'md ';
 
 export default function InlineCode(props) {

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" />
+<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/introduction.md

@@ -7,9 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <div className="content-banner">
- <p>
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
- </p>
+ Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 

plugins/remark-snackplayer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@react-native-website/remark-snackplayer",
- "version": "0.0.7",
+ "version": "0.1.0",
  "private": true,
  "description": "Remark Expo Snack Plugin",
  "main": "src/index.js",
@@ -21,7 +21,6 @@
  "dependencies": {
  "dedent": "^0.7.0",
  "object.fromentries": "^2.0.3",
- "unist-builder": "^2.0.3",
  "unist-util-visit-parents": "^3.1.1"
  },
  "devDependencies": {

plugins/remark-snackplayer/src/index.js

@@ -8,8 +8,6 @@
 'use strict';
 
 const visit = require('unist-util-visit-parents');
-const u = require('unist-builder');
-const dedent = require('dedent');
 const fromEntries = require('object.fromentries');
 
 const parseParams = (paramString = '') => {
@@ -22,81 +20,79 @@ const parseParams = (paramString = '') => {
  return params;
 };
 
-const processNode = (node, parent) => {
- return new Promise(async (resolve, reject) => {
- try {
- const params = parseParams(node.meta);
+function attr(name, value) {
+ return {
+ type: 'mdxJsxAttribute',
+ name,
+ value,
+ };
+}
 
- // Gather necessary Params
- const name = params.name ? decodeURIComponent(params.name) : 'Example';
- const description = params.description
- ? decodeURIComponent(params.description)
- : 'Example usage';
- const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
- const filename = `App.${ext}`;
- const files = encodeURIComponent(
- JSON.stringify({
- [filename]: {
- type: 'CODE',
- contents: node.value,
- },
- })
- );
- const dependencies = params.dependencies || '';
- const platform = params.platform || 'web';
- const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
- const theme = params.theme || 'light';
- const preview = params.preview || 'true';
- const loading = params.loading || 'lazy';
- const deviceAndroid = params.deviceAndroid || 'pixel4';
- const deviceIos = params.deviceIos || 'iphone12';
+async function toJsxNode(node) {
+ const params = parseParams(node.meta);
 
- // Generate Node for SnackPlayer
- // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
- const snackPlayerDiv = u('html', {
- value: dedent`
- <div
- class="snack-player"
- data-snack-name="${name}"
- data-snack-description="${description}"
- data-snack-files="${files}"
- data-snack-dependencies="${dependencies}"
- data-snack-platform="${platform}"
- data-snack-supported-platforms="${supportedPlatforms}"
- data-snack-theme="${theme}"
- data-snack-preview="${preview}"
- data-snack-loading="${loading}"
- data-snack-device-android="${deviceAndroid}"
- data-snack-device-ios="${deviceIos}"
- ></div>
- `,
- });
+ // Gather necessary Params
+ const name = params.name ? decodeURIComponent(params.name) : 'Example';
+ const description = params.description
+ ? decodeURIComponent(params.description)
+ : 'Example usage';
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
+ const dependencies = params.dependencies || '';
+ const platform = params.platform || 'web';
+ const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
+ const theme = params.theme || 'light';
+ const preview = params.preview || 'true';
+ const loading = params.loading || 'lazy';
+ const deviceAndroid = params.deviceAndroid || 'pixel4';
+ const deviceIos = params.deviceIos || 'iphone12';
 
- // Replace code block with SnackPlayer Node
- const index = parent[0].children.indexOf(node);
- parent[0].children.splice(index, 1, snackPlayerDiv);
- } catch (e) {
- return reject(e);
- }
- resolve();
- });
-};
+ // Need help constructing this AST node?
+ // Use the MDX Playground and explore what your output mdast should look like
+ // https://mdxjs.com/playground/
+ const jsxNode = {
+ type: 'mdxJsxTextElement',
+ name: 'div',
+ attributes: [
+ attr('class', 'snack-player'),
+ attr('data-snack-name', name),
+ attr('data-snack-description', description),
+ attr('data-snack-files', files),
+ attr('data-snack-dependencies', dependencies),
+ attr('data-snack-platform', platform),
+ attr('data-snack-supported-platforms', supportedPlatforms),
+ attr('data-snack-theme', theme),
+ attr('data-snack-preview', preview),
+ attr('data-snack-loading', loading),
+ attr('data-snack-device-android', deviceAndroid),
+ attr('data-snack-device-ios', deviceIos),
+ ],
+ children: [],
+ };
 
-const SnackPlayer = () => {
- return tree =>
- new Promise(async (resolve, reject) => {
- const nodesToProcess = [];
- // Parse all CodeBlocks
- visit(tree, 'code', (node, parent) => {
- // Add SnackPlayer CodeBlocks to processing queue
- if (node.lang == 'SnackPlayer') {
- nodesToProcess.push(processNode(node, parent));
- }
- });
+ // We "replace" the current node by a JSX node
+ Object.keys(node).forEach(key => delete node[key]);
+ Object.keys(jsxNode).forEach(key => (node[key] = jsxNode[key]));
+}
 
- // Wait for all promises to be resolved
- Promise.all(nodesToProcess).then(resolve()).catch(reject());
+const SnackPlayer = () => {
+ return async tree => {
+ const nodesToProcess = [];
+ visit(tree, 'code', (node, parent) => {
+ if (node.lang === 'SnackPlayer') {
+ nodesToProcess.push(toJsxNode(node, parent));
+ }
  });
+ await Promise.all(nodesToProcess);
+ };
 };
 
 module.exports = SnackPlayer;

website/blog/2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md

@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som
 <footer>
  <a
  href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

website/blog/2015-09-14-react-native-for-android.md

@@ -15,9 +15,7 @@ At Facebook we've been using React Native in production for over a year now. Alm
 <footer>
  <a
  href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

website/blog/2015-11-23-making-react-native-apps-accessible.md

@@ -21,9 +21,7 @@ Let's walk through a slightly more involved application of the React AX API by l
 <footer>
  <a
  href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

website/blog/2016-03-28-dive-into-react-native-performance.md

@@ -19,9 +19,7 @@ Since releasing React Native on [iOS](https://reactjs.org/blog/2015/03/26/introd
 <footer>
  <a
  href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

website/blog/2016-04-13-react-native-a-year-in-review.md

@@ -16,9 +16,7 @@ It's been an epic ride — but we are only getting started. Here is a look back
 <footer>
  <a
  href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

website/blog/2018-03-05-AWS-app-sync.md

@@ -94,7 +94,7 @@ return <S3Album track/>
 
 AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources.
 
-For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
+For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
 
 ## AWS AppSync
 

website/blog/2019-06-12-react-native-open-source-update.md

@@ -26,7 +26,7 @@ We’d like to highlight a number of recent contributions which we thought were
  - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._
  - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS.
 - **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration!
- - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series.
+ - Check out the new app screen on the “_[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)_“ video series.
 - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests.
 - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more.
 - **Android Fragments:** [John Shelley](https://github.com/jpshelley)‘s proposal to make React Native work via [Android Fragments](https://github.com/facebook/react-native/pull/12199) was merged and will be available in 0.61. [Read more about Android Fragments here](https://developer.android.com/guide/components/fragments).

website/core/DocsRating.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 const DocsRating = ({label}) => {
- if (!ExecutionEnvironment.canUseDOM) {
+ const isBrowser = useIsBrowser();
+ if (!isBrowser) {
  return null;
  }
 

website/docusaurus.config.js

@@ -20,6 +20,8 @@ const commonDocsOptions = {
  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
 };
 
+const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
  title: 'React Native',
@@ -74,10 +76,9 @@ module.exports = {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.json'),
  editCurrentVersion: true,
- onlyIncludeVersions:
- process.env.PREVIEW_DEPLOY === 'true'
- ? ['current', ...versions.slice(0, 2)]
- : undefined,
+ onlyIncludeVersions: isDeployPreview
+ ? ['current', ...versions.slice(0, 2)]
+ : undefined,
  versions: {
  [lastVersion]: {
  badge: false, // Do not show version badge for last RN version

website/package.json

@@ -48,10 +48,10 @@
  ]
  },
  "dependencies": {
- "@docusaurus/core": "^2.4.1",
- "@docusaurus/plugin-google-gtag": "^2.4.1",
- "@docusaurus/plugin-pwa": "^2.4.1",
- "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/core": "0.0.0-5658",
+ "@docusaurus/plugin-google-gtag": "0.0.0-5658",
+ "@docusaurus/plugin-pwa": "0.0.0-5658",
+ "@docusaurus/preset-classic": "0.0.0-5658",
  "docusaurus-plugin-sass": "^0.2.2",
  "esbuild-loader": "^2.19.0",
  "react": "^18.2.0",
@@ -60,7 +60,7 @@
  "sass": "^1.53.0"
  },
  "devDependencies": {
- "@docusaurus/types": "^2.4.1",
+ "@docusaurus/types": "0.0.0-5658",
  "@react-native-website/lint-examples": "0.0.0",
  "@react-native-website/update-redirects": "0.0.0",
  "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -116,7 +116,7 @@ html[data-theme="dark"] {
  align-self: center;
  font-weight: 300;
 
- div[class*="docPage"] {
+ div[class*="docRoot"] {
  justify-content: center;
  }
 
@@ -387,10 +387,10 @@ html[data-theme="dark"] {
  }
 }
 
-div[class^="docPage"] .hash-link,
+div[class^="docRoot"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-html[data-theme="dark"] div[class^="docPage"] .hash-link,
+html[data-theme="dark"] div[class^="docRoot"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
 html[data-theme="dark"].mdx-page .hash-link {
  @extend %hash-link-style;
@@ -1865,3 +1865,13 @@ html[data-theme="light"].blog-wrapper {
  }
  }
 }
+
+/*
+Prevent useless bottom margin for multiline <figcaption> tags in MDX:
+<figcaption>
+ some paragraph text
+</figcaption>
+ */
+figcaption > p:last-child {
+ margin-bottom: 0;
+}

website/src/theme/MDXComponents/Code.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import InlineCode from './InlineCode';
+
+export default function MDXCode(props) {
+ const shouldBeInline = React.Children.toArray(props.children).every(
+ el => typeof el === 'string' && !el.includes('\n')
+ );
+
+ return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />;
+}

website/src/theme/MDXComponents/InlineCode.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
+// Note: this component is a custom React-Native-Website feature
+
 const MarkdownInlineCodePrefix = 'md ';
 
 export default function InlineCode(props) {

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" />
+<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/introduction.md

@@ -7,9 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <div className="content-banner">
- <p>
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
- </p>
+ Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 

plugins/remark-snackplayer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@react-native-website/remark-snackplayer",
- "version": "0.0.7",
+ "version": "0.1.0",
  "private": true,
  "description": "Remark Expo Snack Plugin",
  "main": "src/index.js",
@@ -21,7 +21,6 @@
  "dependencies": {
  "dedent": "^0.7.0",
  "object.fromentries": "^2.0.3",
- "unist-builder": "^2.0.3",
  "unist-util-visit-parents": "^3.1.1"
  },
  "devDependencies": {

plugins/remark-snackplayer/src/index.js

@@ -8,8 +8,6 @@
 'use strict';
 
 const visit = require('unist-util-visit-parents');
-const u = require('unist-builder');
-const dedent = require('dedent');
 const fromEntries = require('object.fromentries');
 
 const parseParams = (paramString = '') => {
@@ -22,81 +20,79 @@ const parseParams = (paramString = '') => {
  return params;
 };
 
-const processNode = (node, parent) => {
- return new Promise(async (resolve, reject) => {
- try {
- const params = parseParams(node.meta);
+function attr(name, value) {
+ return {
+ type: 'mdxJsxAttribute',
+ name,
+ value,
+ };
+}
 
- // Gather necessary Params
- const name = params.name ? decodeURIComponent(params.name) : 'Example';
- const description = params.description
- ? decodeURIComponent(params.description)
- : 'Example usage';
- const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
- const filename = `App.${ext}`;
- const files = encodeURIComponent(
- JSON.stringify({
- [filename]: {
- type: 'CODE',
- contents: node.value,
- },
- })
- );
- const dependencies = params.dependencies || '';
- const platform = params.platform || 'web';
- const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
- const theme = params.theme || 'light';
- const preview = params.preview || 'true';
- const loading = params.loading || 'lazy';
- const deviceAndroid = params.deviceAndroid || 'pixel4';
- const deviceIos = params.deviceIos || 'iphone12';
+async function toJsxNode(node) {
+ const params = parseParams(node.meta);
 
- // Generate Node for SnackPlayer
- // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
- const snackPlayerDiv = u('html', {
- value: dedent`
- <div
- class="snack-player"
- data-snack-name="${name}"
- data-snack-description="${description}"
- data-snack-files="${files}"
- data-snack-dependencies="${dependencies}"
- data-snack-platform="${platform}"
- data-snack-supported-platforms="${supportedPlatforms}"
- data-snack-theme="${theme}"
- data-snack-preview="${preview}"
- data-snack-loading="${loading}"
- data-snack-device-android="${deviceAndroid}"
- data-snack-device-ios="${deviceIos}"
- ></div>
- `,
- });
+ // Gather necessary Params
+ const name = params.name ? decodeURIComponent(params.name) : 'Example';
+ const description = params.description
+ ? decodeURIComponent(params.description)
+ : 'Example usage';
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
+ const dependencies = params.dependencies || '';
+ const platform = params.platform || 'web';
+ const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
+ const theme = params.theme || 'light';
+ const preview = params.preview || 'true';
+ const loading = params.loading || 'lazy';
+ const deviceAndroid = params.deviceAndroid || 'pixel4';
+ const deviceIos = params.deviceIos || 'iphone12';
 
- // Replace code block with SnackPlayer Node
- const index = parent[0].children.indexOf(node);
- parent[0].children.splice(index, 1, snackPlayerDiv);
- } catch (e) {
- return reject(e);
- }
- resolve();
- });
-};
+ // Need help constructing this AST node?
+ // Use the MDX Playground and explore what your output mdast should look like
+ // https://mdxjs.com/playground/
+ const jsxNode = {
+ type: 'mdxJsxTextElement',
+ name: 'div',
+ attributes: [
+ attr('class', 'snack-player'),
+ attr('data-snack-name', name),
+ attr('data-snack-description', description),
+ attr('data-snack-files', files),
+ attr('data-snack-dependencies', dependencies),
+ attr('data-snack-platform', platform),
+ attr('data-snack-supported-platforms', supportedPlatforms),
+ attr('data-snack-theme', theme),
+ attr('data-snack-preview', preview),
+ attr('data-snack-loading', loading),
+ attr('data-snack-device-android', deviceAndroid),
+ attr('data-snack-device-ios', deviceIos),
+ ],
+ children: [],
+ };
 
-const SnackPlayer = () => {
- return tree =>
- new Promise(async (resolve, reject) => {
- const nodesToProcess = [];
- // Parse all CodeBlocks
- visit(tree, 'code', (node, parent) => {
- // Add SnackPlayer CodeBlocks to processing queue
- if (node.lang == 'SnackPlayer') {
- nodesToProcess.push(processNode(node, parent));
- }
- });
+ // We "replace" the current node by a JSX node
+ Object.keys(node).forEach(key => delete node[key]);
+ Object.keys(jsxNode).forEach(key => (node[key] = jsxNode[key]));
+}
 
- // Wait for all promises to be resolved
- Promise.all(nodesToProcess).then(resolve()).catch(reject());
+const SnackPlayer = () => {
+ return async tree => {
+ const nodesToProcess = [];
+ visit(tree, 'code', (node, parent) => {
+ if (node.lang === 'SnackPlayer') {
+ nodesToProcess.push(toJsxNode(node, parent));
+ }
  });
+ await Promise.all(nodesToProcess);
+ };
 };
 
 module.exports = SnackPlayer;

website/blog/2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md

@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som
 <footer>
  <a
  href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

website/blog/2015-09-14-react-native-for-android.md

@@ -15,9 +15,7 @@ At Facebook we've been using React Native in production for over a year now. Alm
 <footer>
  <a
  href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

website/blog/2015-11-23-making-react-native-apps-accessible.md

@@ -21,9 +21,7 @@ Let's walk through a slightly more involved application of the React AX API by l
 <footer>
  <a
  href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

website/blog/2016-03-28-dive-into-react-native-performance.md

@@ -19,9 +19,7 @@ Since releasing React Native on [iOS](https://reactjs.org/blog/2015/03/26/introd
 <footer>
  <a
  href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

website/blog/2016-04-13-react-native-a-year-in-review.md

@@ -16,9 +16,7 @@ It's been an epic ride — but we are only getting started. Here is a look back
 <footer>
  <a
  href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

website/blog/2018-03-05-AWS-app-sync.md

@@ -94,7 +94,7 @@ return <S3Album track/>
 
 AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources.
 
-For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
+For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
 
 ## AWS AppSync
 

website/blog/2019-06-12-react-native-open-source-update.md

@@ -26,7 +26,7 @@ We’d like to highlight a number of recent contributions which we thought were
  - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._
  - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS.
 - **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration!
- - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series.
+ - Check out the new app screen on the “_[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)_“ video series.
 - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests.
 - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more.
 - **Android Fragments:** [John Shelley](https://github.com/jpshelley)‘s proposal to make React Native work via [Android Fragments](https://github.com/facebook/react-native/pull/12199) was merged and will be available in 0.61. [Read more about Android Fragments here](https://developer.android.com/guide/components/fragments).

website/core/DocsRating.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 const DocsRating = ({label}) => {
- if (!ExecutionEnvironment.canUseDOM) {
+ const isBrowser = useIsBrowser();
+ if (!isBrowser) {
  return null;
  }
 

website/docusaurus.config.js

@@ -20,6 +20,8 @@ const commonDocsOptions = {
  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
 };
 
+const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
  title: 'React Native',
@@ -74,10 +76,9 @@ module.exports = {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.json'),
  editCurrentVersion: true,
- onlyIncludeVersions:
- process.env.PREVIEW_DEPLOY === 'true'
- ? ['current', ...versions.slice(0, 2)]
- : undefined,
+ onlyIncludeVersions: isDeployPreview
+ ? ['current', ...versions.slice(0, 2)]
+ : undefined,
  versions: {
  [lastVersion]: {
  badge: false, // Do not show version badge for last RN version

website/package.json

@@ -48,10 +48,10 @@
  ]
  },
  "dependencies": {
- "@docusaurus/core": "^2.4.1",
- "@docusaurus/plugin-google-gtag": "^2.4.1",
- "@docusaurus/plugin-pwa": "^2.4.1",
- "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/core": "0.0.0-5658",
+ "@docusaurus/plugin-google-gtag": "0.0.0-5658",
+ "@docusaurus/plugin-pwa": "0.0.0-5658",
+ "@docusaurus/preset-classic": "0.0.0-5658",
  "docusaurus-plugin-sass": "^0.2.2",
  "esbuild-loader": "^2.19.0",
  "react": "^18.2.0",
@@ -60,7 +60,7 @@
  "sass": "^1.53.0"
  },
  "devDependencies": {
- "@docusaurus/types": "^2.4.1",
+ "@docusaurus/types": "0.0.0-5658",
  "@react-native-website/lint-examples": "0.0.0",
  "@react-native-website/update-redirects": "0.0.0",
  "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -116,7 +116,7 @@ html[data-theme="dark"] {
  align-self: center;
  font-weight: 300;
 
- div[class*="docPage"] {
+ div[class*="docRoot"] {
  justify-content: center;
  }
 
@@ -387,10 +387,10 @@ html[data-theme="dark"] {
  }
 }
 
-div[class^="docPage"] .hash-link,
+div[class^="docRoot"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-html[data-theme="dark"] div[class^="docPage"] .hash-link,
+html[data-theme="dark"] div[class^="docRoot"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
 html[data-theme="dark"].mdx-page .hash-link {
  @extend %hash-link-style;
@@ -1865,3 +1865,13 @@ html[data-theme="light"].blog-wrapper {
  }
  }
 }
+
+/*
+Prevent useless bottom margin for multiline <figcaption> tags in MDX:
+<figcaption>
+ some paragraph text
+</figcaption>
+ */
+figcaption > p:last-child {
+ margin-bottom: 0;
+}

website/src/theme/MDXComponents/Code.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import InlineCode from './InlineCode';
+
+export default function MDXCode(props) {
+ const shouldBeInline = React.Children.toArray(props.children).every(
+ el => typeof el === 'string' && !el.includes('\n')
+ );
+
+ return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />;
+}

website/src/theme/MDXComponents/InlineCode.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
+// Note: this component is a custom React-Native-Website feature
+
 const MarkdownInlineCodePrefix = 'md ';
 
 export default function InlineCode(props) {

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" />
+<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/introduction.md

@@ -7,9 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <div className="content-banner">
- <p>
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
- </p>
+ Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 

plugins/remark-snackplayer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@react-native-website/remark-snackplayer",
- "version": "0.0.7",
+ "version": "0.1.0",
  "private": true,
  "description": "Remark Expo Snack Plugin",
  "main": "src/index.js",
@@ -21,7 +21,6 @@
  "dependencies": {
  "dedent": "^0.7.0",
  "object.fromentries": "^2.0.3",
- "unist-builder": "^2.0.3",
  "unist-util-visit-parents": "^3.1.1"
  },
  "devDependencies": {

plugins/remark-snackplayer/src/index.js

@@ -8,8 +8,6 @@
 'use strict';
 
 const visit = require('unist-util-visit-parents');
-const u = require('unist-builder');
-const dedent = require('dedent');
 const fromEntries = require('object.fromentries');
 
 const parseParams = (paramString = '') => {
@@ -22,81 +20,79 @@ const parseParams = (paramString = '') => {
  return params;
 };
 
-const processNode = (node, parent) => {
- return new Promise(async (resolve, reject) => {
- try {
- const params = parseParams(node.meta);
+function attr(name, value) {
+ return {
+ type: 'mdxJsxAttribute',
+ name,
+ value,
+ };
+}
 
- // Gather necessary Params
- const name = params.name ? decodeURIComponent(params.name) : 'Example';
- const description = params.description
- ? decodeURIComponent(params.description)
- : 'Example usage';
- const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
- const filename = `App.${ext}`;
- const files = encodeURIComponent(
- JSON.stringify({
- [filename]: {
- type: 'CODE',
- contents: node.value,
- },
- })
- );
- const dependencies = params.dependencies || '';
- const platform = params.platform || 'web';
- const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
- const theme = params.theme || 'light';
- const preview = params.preview || 'true';
- const loading = params.loading || 'lazy';
- const deviceAndroid = params.deviceAndroid || 'pixel4';
- const deviceIos = params.deviceIos || 'iphone12';
+async function toJsxNode(node) {
+ const params = parseParams(node.meta);
 
- // Generate Node for SnackPlayer
- // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
- const snackPlayerDiv = u('html', {
- value: dedent`
- <div
- class="snack-player"
- data-snack-name="${name}"
- data-snack-description="${description}"
- data-snack-files="${files}"
- data-snack-dependencies="${dependencies}"
- data-snack-platform="${platform}"
- data-snack-supported-platforms="${supportedPlatforms}"
- data-snack-theme="${theme}"
- data-snack-preview="${preview}"
- data-snack-loading="${loading}"
- data-snack-device-android="${deviceAndroid}"
- data-snack-device-ios="${deviceIos}"
- ></div>
- `,
- });
+ // Gather necessary Params
+ const name = params.name ? decodeURIComponent(params.name) : 'Example';
+ const description = params.description
+ ? decodeURIComponent(params.description)
+ : 'Example usage';
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
+ const dependencies = params.dependencies || '';
+ const platform = params.platform || 'web';
+ const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
+ const theme = params.theme || 'light';
+ const preview = params.preview || 'true';
+ const loading = params.loading || 'lazy';
+ const deviceAndroid = params.deviceAndroid || 'pixel4';
+ const deviceIos = params.deviceIos || 'iphone12';
 
- // Replace code block with SnackPlayer Node
- const index = parent[0].children.indexOf(node);
- parent[0].children.splice(index, 1, snackPlayerDiv);
- } catch (e) {
- return reject(e);
- }
- resolve();
- });
-};
+ // Need help constructing this AST node?
+ // Use the MDX Playground and explore what your output mdast should look like
+ // https://mdxjs.com/playground/
+ const jsxNode = {
+ type: 'mdxJsxTextElement',
+ name: 'div',
+ attributes: [
+ attr('class', 'snack-player'),
+ attr('data-snack-name', name),
+ attr('data-snack-description', description),
+ attr('data-snack-files', files),
+ attr('data-snack-dependencies', dependencies),
+ attr('data-snack-platform', platform),
+ attr('data-snack-supported-platforms', supportedPlatforms),
+ attr('data-snack-theme', theme),
+ attr('data-snack-preview', preview),
+ attr('data-snack-loading', loading),
+ attr('data-snack-device-android', deviceAndroid),
+ attr('data-snack-device-ios', deviceIos),
+ ],
+ children: [],
+ };
 
-const SnackPlayer = () => {
- return tree =>
- new Promise(async (resolve, reject) => {
- const nodesToProcess = [];
- // Parse all CodeBlocks
- visit(tree, 'code', (node, parent) => {
- // Add SnackPlayer CodeBlocks to processing queue
- if (node.lang == 'SnackPlayer') {
- nodesToProcess.push(processNode(node, parent));
- }
- });
+ // We "replace" the current node by a JSX node
+ Object.keys(node).forEach(key => delete node[key]);
+ Object.keys(jsxNode).forEach(key => (node[key] = jsxNode[key]));
+}
 
- // Wait for all promises to be resolved
- Promise.all(nodesToProcess).then(resolve()).catch(reject());
+const SnackPlayer = () => {
+ return async tree => {
+ const nodesToProcess = [];
+ visit(tree, 'code', (node, parent) => {
+ if (node.lang === 'SnackPlayer') {
+ nodesToProcess.push(toJsxNode(node, parent));
+ }
  });
+ await Promise.all(nodesToProcess);
+ };
 };
 
 module.exports = SnackPlayer;

website/blog/2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md

@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som
 <footer>
  <a
  href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

website/blog/2015-09-14-react-native-for-android.md

@@ -15,9 +15,7 @@ At Facebook we've been using React Native in production for over a year now. Alm
 <footer>
  <a
  href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

website/blog/2015-11-23-making-react-native-apps-accessible.md

@@ -21,9 +21,7 @@ Let's walk through a slightly more involved application of the React AX API by l
 <footer>
  <a
  href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

website/blog/2016-03-28-dive-into-react-native-performance.md

@@ -19,9 +19,7 @@ Since releasing React Native on [iOS](https://reactjs.org/blog/2015/03/26/introd
 <footer>
  <a
  href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

website/blog/2016-04-13-react-native-a-year-in-review.md

@@ -16,9 +16,7 @@ It's been an epic ride — but we are only getting started. Here is a look back
 <footer>
  <a
  href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

website/blog/2018-03-05-AWS-app-sync.md

@@ -94,7 +94,7 @@ return <S3Album track/>
 
 AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources.
 
-For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
+For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
 
 ## AWS AppSync
 

website/blog/2019-06-12-react-native-open-source-update.md

@@ -26,7 +26,7 @@ We’d like to highlight a number of recent contributions which we thought were
  - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._
  - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS.
 - **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration!
- - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series.
+ - Check out the new app screen on the “_[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)_“ video series.
 - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests.
 - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more.
 - **Android Fragments:** [John Shelley](https://github.com/jpshelley)‘s proposal to make React Native work via [Android Fragments](https://github.com/facebook/react-native/pull/12199) was merged and will be available in 0.61. [Read more about Android Fragments here](https://developer.android.com/guide/components/fragments).

website/core/DocsRating.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 const DocsRating = ({label}) => {
- if (!ExecutionEnvironment.canUseDOM) {
+ const isBrowser = useIsBrowser();
+ if (!isBrowser) {
  return null;
  }
 

website/docusaurus.config.js

@@ -20,6 +20,8 @@ const commonDocsOptions = {
  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
 };
 
+const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
  title: 'React Native',
@@ -74,10 +76,9 @@ module.exports = {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.json'),
  editCurrentVersion: true,
- onlyIncludeVersions:
- process.env.PREVIEW_DEPLOY === 'true'
- ? ['current', ...versions.slice(0, 2)]
- : undefined,
+ onlyIncludeVersions: isDeployPreview
+ ? ['current', ...versions.slice(0, 2)]
+ : undefined,
  versions: {
  [lastVersion]: {
  badge: false, // Do not show version badge for last RN version

website/package.json

@@ -48,10 +48,10 @@
  ]
  },
  "dependencies": {
- "@docusaurus/core": "^2.4.1",
- "@docusaurus/plugin-google-gtag": "^2.4.1",
- "@docusaurus/plugin-pwa": "^2.4.1",
- "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/core": "0.0.0-5658",
+ "@docusaurus/plugin-google-gtag": "0.0.0-5658",
+ "@docusaurus/plugin-pwa": "0.0.0-5658",
+ "@docusaurus/preset-classic": "0.0.0-5658",
  "docusaurus-plugin-sass": "^0.2.2",
  "esbuild-loader": "^2.19.0",
  "react": "^18.2.0",
@@ -60,7 +60,7 @@
  "sass": "^1.53.0"
  },
  "devDependencies": {
- "@docusaurus/types": "^2.4.1",
+ "@docusaurus/types": "0.0.0-5658",
  "@react-native-website/lint-examples": "0.0.0",
  "@react-native-website/update-redirects": "0.0.0",
  "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -116,7 +116,7 @@ html[data-theme="dark"] {
  align-self: center;
  font-weight: 300;
 
- div[class*="docPage"] {
+ div[class*="docRoot"] {
  justify-content: center;
  }
 
@@ -387,10 +387,10 @@ html[data-theme="dark"] {
  }
 }
 
-div[class^="docPage"] .hash-link,
+div[class^="docRoot"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-html[data-theme="dark"] div[class^="docPage"] .hash-link,
+html[data-theme="dark"] div[class^="docRoot"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
 html[data-theme="dark"].mdx-page .hash-link {
  @extend %hash-link-style;
@@ -1865,3 +1865,13 @@ html[data-theme="light"].blog-wrapper {
  }
  }
 }
+
+/*
+Prevent useless bottom margin for multiline <figcaption> tags in MDX:
+<figcaption>
+ some paragraph text
+</figcaption>
+ */
+figcaption > p:last-child {
+ margin-bottom: 0;
+}

website/src/theme/MDXComponents/Code.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import InlineCode from './InlineCode';
+
+export default function MDXCode(props) {
+ const shouldBeInline = React.Children.toArray(props.children).every(
+ el => typeof el === 'string' && !el.includes('\n')
+ );
+
+ return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />;
+}

website/src/theme/MDXComponents/InlineCode.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
+// Note: this component is a custom React-Native-Website feature
+
 const MarkdownInlineCodePrefix = 'md ';
 
 export default function InlineCode(props) {

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" />
+<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/introduction.md

@@ -7,9 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <div className="content-banner">
- <p>
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
- </p>
+ Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 

plugins/remark-snackplayer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@react-native-website/remark-snackplayer",
- "version": "0.0.7",
+ "version": "0.1.0",
  "private": true,
  "description": "Remark Expo Snack Plugin",
  "main": "src/index.js",
@@ -21,7 +21,6 @@
  "dependencies": {
  "dedent": "^0.7.0",
  "object.fromentries": "^2.0.3",
- "unist-builder": "^2.0.3",
  "unist-util-visit-parents": "^3.1.1"
  },
  "devDependencies": {

plugins/remark-snackplayer/src/index.js

@@ -8,8 +8,6 @@
 'use strict';
 
 const visit = require('unist-util-visit-parents');
-const u = require('unist-builder');
-const dedent = require('dedent');
 const fromEntries = require('object.fromentries');
 
 const parseParams = (paramString = '') => {
@@ -22,81 +20,79 @@ const parseParams = (paramString = '') => {
  return params;
 };
 
-const processNode = (node, parent) => {
- return new Promise(async (resolve, reject) => {
- try {
- const params = parseParams(node.meta);
+function attr(name, value) {
+ return {
+ type: 'mdxJsxAttribute',
+ name,
+ value,
+ };
+}
 
- // Gather necessary Params
- const name = params.name ? decodeURIComponent(params.name) : 'Example';
- const description = params.description
- ? decodeURIComponent(params.description)
- : 'Example usage';
- const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
- const filename = `App.${ext}`;
- const files = encodeURIComponent(
- JSON.stringify({
- [filename]: {
- type: 'CODE',
- contents: node.value,
- },
- })
- );
- const dependencies = params.dependencies || '';
- const platform = params.platform || 'web';
- const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
- const theme = params.theme || 'light';
- const preview = params.preview || 'true';
- const loading = params.loading || 'lazy';
- const deviceAndroid = params.deviceAndroid || 'pixel4';
- const deviceIos = params.deviceIos || 'iphone12';
+async function toJsxNode(node) {
+ const params = parseParams(node.meta);
 
- // Generate Node for SnackPlayer
- // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
- const snackPlayerDiv = u('html', {
- value: dedent`
- <div
- class="snack-player"
- data-snack-name="${name}"
- data-snack-description="${description}"
- data-snack-files="${files}"
- data-snack-dependencies="${dependencies}"
- data-snack-platform="${platform}"
- data-snack-supported-platforms="${supportedPlatforms}"
- data-snack-theme="${theme}"
- data-snack-preview="${preview}"
- data-snack-loading="${loading}"
- data-snack-device-android="${deviceAndroid}"
- data-snack-device-ios="${deviceIos}"
- ></div>
- `,
- });
+ // Gather necessary Params
+ const name = params.name ? decodeURIComponent(params.name) : 'Example';
+ const description = params.description
+ ? decodeURIComponent(params.description)
+ : 'Example usage';
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
+ const dependencies = params.dependencies || '';
+ const platform = params.platform || 'web';
+ const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
+ const theme = params.theme || 'light';
+ const preview = params.preview || 'true';
+ const loading = params.loading || 'lazy';
+ const deviceAndroid = params.deviceAndroid || 'pixel4';
+ const deviceIos = params.deviceIos || 'iphone12';
 
- // Replace code block with SnackPlayer Node
- const index = parent[0].children.indexOf(node);
- parent[0].children.splice(index, 1, snackPlayerDiv);
- } catch (e) {
- return reject(e);
- }
- resolve();
- });
-};
+ // Need help constructing this AST node?
+ // Use the MDX Playground and explore what your output mdast should look like
+ // https://mdxjs.com/playground/
+ const jsxNode = {
+ type: 'mdxJsxTextElement',
+ name: 'div',
+ attributes: [
+ attr('class', 'snack-player'),
+ attr('data-snack-name', name),
+ attr('data-snack-description', description),
+ attr('data-snack-files', files),
+ attr('data-snack-dependencies', dependencies),
+ attr('data-snack-platform', platform),
+ attr('data-snack-supported-platforms', supportedPlatforms),
+ attr('data-snack-theme', theme),
+ attr('data-snack-preview', preview),
+ attr('data-snack-loading', loading),
+ attr('data-snack-device-android', deviceAndroid),
+ attr('data-snack-device-ios', deviceIos),
+ ],
+ children: [],
+ };
 
-const SnackPlayer = () => {
- return tree =>
- new Promise(async (resolve, reject) => {
- const nodesToProcess = [];
- // Parse all CodeBlocks
- visit(tree, 'code', (node, parent) => {
- // Add SnackPlayer CodeBlocks to processing queue
- if (node.lang == 'SnackPlayer') {
- nodesToProcess.push(processNode(node, parent));
- }
- });
+ // We "replace" the current node by a JSX node
+ Object.keys(node).forEach(key => delete node[key]);
+ Object.keys(jsxNode).forEach(key => (node[key] = jsxNode[key]));
+}
 
- // Wait for all promises to be resolved
- Promise.all(nodesToProcess).then(resolve()).catch(reject());
+const SnackPlayer = () => {
+ return async tree => {
+ const nodesToProcess = [];
+ visit(tree, 'code', (node, parent) => {
+ if (node.lang === 'SnackPlayer') {
+ nodesToProcess.push(toJsxNode(node, parent));
+ }
  });
+ await Promise.all(nodesToProcess);
+ };
 };
 
 module.exports = SnackPlayer;

website/blog/2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md

@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som
 <footer>
  <a
  href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

website/blog/2015-09-14-react-native-for-android.md

@@ -15,9 +15,7 @@ At Facebook we've been using React Native in production for over a year now. Alm
 <footer>
  <a
  href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

website/blog/2015-11-23-making-react-native-apps-accessible.md

@@ -21,9 +21,7 @@ Let's walk through a slightly more involved application of the React AX API by l
 <footer>
  <a
  href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

website/blog/2016-03-28-dive-into-react-native-performance.md

@@ -19,9 +19,7 @@ Since releasing React Native on [iOS](https://reactjs.org/blog/2015/03/26/introd
 <footer>
  <a
  href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

website/blog/2016-04-13-react-native-a-year-in-review.md

@@ -16,9 +16,7 @@ It's been an epic ride — but we are only getting started. Here is a look back
 <footer>
  <a
  href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

website/blog/2018-03-05-AWS-app-sync.md

@@ -94,7 +94,7 @@ return <S3Album track/>
 
 AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources.
 
-For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
+For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
 
 ## AWS AppSync
 

website/blog/2019-06-12-react-native-open-source-update.md

@@ -26,7 +26,7 @@ We’d like to highlight a number of recent contributions which we thought were
  - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._
  - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS.
 - **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration!
- - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series.
+ - Check out the new app screen on the “_[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)_“ video series.
 - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests.
 - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more.
 - **Android Fragments:** [John Shelley](https://github.com/jpshelley)‘s proposal to make React Native work via [Android Fragments](https://github.com/facebook/react-native/pull/12199) was merged and will be available in 0.61. [Read more about Android Fragments here](https://developer.android.com/guide/components/fragments).

website/core/DocsRating.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 const DocsRating = ({label}) => {
- if (!ExecutionEnvironment.canUseDOM) {
+ const isBrowser = useIsBrowser();
+ if (!isBrowser) {
  return null;
  }
 

website/docusaurus.config.js

@@ -20,6 +20,8 @@ const commonDocsOptions = {
  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
 };
 
+const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
  title: 'React Native',
@@ -74,10 +76,9 @@ module.exports = {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.json'),
  editCurrentVersion: true,
- onlyIncludeVersions:
- process.env.PREVIEW_DEPLOY === 'true'
- ? ['current', ...versions.slice(0, 2)]
- : undefined,
+ onlyIncludeVersions: isDeployPreview
+ ? ['current', ...versions.slice(0, 2)]
+ : undefined,
  versions: {
  [lastVersion]: {
  badge: false, // Do not show version badge for last RN version

website/package.json

@@ -48,10 +48,10 @@
  ]
  },
  "dependencies": {
- "@docusaurus/core": "^2.4.1",
- "@docusaurus/plugin-google-gtag": "^2.4.1",
- "@docusaurus/plugin-pwa": "^2.4.1",
- "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/core": "0.0.0-5658",
+ "@docusaurus/plugin-google-gtag": "0.0.0-5658",
+ "@docusaurus/plugin-pwa": "0.0.0-5658",
+ "@docusaurus/preset-classic": "0.0.0-5658",
  "docusaurus-plugin-sass": "^0.2.2",
  "esbuild-loader": "^2.19.0",
  "react": "^18.2.0",
@@ -60,7 +60,7 @@
  "sass": "^1.53.0"
  },
  "devDependencies": {
- "@docusaurus/types": "^2.4.1",
+ "@docusaurus/types": "0.0.0-5658",
  "@react-native-website/lint-examples": "0.0.0",
  "@react-native-website/update-redirects": "0.0.0",
  "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -116,7 +116,7 @@ html[data-theme="dark"] {
  align-self: center;
  font-weight: 300;
 
- div[class*="docPage"] {
+ div[class*="docRoot"] {
  justify-content: center;
  }
 
@@ -387,10 +387,10 @@ html[data-theme="dark"] {
  }
 }
 
-div[class^="docPage"] .hash-link,
+div[class^="docRoot"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-html[data-theme="dark"] div[class^="docPage"] .hash-link,
+html[data-theme="dark"] div[class^="docRoot"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
 html[data-theme="dark"].mdx-page .hash-link {
  @extend %hash-link-style;
@@ -1865,3 +1865,13 @@ html[data-theme="light"].blog-wrapper {
  }
  }
 }
+
+/*
+Prevent useless bottom margin for multiline <figcaption> tags in MDX:
+<figcaption>
+ some paragraph text
+</figcaption>
+ */
+figcaption > p:last-child {
+ margin-bottom: 0;
+}

website/src/theme/MDXComponents/Code.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import InlineCode from './InlineCode';
+
+export default function MDXCode(props) {
+ const shouldBeInline = React.Children.toArray(props.children).every(
+ el => typeof el === 'string' && !el.includes('\n')
+ );
+
+ return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />;
+}

website/src/theme/MDXComponents/InlineCode.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
+// Note: this component is a custom React-Native-Website feature
+
 const MarkdownInlineCodePrefix = 'md ';
 
 export default function InlineCode(props) {

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" />
+<img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/introduction.md

@@ -7,9 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <div className="content-banner">
- <p>
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
- </p>
+ Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 

plugins/remark-snackplayer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@react-native-website/remark-snackplayer",
- "version": "0.0.7",
+ "version": "0.1.0",
  "private": true,
  "description": "Remark Expo Snack Plugin",
  "main": "src/index.js",
@@ -21,7 +21,6 @@
  "dependencies": {
  "dedent": "^0.7.0",
  "object.fromentries": "^2.0.3",
- "unist-builder": "^2.0.3",
  "unist-util-visit-parents": "^3.1.1"
  },
  "devDependencies": {

plugins/remark-snackplayer/src/index.js

@@ -8,8 +8,6 @@
 'use strict';
 
 const visit = require('unist-util-visit-parents');
-const u = require('unist-builder');
-const dedent = require('dedent');
 const fromEntries = require('object.fromentries');
 
 const parseParams = (paramString = '') => {
@@ -22,81 +20,79 @@ const parseParams = (paramString = '') => {
  return params;
 };
 
-const processNode = (node, parent) => {
- return new Promise(async (resolve, reject) => {
- try {
- const params = parseParams(node.meta);
+function attr(name, value) {
+ return {
+ type: 'mdxJsxAttribute',
+ name,
+ value,
+ };
+}
 
- // Gather necessary Params
- const name = params.name ? decodeURIComponent(params.name) : 'Example';
- const description = params.description
- ? decodeURIComponent(params.description)
- : 'Example usage';
- const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
- const filename = `App.${ext}`;
- const files = encodeURIComponent(
- JSON.stringify({
- [filename]: {
- type: 'CODE',
- contents: node.value,
- },
- })
- );
- const dependencies = params.dependencies || '';
- const platform = params.platform || 'web';
- const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
- const theme = params.theme || 'light';
- const preview = params.preview || 'true';
- const loading = params.loading || 'lazy';
- const deviceAndroid = params.deviceAndroid || 'pixel4';
- const deviceIos = params.deviceIos || 'iphone12';
+async function toJsxNode(node) {
+ const params = parseParams(node.meta);
 
- // Generate Node for SnackPlayer
- // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
- const snackPlayerDiv = u('html', {
- value: dedent`
- <div
- class="snack-player"
- data-snack-name="${name}"
- data-snack-description="${description}"
- data-snack-files="${files}"
- data-snack-dependencies="${dependencies}"
- data-snack-platform="${platform}"
- data-snack-supported-platforms="${supportedPlatforms}"
- data-snack-theme="${theme}"
- data-snack-preview="${preview}"
- data-snack-loading="${loading}"
- data-snack-device-android="${deviceAndroid}"
- data-snack-device-ios="${deviceIos}"
- ></div>
- `,
- });
+ // Gather necessary Params
+ const name = params.name ? decodeURIComponent(params.name) : 'Example';
+ const description = params.description
+ ? decodeURIComponent(params.description)
+ : 'Example usage';
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
+ const dependencies = params.dependencies || '';
+ const platform = params.platform || 'web';
+ const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
+ const theme = params.theme || 'light';
+ const preview = params.preview || 'true';
+ const loading = params.loading || 'lazy';
+ const deviceAndroid = params.deviceAndroid || 'pixel4';
+ const deviceIos = params.deviceIos || 'iphone12';
 
- // Replace code block with SnackPlayer Node
- const index = parent[0].children.indexOf(node);
- parent[0].children.splice(index, 1, snackPlayerDiv);
- } catch (e) {
- return reject(e);
- }
- resolve();
- });
-};
+ // Need help constructing this AST node?
+ // Use the MDX Playground and explore what your output mdast should look like
+ // https://mdxjs.com/playground/
+ const jsxNode = {
+ type: 'mdxJsxTextElement',
+ name: 'div',
+ attributes: [
+ attr('class', 'snack-player'),
+ attr('data-snack-name', name),
+ attr('data-snack-description', description),
+ attr('data-snack-files', files),
+ attr('data-snack-dependencies', dependencies),
+ attr('data-snack-platform', platform),
+ attr('data-snack-supported-platforms', supportedPlatforms),
+ attr('data-snack-theme', theme),
+ attr('data-snack-preview', preview),
+ attr('data-snack-loading', loading),
+ attr('data-snack-device-android', deviceAndroid),
+ attr('data-snack-device-ios', deviceIos),
+ ],
+ children: [],
+ };
 
-const SnackPlayer = () => {
- return tree =>
- new Promise(async (resolve, reject) => {
- const nodesToProcess = [];
- // Parse all CodeBlocks
- visit(tree, 'code', (node, parent) => {
- // Add SnackPlayer CodeBlocks to processing queue
- if (node.lang == 'SnackPlayer') {
- nodesToProcess.push(processNode(node, parent));
- }
- });
+ // We "replace" the current node by a JSX node
+ Object.keys(node).forEach(key => delete node[key]);
+ Object.keys(jsxNode).forEach(key => (node[key] = jsxNode[key]));
+}
 
- // Wait for all promises to be resolved
- Promise.all(nodesToProcess).then(resolve()).catch(reject());
+const SnackPlayer = () => {
+ return async tree => {
+ const nodesToProcess = [];
+ visit(tree, 'code', (node, parent) => {
+ if (node.lang === 'SnackPlayer') {
+ nodesToProcess.push(toJsxNode(node, parent));
+ }
  });
+ await Promise.all(nodesToProcess);
+ };
 };
 
 module.exports = SnackPlayer;

website/blog/2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md

@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som
 <footer>
  <a
  href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

website/blog/2015-09-14-react-native-for-android.md

@@ -15,9 +15,7 @@ At Facebook we've been using React Native in production for over a year now. Alm
 <footer>
  <a
  href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

website/blog/2015-11-23-making-react-native-apps-accessible.md

@@ -21,9 +21,7 @@ Let's walk through a slightly more involved application of the React AX API by l
 <footer>
  <a
  href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

website/blog/2016-03-28-dive-into-react-native-performance.md

@@ -19,9 +19,7 @@ Since releasing React Native on [iOS](https://reactjs.org/blog/2015/03/26/introd
 <footer>
  <a
  href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

website/blog/2016-04-13-react-native-a-year-in-review.md

@@ -16,9 +16,7 @@ It's been an epic ride — but we are only getting started. Here is a look back
 <footer>
  <a
  href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/"
- className="btn">
- Read more
- </a>
+ className="btn">Read more</a>
 </footer>
 
 > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

website/blog/2018-03-05-AWS-app-sync.md

@@ -94,7 +94,7 @@ return <S3Album track/>
 
 AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources.
 
-For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
+For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c).
 
 ## AWS AppSync
 

website/blog/2019-06-12-react-native-open-source-update.md

@@ -26,7 +26,7 @@ We’d like to highlight a number of recent contributions which we thought were
  - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._
  - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS.
 - **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration!
- - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series.
+ - Check out the new app screen on the “_[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)_“ video series.
 - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests.
 - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more.
 - **Android Fragments:** [John Shelley](https://github.com/jpshelley)‘s proposal to make React Native work via [Android Fragments](https://github.com/facebook/react-native/pull/12199) was merged and will be available in 0.61. [Read more about Android Fragments here](https://developer.android.com/guide/components/fragments).

website/core/DocsRating.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 const DocsRating = ({label}) => {
- if (!ExecutionEnvironment.canUseDOM) {
+ const isBrowser = useIsBrowser();
+ if (!isBrowser) {
  return null;
  }
 

website/docusaurus.config.js

@@ -20,6 +20,8 @@ const commonDocsOptions = {
  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
 };
 
+const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
  title: 'React Native',
@@ -74,10 +76,9 @@ module.exports = {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.json'),
  editCurrentVersion: true,
- onlyIncludeVersions:
- process.env.PREVIEW_DEPLOY === 'true'
- ? ['current', ...versions.slice(0, 2)]
- : undefined,
+ onlyIncludeVersions: isDeployPreview
+ ? ['current', ...versions.slice(0, 2)]
+ : undefined,
  versions: {
  [lastVersion]: {
  badge: false, // Do not show version badge for last RN version

website/package.json

@@ -48,10 +48,10 @@
  ]
  },
  "dependencies": {
- "@docusaurus/core": "^2.4.1",
- "@docusaurus/plugin-google-gtag": "^2.4.1",
- "@docusaurus/plugin-pwa": "^2.4.1",
- "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/core": "0.0.0-5658",
+ "@docusaurus/plugin-google-gtag": "0.0.0-5658",
+ "@docusaurus/plugin-pwa": "0.0.0-5658",
+ "@docusaurus/preset-classic": "0.0.0-5658",
  "docusaurus-plugin-sass": "^0.2.2",
  "esbuild-loader": "^2.19.0",
  "react": "^18.2.0",
@@ -60,7 +60,7 @@
  "sass": "^1.53.0"
  },
  "devDependencies": {
- "@docusaurus/types": "^2.4.1",
+ "@docusaurus/types": "0.0.0-5658",
  "@react-native-website/lint-examples": "0.0.0",
  "@react-native-website/update-redirects": "0.0.0",
  "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -116,7 +116,7 @@ html[data-theme="dark"] {
  align-self: center;
  font-weight: 300;
 
- div[class*="docPage"] {
+ div[class*="docRoot"] {
  justify-content: center;
  }
 
@@ -387,10 +387,10 @@ html[data-theme="dark"] {
  }
 }
 
-div[class^="docPage"] .hash-link,
+div[class^="docRoot"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-html[data-theme="dark"] div[class^="docPage"] .hash-link,
+html[data-theme="dark"] div[class^="docRoot"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
 html[data-theme="dark"].mdx-page .hash-link {
  @extend %hash-link-style;
@@ -1865,3 +1865,13 @@ html[data-theme="light"].blog-wrapper {
  }
  }
 }
+
+/*
+Prevent useless bottom margin for multiline <figcaption> tags in MDX:
+<figcaption>
+ some paragraph text
+</figcaption>
+ */
+figcaption > p:last-child {
+ margin-bottom: 0;
+}

website/src/theme/MDXComponents/Code.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import InlineCode from './InlineCode';
+
+export default function MDXCode(props) {
+ const shouldBeInline = React.Children.toArray(props.children).every(
+ el => typeof el === 'string' && !el.includes('\n')
+ );
+
+ return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />;
+}

website/src/theme/MDXComponents/InlineCode.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
+// Note: this component is a custom React-Native-Website feature
+
 const MarkdownInlineCodePrefix = 'md ';
 
 export default function InlineCode(props) {