reactnativecn
diff --git a/‎.circleci/config.yml
Lines changed: 1 addition & 0 deletions b/‎.circleci/config.yml
Lines changed: 1 addition & 0 deletions
diff --git a/‎.gitignore
Lines changed: 3 additions & 0 deletions b/‎.gitignore
Lines changed: 3 additions & 0 deletions
diff --git a/‎.prettierrc
Lines changed: 3 additions & 3 deletions b/‎.prettierrc
Lines changed: 3 additions & 3 deletions
diff --git a/‎README.md
Lines changed: 3 additions & 3 deletions b/‎README.md
Lines changed: 3 additions & 3 deletions
diff --git a/‎docs/_getting-started-linux-android.md
Lines changed: 6 additions & 10 deletions b/‎docs/_getting-started-linux-android.md
Lines changed: 6 additions & 10 deletions
diff --git a/‎docs/_getting-started-macos-android.md
Lines changed: 6 additions & 10 deletions b/‎docs/_getting-started-macos-android.md
Lines changed: 6 additions & 10 deletions
diff --git a/‎docs/_getting-started-macos-ios.md
Lines changed: 2 additions & 8 deletions b/‎docs/_getting-started-macos-ios.md
Lines changed: 2 additions & 8 deletions
diff --git a/‎docs/_getting-started-windows-android.md
Lines changed: 1 addition & 5 deletions b/‎docs/_getting-started-windows-android.md
Lines changed: 1 addition & 5 deletions
diff --git a/‎docs/_integration-with-exisiting-apps-java.md
Lines changed: 49 additions & 37 deletions b/‎docs/_integration-with-exisiting-apps-java.md
Lines changed: 49 additions & 37 deletions
diff --git a/‎docs/_integration-with-exisiting-apps-objc.md
Lines changed: 9 additions & 16 deletions b/‎docs/_integration-with-exisiting-apps-objc.md
Lines changed: 9 additions & 16 deletions
@@ -25,6 +25,7 @@ commands:
       - run:
           name: Yarn Install
           command: yarn install --no-progress --non-interactive --cache-folder ~/.cache/yarn
+          working_directory: ~/react-native-website
       - save_cache:
           paths:
             - node_modules
 
@@ -19,3 +19,6 @@ cnwebsite/scripts/sync-api-docs/generatedComponentApiDocs.js
 cnwebsite/scripts/sync-api-docs/extracted.json
 sync-api-docs/generatedComponentApiDocs.js
 sync-api-docs/extracted.json
+
+scripts/lint-examples/out/
+
@@ -15,13 +15,13 @@
     {
       "files": "*.md",
       "options": {
-        "arrowParens": "always",
-        "bracketSpacing": true,
+        "arrowParens": "avoid",
+        "bracketSpacing": false,
         "bracketSameLine": true,
         "printWidth": 66,
         "proseWrap": "preserve",
         "singleQuote": true,
-        "trailingComma": "none",
+        "trailingComma": "all",
         "endOfLine": "auto"
       }
     },
 
