Merge pull request #928 from facebook/main

sync

Author: sunnylqm

.gitignore

@@ -1,10 +1,25 @@
+# Logs
+logs
+*.log
+yarn-debug.log*
+yarn-error.log*
+
 node_modules
-.DS_Store
+*.local
+
+# Editor directories and files
+.vscode/*
 .idea
-.nvmrc
-.docusaurus
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-website/build/
+*.tsbuildinfo
+
+scripts/lint-examples/out/
 
 .nvmrc
 website/scripts/sync-api-docs/generatedComponentApiDocs.js
@@ -20,5 +35,6 @@ cnwebsite/scripts/sync-api-docs/extracted.json
 sync-api-docs/generatedComponentApiDocs.js
 sync-api-docs/extracted.json
 
-scripts/lint-examples/out/
-
+website/.docusaurus
+website/.cache-loader
+website/build/

CODE_OF_CONDUCT.md

@@ -72,9 +72,9 @@ members of the project's leadership.
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>
 
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+<https://www.contributor-covenant.org/faq>

CONTRIBUTING.md

@@ -7,7 +7,7 @@ The [Open Source Guides](https://opensource.guide/) website has a collection of
 - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
 - [Building Welcoming Communities](https://opensource.guide/building-community/)
 
-### Code of Conduct
+## Code of Conduct
 
 As a reminder, all contributors are expected to adhere to the [Code of Conduct](https://github.com/facebook/react-native-website/blob/main/CODE_OF_CONDUCT.md).
 

README.md

@@ -25,21 +25,21 @@ If you are looking for the source code of the [React Native Archive website](htt
 
 ### Prerequisites
 
-1.  [Git](https://git-scm.com/downloads).
-1.  [Node](https://nodejs.org/en/download/) _(version 12 or greater)_.
-1.  [Yarn](https://yarnpkg.com/lang/en/docs/install/) _(version 1.5 or greater)_.
-1.  A fork of the repo _(for any contributions)_.
-1.  A clone of the `react-native-website` repo.
+1. [Git](https://git-scm.com/downloads).
+1. [Node](https://nodejs.org/en/download/) _(version 12 or greater)_.
+1. [Yarn](https://yarnpkg.com/lang/en/docs/install/) _(version 1.5 or greater)_.
+1. A fork of the repo _(for any contributions)_.
+1. A clone of the `react-native-website` repo.
 
 ### Installation
 
-1.  `cd react-native-website` to go into the project root.
-1.  Run `yarn` to install the website's workspace dependencies.
+1. `cd react-native-website` to go into the project root.
+1. Run `yarn` to install the website's workspace dependencies.
 
 ### Running locally
 
-1.  Run `yarn start` to start the development server _(powered by [Docusaurus](https://v2.docusaurus.io))_.
-1.  Open http://localhost:3000/ site in your favorite browser.
+1. Run `yarn start` to start the development server _(powered by [Docusaurus](https://docusaurus.io))_.
+1. Open <http://localhost:3000/> site in your favorite browser.
 
 ## 📖 Overview
 
@@ -93,12 +93,13 @@ react-native-website/
     ├── versioned_sidebars/
     │   ├── [GENERATED VERSIONED SIDEBARS]
     │   └── ...
-    ├── docusaurus.config.js
+    ├── docusaurus.config.ts
     ├── package.json
     ├── showcase.json
-    ├── sidebars.json
-    ├── sidebarsArchitecture.json
-    ├── sidebarsContributing.json
+    ├── sidebars.ts
+    ├── sidebarsArchitecture.ts
+    ├── sidebarsCommunity.ts
+    ├── sidebarsContributing.ts
     └── versions.json
 ```
 
@@ -108,11 +109,11 @@ 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 contain 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.ts`, `sidebarsArchitecture.ts` and `sidebarsContributing.ts` 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`.
+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.ts` 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.
 
@@ -128,13 +129,13 @@ This can be done by updating the `package.json` and configuration files in `scri
 
 ##### After Release
 
-1.  `cd react-native-website` to go into the project root.
-1.  `cd website` to go into the website portion of the project.
-1.  Run `yarn version:cut <newVersion>` where `<newVersion>` is the new version being released.
+1. `cd react-native-website` to go into the project root.
+1. `cd website` to go into the website portion of the project.
+1. Run `yarn version:cut <newVersion>` where `<newVersion>` is the new version being released.
 
 ## 🔧 Website configuration
 
-The main config file for the website can be found at `website/docusaurus.config.js`. This file tells [Docusaurus how to build the website](https://v2.docusaurus.io/docs/configuration). Edits to this file are rarely necessary.
+The main config file for the website can be found at `website/docusaurus.config.ts`. This file tells [Docusaurus how to build the website](https://docusaurus.io/docs/configuration). Edits to this file are rarely necessary.
 
 The `core` subdirectory contains JavaScript and React components that are the core part of the website.
 
@@ -148,21 +149,21 @@ The `showcase.json` file contains the list of users that are highlighted in the
 
 ### Create a branch
 
-1.  `git checkout main` from any folder in your local `react-native-website` repository.
-1.  `git pull origin main` to ensure you have the latest main code.
-1.  `git checkout -b the-name-of-my-branch` to create a branch.
+1. `git checkout main` from any folder in your local `react-native-website` repository.
+1. `git pull origin main` to ensure you have the latest main code.
+1. `git checkout -b the-name-of-my-branch` to create a branch.
     > replace `the-name-of-my-branch` with a suitable name, such as `update-animations-page`
 
 ### Make the change
 
-1.  Follow the "[Running locally](#running-locally)" instructions.
-1.  Save the files and check in the browser.
-1.  Some changes may require a server restart to generate new files. (Pages in `docs` always do!)
-1.  Edits to pages in `docs` will only be visible in the latest version of the documentation, called "Next", located under the `docs/next` path.
+1. Follow the "[Running locally](#running-locally)" instructions.
+1. Save the files and check in the browser.
+1. Some changes may require a server restart to generate new files. (Pages in `docs` always do!)
+1. Edits to pages in `docs` will only be visible in the latest version of the documentation, called "Next", located under the `docs/next` path.
 
-Visit **http://localhost:3000/docs/next/YOUR-DOCS-PAGE** to see your work.
+Visit **<http://localhost:3000/docs/next/YOUR-DOCS-PAGE>** to see your work.
 
-> Visit http://localhost:3000/versions to see the list of all versions of the docs.
+> Visit <http://localhost:3000/versions> to see the list of all versions of the docs.
 
 ### Test the change
 
@@ -173,13 +174,13 @@ If possible, test any visual changes in all latest versions of the following bro
 
 ### Push it
 
-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.
+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`
-1.  Go to the [react-native-website repo](https://github.com/facebook/react-native-website) and you should see recently pushed branches.
-1.  Follow GitHub's instructions.
-1.  Describe briefly your changes (in case of visual changes, please include screenshots).
+1. `git push my-fork-name the-name-of-my-branch`
+1. Go to the [react-native-website repo](https://github.com/facebook/react-native-website) and you should see recently pushed branches.
+1. Follow GitHub's instructions.
+1. Describe briefly your changes (in case of visual changes, please include screenshots).
 
 ## 📄 License
 

STYLEGUIDE.md

@@ -121,7 +121,7 @@ When it comes to describing property values, be definitive in what is and is not
 
 ## Other grammar policies
 
-* Capitalize “Hooks.”
+- Capitalize “Hooks.”
 
 ## Empathize with readers
 

docs/_integration-with-existing-apps-ios.md

@@ -28,11 +28,11 @@ To ensure a smooth experience, create a new folder for your integrated React Nat
 
 Go to the root directory and run the following command:
 
-```
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/package.json
+```shell
+curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/package.json
 ```
 
-This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.76-stable/template/package.json) to your project.
+This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/package.json) to your project.
 
 Next, install the NPM packages by running:
 
@@ -55,7 +55,7 @@ yarn install
 
 Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
 
-Add `node_modules/` to your `.gitignore` file (here the [Community default one](https://github.com/react-native-community/template/blob/0.76-stable/template/_gitignore)).
+Add `node_modules/` to your `.gitignore` file (here the [Community default one](https://github.com/react-native-community/template/blob/0.77-stable/template/_gitignore)).
 
 ### 3. Install Development tools
 
@@ -87,22 +87,22 @@ To configure CocoaPods, we need two files:
 For the **Gemfile**, go to the root directory of your project and run this command
 
 ```sh
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/Gemfile
+curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/Gemfile
 ```
 
 This will download the Gemfile from the template.
 Similarly, for the **Podfile**, go to the `ios` folder of your project and run
 
 ```sh
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/ios/Podfile
+curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/ios/Podfile
 ```
 
-Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.76-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile).
+Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.77-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/Podfile).
 
 :::note
-Remember to change [this line](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile#L17) and [this line](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile#L26) of the Podfile to match the name of your app.
+Remember to change [this line](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/Podfile#L17) and [this line](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/Podfile#L26) of the Podfile to match the name of your app.
 
-If your app don't have tests, remember to remove [this block](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile#L26-L29).
+If your app don't have tests, remember to remove [this block](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/Podfile#L26-L29).
 :::
 
 Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
@@ -127,7 +127,7 @@ First, create an empty `index.js` file in the root of your React Native project.
 
 `index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
 
-Our `index.js` should look as follows (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.76-stable/template/index.js)):
+Our `index.js` should look as follows (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/index.js)):
 
 ```js
 import {AppRegistry} from 'react-native';
@@ -138,7 +138,7 @@ AppRegistry.registerComponent('HelloWorld', () => App);
 
 ### Create a `App.tsx` file
 
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application ([link](https://github.com/react-native-community/template/blob/0.76-stable/template/App.tsx)):
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application ([link](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)):
 
 ```tsx
 import React from 'react';
@@ -211,7 +211,7 @@ const styles = StyleSheet.create({
 export default App;
 ```
 
-Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.76-stable/template/App.tsx)
+Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)
 
 ## 5. Integrating with your iOS code
 
@@ -279,7 +279,7 @@ First, we need to extends the `AppDelegate` to inherit from one of the classes p
 
 To achieve this, we have to modify the `AppDelegate.h` file and the `AppDelegate.m` files:
 
-1. Open the `AppDelegate.h` files and modify it as it follows (See the official template's [AppDelegate.h](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/HelloWorld/AppDelegate.h) as reference):
+1. Open the `AppDelegate.h` files and modify it as it follows (See the official template's [AppDelegate.h](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/HelloWorld/AppDelegate.h) as reference):
 
 ```diff title="AppDelegate.h changes"
 #import <UIKit/UIKit.h>
@@ -292,7 +292,7 @@ To achieve this, we have to modify the `AppDelegate.h` file and the `AppDelegate
 @end
 ```
 
-2. Open the `AppDelegate.mm` file and modify it as it follows (See the official template's [AppDelegate.mm](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/HelloWorld/AppDelegate.mm) as reference
+2. Open the `AppDelegate.mm` file and modify it as it follows (See the official template's [AppDelegate.mm](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/HelloWorld/AppDelegate.mm) as reference
 
 ```diff title="AppDelegate.mm"
 #import "AppDelegate.h"
@@ -349,7 +349,6 @@ To achieve this, we have to modify the `AppDelegate.swift`
 ```diff title="AppDelegate.swift"
 import UIKit
 +import React_RCTAppDelegate
-+import React_RCTAppDelegate
 
 @main
 -class AppDelegate: UIResponder, UIApplicationDelegate {
@@ -551,7 +550,7 @@ const {getDefaultConfig} = require('@react-native/metro-config');
 module.exports = getDefaultConfig(__dirname);
 ```
 
-You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.76-stable/template/metro.config.js) from the Community template file as reference.
+You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.77-stable/template/metro.config.js) from the Community template file as reference.
 
 Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project: