Merge branch 'main' into line-break-strategy-ios

.alexignore

@@ -1,5 +1,5 @@
 # The Code of Conduct calls out language that can't be used so it's not linted.
 CODE_OF_CONDUCT.md
 
-# We will handle the blog posts after the main docs are linted.
-website/blog/
+# We will handle the older blog posts later.
+website/blog/201*

.circleci/config.yml

@@ -50,41 +50,16 @@ jobs:
             - ~/react-native-website
 
   # --------------------------------------------------
-  # JOB: test
-  # Test that the website can be built.
-  # --------------------------------------------------
-  test:
-    executor: node
-    working_directory: ~/react-native-website/website
-    steps:
-      - restore_cache_checkout
-      - run_yarn
-      - run: yarn ci-check
-      - run: export NODE_OPTIONS=--max_old_space_size=4096
-      - run: export TERSER_PARALLEL=false
-      # Run build test only for three latest version to avoid memory issues
-      - run: export DEPOLY_PREVIEW=true
-      - run:
-          name: Compile website
-          command: yarn test
-          no_output_timeout: 20m
-      - run:
-          name: Check for missing index.html (build errors)
-          command: |
-            if [ ! -f build/index.html ]; then
-              exit 1;
-            fi
-  # --------------------------------------------------
   # JOB: lint
   # Lint the docs.
   # --------------------------------------------------
-  language_lint:
+  lint:
     executor: node
     working_directory: ~/react-native-website/website
     steps:
       - restore_cache_checkout
       - run_yarn
-      - run: yarn lint
+      - run: yarn ci:lint
 
 # -------------------------
 #        WORKFLOWS
@@ -95,12 +70,7 @@ workflows:
     jobs:
       - setup
 
-      # Run tests
-      - test:
-          requires:
-            - setup
-
       # Run lints
-      - language_lint:
+      - lint:
           requires:
             - setup

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "plugins": ["prettier"],
+  "extends": ["plugin:mdx/recommended", "plugin:prettier/recommended"],
+  "overrides": [
+    {
+      "files": ["*.yaml", "*.yml"],
+      "plugins": ["yaml"],
+      "extends": ["plugin:yaml/recommended"]
+    }
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
+  },
+  "settings": {
+    "mdx/code-blocks": false
+  }
+}

CONTRIBUTING.md

@@ -1,16 +1,16 @@
 # Contributing to React Native
 