@@ -45,7 +45,7 @@ If you are looking for the source code of the [React Native Archive website](htt
 ## 📖 Overview
 
 If you would like to **_contribute an edit or addition to the docs,_** read through our [style guide](STYLEGUIDE.md) before you write anything.
-Almost all our content is generated from markdown files you can find in the `docs`, `website/architecure` and `website/contibuting` directories.
+Almost all our content is generated from markdown files you can find in the `docs`, `website/architecture` and `website/contributing` directories.
 
 **_To edit the internals of how the site is built,_** you may want to get familiarized with how the site is built. The React Native website is a static site generated using [Docusaurus](https://docusaurus.io/).
 The website configuration can be found in the `website` directory. Visit the Docusaurus website to learn more about all the available configuration options.
@@ -109,15 +109,15 @@ As mentioned above, the `docs` folder contains the source files for docs from "G
 The doc files for the "Architecture" and "Contribution" tabs are located inside `website` in the respective directories (unversioned/static docs).
 In most cases, you will only want to edit the files within those directories.
 
-If you're adding a new doc or you need to alter the order the docs appear in the sidebar, take a look at the `sidebars.json`, `sidebarsArchitecture.json` and `sidebarsContributing.json` files in the `website` directory. The sidebar files contains a list of document ids that should match those defined in the header metadata (aka frontmatter) of the docs markdown files.
+If you're adding a new doc or you need to alter the order the docs appear in the sidebar, take a look at the `sidebars.json`, `sidebarsArchitecture.json` and `sidebarsContributing.json` files in the `website` directory. The sidebar files contain a list of document ids that should match those defined in the header metadata (aka frontmatter) of the docs markdown files.
 
 ### Versioned docs
 
 Part of the React Native website is versioned to allow users to go back and see the Guides or API reference documentation for any given release. A new version of the website is generally generated whenever there is a new React Native release. When this happens, any changes made to the `docs` and `website/sidebars.json` files will be copied over to the corresponding location within `website/versioned_docs` and `website/versioned_sidebars`.
 
 > **_Note:_** Do not edit the auto-generated files within `versioned_docs` or `versioned_sidebars` unless you are sure it is necessary. Edits made to older versions will not be propagated to newer versions of the versioned docs.
 
-Docusaurus keeps track of the list of versions for the site in the `website/versions.json` file. The ordering of the versions in this file should be in reverse chronological order.
+Docusaurus keeps track of the list of versions for the site in the `website/versions.json` file. The ordering of versions in this file should be in reverse chronological order.
 
 #### Cutting a new version
 
 
@@ -49,21 +49,21 @@ 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.
 
-<h4>3. Configure the ANDROID_SDK_ROOT environment variable</h4>
+<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.
 
 Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file:
 
 ```shell
-export ANDROID_SDK_ROOT=$HOME/Library/Android/Sdk
-export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
-export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
+export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
+export PATH=$PATH:$ANDROID_HOME/platform-tools
 ```
 
 > `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.
 
-Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_SDK_ROOT has been set by running `echo $ANDROID_SDK_ROOT` and the appropriate directories have been added to your path by running `echo $PATH`.
+Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
 
 > Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
 
@@ -97,11 +97,7 @@ If you want to start a new project with a specific React Native version, you can
 npx react-native init AwesomeProject --version X.XX.X
 ```
 
-You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
-
-```shell
-npx react-native init AwesomeTSProject --template react-native-template-typescript
-```
+You can also start a project with a custom React Native template with the `--template` argument.
 
 <h2>Preparing the Android device</h2>
 
 
@@ -69,19 +69,19 @@ 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.
 
-<h4>3. Configure the ANDROID_SDK_ROOT environment variable</h4>
+<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.
 
 Add the following lines to your `~/.zprofile` or `~/.zshrc` (if you are using `bash`, then `~/.bash_profile` or `~/.bashrc`) config file:
 
 ```shell
-export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
-export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
-export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
+export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
+export PATH=$PATH:$ANDROID_HOME/platform-tools
 ```
 
-Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the config into your current shell. Verify that ANDROID_SDK_ROOT has been set by running `echo $ANDROID_SDK_ROOT` and the appropriate directories have been added to your path by running `echo $PATH`.
+Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
 
 > Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
 
@@ -109,11 +109,7 @@ If you want to start a new project with a specific React Native version, you can
 npx react-native init AwesomeProject --version X.XX.X
 ```
 
-You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
-
-```shell
-npx react-native init AwesomeTSProject --template react-native-template-typescript
-```
+You can also start a project with a custom React Native template with the `--template` argument.
 
 <h2>Preparing the Android device</h2>
 
 
@@ -1,4 +1,4 @@
-import M1Cocoapods from './\_markdown-m1-cocoapods.mdx'; import RemoveGlobalCLI from './\_remove-global-cli.md';
+import RemoveGlobalCLI from './\_remove-global-cli.md';
 
 ## Installing dependencies
 
@@ -70,8 +70,6 @@ To install a simulator, open <strong>Xcode > Preferences...</strong> and select
 
 For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
 
-<M1Cocoapods />
-
 ### React Native Command Line Interface
 
 React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
@@ -107,11 +105,7 @@ If you want to start a new project with a specific React Native version, you can
 npx react-native init AwesomeProject --version X.XX.X
 ```
 
-You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
-
-```shell
-npx react-native init AwesomeTSProject --template react-native-template-typescript
-```
+You can also start a project with a custom React Native template with the `--template` argument.
 
 > **Note** If the above command is failing, you may have old version of `react-native` or `react-native-cli` installed globally on your pc. Try uninstalling the cli and run the cli using `npx`.
 
 
@@ -128,11 +128,7 @@ If you want to start a new project with a specific React Native version, you can
 npx react-native init AwesomeProject --version X.XX.X
 ```
 
-You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
-
-```shell
-npx react-native init AwesomeTSProject --template react-native-template-typescript
-```
+You can also start a project with a custom React Native template with the `--template` argument.
 
 <h2>Preparing the Android device</h2>
 
 
@@ -41,7 +41,7 @@ $ yarn add react-native
 
 This will print a message similar to the following (scroll up in the yarn output to see it):
 
-> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
+> warning "react-native@0.70.5" has unmet peer dependency "react@18.1.0"
 
 This is OK, it means we also need to install React:
 
@@ -55,41 +55,54 @@ Add `node_modules/` to your `.gitignore` file.
 
 ## Adding React Native to your app
 
-### Configuring maven
+### Configuring Gradle
 
-Add the React Native and JSC dependency to your app's `build.gradle` file:
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
 
-```gradle
-dependencies {
-    implementation "com.android.support:appcompat-v7:27.1.1"
-    ...
-    implementation "com.facebook.react:react-native:+" // From node_modules
-    implementation "org.webkit:android-jsc:+"
-}
-```
+First, let's edit your `settings.gradle` file by adding this line:
 
-> If you want to ensure that you are always using a specific React Native version in your native build, replace `+` with an actual React Native version you've downloaded from `npm`.
+```groovy
+includeBuild('../node_modules/react-native-gradle-plugin')
+```
 
-Add an entry for the local React Native and JSC maven directories to the top-level `build.gradle`. Be sure to add it to the “allprojects” block, above other maven repositories:
+Then you need to open your top level `build.gradle` and include this line:
 
-```gradle
-allprojects {
+```diff
+buildscript {
     repositories {
-        maven {
-            // All of React Native (JS, Android binaries) is installed from npm
-            url "$rootDir/../node_modules/react-native/android"
-        }
-        maven {
-            // Android JSC is installed from npm
-            url("$rootDir/../node_modules/jsc-android/dist")
-        }
-        ...
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
++       classpath("com.facebook.react:react-native-gradle-plugin")
     }
-    ...
 }
 ```
 
-> Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.
+This makes sure the React Native Gradle Plugin is available inside your project.
+Finally, add those lines inside your app's `build.gradle` file (it's a different `build.gradle` file inside your app folder):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    // Other dependencies here
++   implementation "com.facebook.react:react-android"
++   implementation "com.facebook.react:hermes-android"
+}
+```
+
+Those depedencies are available on `mavenCentral()` so make sure you have it defined in your `repositories{}` block.
+
+:::info
+We intentionally don't specify the version for those `implementation` dependencies as the React Native Gradle Plugin will take care of it. If you don't use the React Native Gradle Plugin, you'll have to specify version manually.
+:::
 
 ### Enable native modules autolinking
 
@@ -156,12 +169,7 @@ In your `index.js`, create your component. In our sample here, we will add a `<T
 
 ```jsx
 import React from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
 
 const HelloWorld = () => {
   return (
@@ -173,18 +181,18 @@ const HelloWorld = () => {
 var styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   hello: {
     fontSize: 20,
     textAlign: 'center',
-    margin: 10
-  }
+    margin: 10,
+  },
 });
 
 AppRegistry.registerComponent(
   'MyReactNativeApp',
-  () => HelloWorld
+  () => HelloWorld,
 );
 ```
 
@@ -371,7 +379,11 @@ Once you reach your React-powered activity inside the app, it should load the Ja
 
 ### Creating a release build in Android Studio
 
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app. There’s one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+If you use the React Native Gradle Plugin as described above, everything should work when running app from Android Studio.
+
+If you're not using the React Native Gradle Plugin, there’s one additional step which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:
 
 ```shell
 $ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
 
@@ -1,4 +1,4 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 ## Key Concepts
 
@@ -186,8 +186,6 @@ Pod installation complete! There are 3 dependencies from the Podfile and 1 total
 
 > If this fails with errors mentioning `xcrun`, make sure that in Xcode in **Preferences > Locations** the Command Line Tools are assigned.
 
-<M1Cocoapods />
-
 ### Code integration
 
 Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.
@@ -208,15 +206,10 @@ In your `index.js`, create your component. In our sample here, we will add a `<T
 
 ```jsx
 import React from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-const RNHighScores = ({ scores }) => {
-  const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+  const contents = scores.map(score => (
     <Text key={score.name}>
       {score.name}:{score.value}
       {'\n'}
@@ -237,18 +230,18 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#FFFFFF'
+    backgroundColor: '#FFFFFF',
   },
   highScoresTitle: {
     fontSize: 20,
     textAlign: 'center',
-    margin: 10
+    margin: 10,
   },
   scores: {
     textAlign: 'center',
     color: '#333333',
-    marginBottom: 5
-  }
+    marginBottom: 5,
+  },
 });
 
 // Module name