-Thank you for your interest in contributing to the React Native website! From commenting on and triaging issues, to reviewing and sending Pull Requests, all contributions are welcome. We aim to build a vibrant and inclusive [ecosystem of partners, core contributors, and community](https://github.com/facebook/react-native/blob/master/ECOSYSTEM.md) that goes beyond the main React Native GitHub repository.
+Thank you for your interest in contributing to the React Native website! From commenting on and triaging issues, to reviewing and sending Pull Requests, all contributions are welcome. We aim to build a vibrant and inclusive [ecosystem of partners, core contributors, and community](https://github.com/facebook/react-native/blob/main/ECOSYSTEM.md) that goes beyond the main React Native GitHub repository.
 
 The [Open Source Guides](https://opensource.guide/) website has a collection of resources for individuals, communities, and companies who want to learn how to run and contribute to an open source project. Contributors and people new to open source alike will find the following guides especially useful:
 
 - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
 - [Building Welcoming Communities](https://opensource.guide/building-community/)
 
-### [Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md)
+### [Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)
 
-As a reminder, all contributors are expected to adhere to the [Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md).
+As a reminder, all contributors are expected to adhere to the [Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md).
 
 ## Ways to Contribute
 
-Please see our [Contributing Guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md) in the main React Native repository.
+Please see our [Contributing Guide](https://github.com/facebook/react-native/blob/main/CONTRIBUTING.md) in the main React Native repository.

README.md

@@ -26,10 +26,10 @@ If you are looking for the source code of the [React Native Archive website](htt
 
 1.  `cd react-native-website` to go into the project root.
 1.  `yarn` to install the website's workspace dependencies.
-1.  `cd website` to go into the website portion of the project.
 
 ### Running locally
 
+1.  `cd website` to go into the website portion of the project.
 1.  `yarn start` to start the development server _(powered by [Docusaurus](https://v2.docusaurus.io))_.
 1.  `open http://localhost:3000/` to open the site in your favorite browser.
 
@@ -142,7 +142,7 @@ If possible, test any visual changes in all latest versions of the following bro
 
 ### Push it
 
-1.  Run `yarn prettier` to ensure your changes are consistent with other files in the repo.
+1.  Run `yarn prettier` and `yarn language:lint` in `./website` directory to ensure your changes are consistent with other files in the repo.
 1.  `git add -A && git commit -m "My message"` to stage and commit your changes.
     > replace `My message` with a commit message, such as `Fixed header logo on Android`
 1.  `git push my-fork-name the-name-of-my-branch`

STYLEGUIDE.md

@@ -137,4 +137,4 @@ When writing step-by-step instructions (e.g. how to install something), try to f
 
 ## Resources
 
-- [React JS’s contibuting guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text), especially the [code examples guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-code-examples)
+- [React JS’s contibuting guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text), especially the [code examples guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-code-examples)

docs/_getting-started-linux-android.md

@@ -141,7 +141,7 @@ npx react-native start
 
 > If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
 
-> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript.
 
 <h3>Step 2: Start your application</h3>
 

docs/_getting-started-macos-android.md

@@ -64,6 +64,13 @@ Next, select the "SDK Tools" tab and check the box next to "Show Package Details
 
 Finally, click "Apply" to download and install the Android SDK and related build tools.
 
+You can also run the following command after setting ANDROID_HOME.
+
+```shell
+sdkmanager "platforms;android-29" "system-images;android-29;default;x86_64" "system-images;android-29;google_apis;x86"
+sdkmanager "cmdline-tools;latest" "build-tools;29.0.2"
+```
+
 <h4>3. Configure the ANDROID_HOME environment variable</h4>
 
 The React Native tools require some environment variables to be set up in order to build apps with native code.
@@ -150,7 +157,7 @@ npx react-native start
 
 > If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
 
-> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript.
 
 <h3>Step 2: Start your application</h3>
 

docs/_getting-started-macos-ios.md

@@ -93,7 +93,7 @@ npx react-native start
 
 > If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
 
-> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript.
 
 ### Step 2: Start your application
 

docs/_getting-started-windows-android.md

@@ -170,7 +170,7 @@ npx react-native start
 
 > If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
 
-> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript.
 
 <h3>Step 2: Start your application</h3>
 

docs/_integration-with-exisiting-apps-java.md

@@ -163,15 +163,13 @@ import {
   View
 } from 'react-native';
 
-class HelloWorld extends React.Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.hello}>Hello, World</Text>
-      </View>
-    );
-  }
-}
+const HelloWorld = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.hello}>Hello, World</Text>
+    </View>
+  );
+};
 var styles = StyleSheet.create({
   container: {
     flex: 1,

docs/_integration-with-exisiting-apps-objc.md

@@ -213,24 +213,22 @@ import {
   View
 } from 'react-native';
 
-class RNHighScores extends React.Component {
-  render() {
-    var contents = this.props['scores'].map((score) => (
-      <Text key={score.name}>
-        {score.name}:{score.value}
-        {'\n'}
+const RNHighScores = ({ scores }) => {
+  const contents = scores.map((score) => (
+    <Text key={score.name}>
+      {score.name}:{score.value}
+      {'\n'}
+    </Text>
+  ));
+  return (
+    <View style={styles.container}>
+      <Text style={styles.highScoresTitle}>
+        2048 High Scores!
       </Text>
-    ));
-    return (
-      <View style={styles.container}>
-        <Text style={styles.highScoresTitle}>
-          2048 High Scores!
-        </Text>
-        <Text style={styles.scores}>{contents}</Text>
-      </View>
-    );
-  }
-}
+      <Text style={styles.scores}>{contents}</Text>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -391,10 +389,6 @@ Here is the _React Native_ high score screen:
 
 > If you are getting module resolution issues when running your application please see [this GitHub issue](https://github.com/facebook/react-native/issues/4968) for information and possible resolution. [This comment](https://github.com/facebook/react-native/issues/4968#issuecomment-220941717) seemed to be the latest possible resolution.
 
-### See the Code
-
-You can examine the code that added the React Native screen to our sample app on [GitHub](https://github.com/JoelMarcey/iOS-2048/commit/9ae70c7cdd53eb59f5f7c7daab382b0300ed3585).
-
 ### Now what?
 
 At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.

docs/_integration-with-exisiting-apps-swift.md

@@ -179,24 +179,22 @@ import {
   View
 } from 'react-native';
 
-class RNHighScores extends React.Component {
-  render() {
-    var contents = this.props['scores'].map((score) => (
-      <Text key={score.name}>
-        {score.name}:{score.value}
-        {'\n'}
+const RNHighScores = ({ scores }) => {
+  const contents = scores.map((score) => (
+    <Text key={score.name}>
+      {score.name}:{score.value}
+      {'\n'}
+    </Text>
+  ));
+  return (
+    <View style={styles.container}>
+      <Text style={styles.highScoresTitle}>
+        2048 High Scores!
       </Text>
-    ));
-    return (
-      <View style={styles.container}>
-        <Text style={styles.highScoresTitle}>
-          2048 High Scores!
-        </Text>
-        <Text style={styles.scores}>{contents}</Text>
-      </View>
-    );
-  }
-}
+      <Text style={styles.scores}>{contents}</Text>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -339,10 +337,6 @@ Here is the _React Native_ high score screen:
 
 > If you are getting module resolution issues when running your application please see [this GitHub issue](https://github.com/facebook/react-native/issues/4968) for information and possible resolution. [This comment](https://github.com/facebook/react-native/issues/4968#issuecomment-220941717) seemed to be the latest possible resolution.
 
-### See the Code
-
-You can examine the code that added the React Native screen to our sample app on [GitHub](https://github.com/JoelMarcey/swift-2048/commit/13272a31ee6dd46dc68b1dcf4eaf16c1a10f5229).
-
 ### Now what?
 
 At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.

docs/accessibility.md

@@ -123,6 +123,7 @@ In the above example method `addOne` changes the state variable `count`. As soon
 - **tablist** Used to represent a list of tabs.
 - **text** Used when the element should be treated as static text that cannot change.
 - **timer** Used to represent a timer.
+- **togglebutton** Used to represent a toggle button. Should be used with accessibilityState checked to indicate if the button is toggled on or off.
 - **toolbar** Used to represent a tool bar (a container of action buttons or components).
 
 ### `accessibilityState`
@@ -279,10 +280,7 @@ if (Platform.OS === 'android') {
 
 To enable TalkBack, go to the Settings app on your Android device or emulator. Tap Accessibility, then TalkBack. Toggle the "Use service" switch to enable or disable it.
 
-P.S. Android emulator doesn’t have TalkBack by default. To install it:
-
-1. Download TalkBack file here: https://google-talkback.en.uptodown.com/android
-2. Drag the downloaded `.apk` file into the emulator
+Android emulators don't have TalkBack installed by default. You can install TalkBack on your emulator via the Google Play Store. Make sure to choose an emulator with the Google Play store installed. These are available in Android Studio.
 
 You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.