diff --git a/docs/_integration-with-existing-apps-ios.md b/docs/_integration-with-existing-apps-ios.md
index 3a0b839d66f..54d50231aa7 100644
--- a/docs/_integration-with-existing-apps-ios.md
+++ b/docs/_integration-with-existing-apps-ios.md
@@ -1,4 +1,9 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
## Key Concepts
@@ -28,11 +33,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:
-```shell
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/package.json
-```
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+
-This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.78-stable/template/package.json) to your project.
+This will copy the `package.json` file from the Community template to your project.
Next, install the NPM packages by running:
@@ -55,7 +60,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.78-stable/template/_gitignore)).
+Add `node_modules/` to your `.gitignore` file (here the Community default one).
### 3. Install Development tools
@@ -86,9 +91,9 @@ 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.78-stable/template/Gemfile
-```
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+
This will download the Gemfile from the template.
@@ -108,14 +113,14 @@ Xcode 16 generates a project in a slightly different ways from previous versions
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.78-stable/template/ios/Podfile
-```
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+
-Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.78-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile).
+Please use the Community Template as a reference point for the Gemfile and for the Podfile.
:::note
-Remember to change [this line](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L17).
+Remember to change this line.
:::
Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
@@ -140,7 +145,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.78-stable/template/index.js)):
+Our `index.js` should look as follows (here the Community template file as reference):
```js
import {AppRegistry} from 'react-native';
@@ -151,7 +156,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]() 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.78-stable/template/App.tsx)):
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX]() expressions. It contains the root React Native component that we will integrate into our iOS application (link):
```tsx
import React from 'react';
@@ -224,7 +229,7 @@ const styles = StyleSheet.create({
export default App;
```
-Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx)
+Here is the Community template file as reference.
## 5. Integrating with your iOS code
@@ -460,7 +465,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.78-stable/template/metro.config.js) from the Community template file as reference.
+You can checkout the `metro.config.js` file from the Community template file as reference.
Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
@@ -468,7 +473,7 @@ Then, you need to create a `.watchmanconfig` file in the root of your project. T
echo {} > .watchmanconfig
```
-Once you have the configurations file in place, you can run the bundler. Run the following command in the root directory of your project:
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md
index 0a2839896a7..23414c63a3b 100644
--- a/docs/_integration-with-existing-apps-kotlin.md
+++ b/docs/_integration-with-existing-apps-kotlin.md
@@ -1,4 +1,9 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
## Key Concepts
@@ -28,11 +33,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:
-```shell
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json
-```
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+
-This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.75-stable/template/package.json) to your project.
+This will copy the `package.json` file from the Community template to your project.
Next, install the NPM packages by running:
@@ -55,7 +60,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.75-stable/template/_gitignore)).
+Add `node_modules/` to your `.gitignore` file (here the Community default one).
## 3. Adding React Native to your app
@@ -63,7 +68,7 @@ Add `node_modules/` to your `.gitignore` file (here the [Community default one](
React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the [Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/android/settings.gradle)):
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the Community template):
```groovy
// Configures the React Native Gradle Settings plugin used for autolinking
@@ -78,7 +83,7 @@ includeBuild("../node_modules/@react-native/gradle-plugin")
// include(":app")
```
-Then you need to open your top level `build.gradle` and include this line (as suggested from the [Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/android/build.gradle)):
+Then you need to open your top level `build.gradle` and include this line (as suggested from the Community template):
```diff
buildscript {
@@ -94,7 +99,7 @@ buildscript {
```
This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/build.gradle)):
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the Community template file as reference):
```diff
apply plugin: "com.android.application"
@@ -118,7 +123,7 @@ dependencies {
+}
```
-Finally, open your application `gradle.properties` files and add the following line (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/gradle.properties)):
+Finally, open your application `gradle.properties` files and add the following line (here the Community template file as reference):
```diff
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
@@ -155,7 +160,7 @@ Then you need to enable [cleartext traffic](https://developer.android.com/traini
```
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: [main](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/AndroidManifest.xml) and [debug](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/debug/AndroidManifest.xml)
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: main and debug.
This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
@@ -173,7 +178,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.77-stable/template/index.js)):
+Our index.js should look as follows (here the Community template file as reference):
```js
import {AppRegistry} from 'react-native';
@@ -184,7 +189,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]() expressions. It contains the root React Native component that we will integrate into our Android application ([link](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)):
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX]() expressions. It contains the root React Native component that we will integrate into our Android application (link):
```tsx
import React from 'react';
@@ -257,7 +262,7 @@ const styles = StyleSheet.create({
export default App;
```
-Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)
+Here is the Community template file as reference.
## 5. Integrating with your Android code
@@ -368,7 +373,7 @@ import android.app.Application
-As usual, here the [MainApplication.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt)
+As usual, here the `MainApplication.kt` Community template file as reference.
#### Creating a `ReactActivity`
@@ -424,7 +429,7 @@ class MyReactActivity : ReactActivity() {
-As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.80-stable/template/android/app/src/main/java/com/helloworld/MainActivity.kt)
+As usual, here the `MainActivity.kt` Community template file as reference.
Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
@@ -458,9 +463,9 @@ 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.77-stable/template/metro.config.js) from the Community template file as reference.
+You can checkout the `metro.config.js` file 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:
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
diff --git a/docs/the-new-architecture/using-codegen.md b/docs/the-new-architecture/using-codegen.md
index 971833eb33c..56aca7b981c 100644
--- a/docs/the-new-architecture/using-codegen.md
+++ b/docs/the-new-architecture/using-codegen.md
@@ -1,3 +1,6 @@
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+
# Using Codegen
This guide teaches how to:
@@ -15,9 +18,9 @@ The **Codegen** process is tightly coupled with the build of the app, and the sc
For the sake of this guide, create a project using the React Native CLI as follows:
-```bash
-npx @react-native-community/cli@latest init SampleApp --version 0.76.0
-```
+
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+
**Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them.
diff --git a/docs/turbo-native-modules.md b/docs/turbo-native-modules.md
index 984c5c79462..424edf9924d 100644
--- a/docs/turbo-native-modules.md
+++ b/docs/turbo-native-modules.md
@@ -3,7 +3,11 @@ id: turbo-native-modules-introduction
title: 'Native Modules: Introduction'
---
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
# Native Modules
@@ -19,9 +23,9 @@ The basic steps are:
Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-```shell
-npx @react-native-community/cli@latest init TurboModuleExample --version 0.76.0
-```
+
+{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
+
## Native Persistent Storage
diff --git a/website/core/RNTemplateRepoLink.tsx b/website/core/RNTemplateRepoLink.tsx
new file mode 100644
index 00000000000..251aa242c9d
--- /dev/null
+++ b/website/core/RNTemplateRepoLink.tsx
@@ -0,0 +1,15 @@
+import A from '@theme/MDXComponents/A';
+import type {ComponentProps} from 'react';
+import {getTemplateBranchNameForCurrentVersion} from '../src/getTemplateBranchNameForCurrentVersion';
+
+type Props = ComponentProps<'a'>;
+
+export default function RNTemplateRepoLink({href, children, ...rest}: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/website/src/getCurrentVersion.ts b/website/src/getCurrentVersion.ts
new file mode 100644
index 00000000000..24c5e787064
--- /dev/null
+++ b/website/src/getCurrentVersion.ts
@@ -0,0 +1,6 @@
+import {useActiveVersion} from '@docusaurus/plugin-content-docs/client';
+
+export function getCurrentVersion() {
+ const version = useActiveVersion(undefined);
+ return version.label === 'Next' ? 'latest' : version.label;
+}
diff --git a/website/src/getTemplateBranchNameForCurrentVersion.ts b/website/src/getTemplateBranchNameForCurrentVersion.ts
new file mode 100644
index 00000000000..e3136d5f7ee
--- /dev/null
+++ b/website/src/getTemplateBranchNameForCurrentVersion.ts
@@ -0,0 +1,6 @@
+import {useActiveVersion} from '@docusaurus/plugin-content-docs/client';
+
+export function getTemplateBranchNameForCurrentVersion() {
+ const version = useActiveVersion(undefined);
+ return version.label === 'Next' ? 'main' : `${version.label}-stable`;
+}
diff --git a/website/versioned_docs/version-0.81/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.81/_integration-with-existing-apps-ios.md
index 3a0b839d66f..54d50231aa7 100644
--- a/website/versioned_docs/version-0.81/_integration-with-existing-apps-ios.md
+++ b/website/versioned_docs/version-0.81/_integration-with-existing-apps-ios.md
@@ -1,4 +1,9 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
## Key Concepts
@@ -28,11 +33,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:
-```shell
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/package.json
-```
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+
-This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.78-stable/template/package.json) to your project.
+This will copy the `package.json` file from the Community template to your project.
Next, install the NPM packages by running:
@@ -55,7 +60,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.78-stable/template/_gitignore)).
+Add `node_modules/` to your `.gitignore` file (here the Community default one).
### 3. Install Development tools
@@ -86,9 +91,9 @@ 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.78-stable/template/Gemfile
-```
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+
This will download the Gemfile from the template.
@@ -108,14 +113,14 @@ Xcode 16 generates a project in a slightly different ways from previous versions
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.78-stable/template/ios/Podfile
-```
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+
-Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.78-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile).
+Please use the Community Template as a reference point for the Gemfile and for the Podfile.
:::note
-Remember to change [this line](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L17).
+Remember to change this line.
:::
Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
@@ -140,7 +145,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.78-stable/template/index.js)):
+Our `index.js` should look as follows (here the Community template file as reference):
```js
import {AppRegistry} from 'react-native';
@@ -151,7 +156,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]() 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.78-stable/template/App.tsx)):
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX]() expressions. It contains the root React Native component that we will integrate into our iOS application (link):
```tsx
import React from 'react';
@@ -224,7 +229,7 @@ const styles = StyleSheet.create({
export default App;
```
-Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx)
+Here is the Community template file as reference.
## 5. Integrating with your iOS code
@@ -460,7 +465,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.78-stable/template/metro.config.js) from the Community template file as reference.
+You can checkout the `metro.config.js` file from the Community template file as reference.
Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
@@ -468,7 +473,7 @@ Then, you need to create a `.watchmanconfig` file in the root of your project. T
echo {} > .watchmanconfig
```
-Once you have the configurations file in place, you can run the bundler. Run the following command in the root directory of your project:
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
diff --git a/website/versioned_docs/version-0.81/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.81/_integration-with-existing-apps-kotlin.md
index 0a2839896a7..23414c63a3b 100644
--- a/website/versioned_docs/version-0.81/_integration-with-existing-apps-kotlin.md
+++ b/website/versioned_docs/version-0.81/_integration-with-existing-apps-kotlin.md
@@ -1,4 +1,9 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
## Key Concepts
@@ -28,11 +33,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:
-```shell
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json
-```
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+
-This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.75-stable/template/package.json) to your project.
+This will copy the `package.json` file from the Community template to your project.
Next, install the NPM packages by running:
@@ -55,7 +60,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.75-stable/template/_gitignore)).
+Add `node_modules/` to your `.gitignore` file (here the Community default one).
## 3. Adding React Native to your app
@@ -63,7 +68,7 @@ Add `node_modules/` to your `.gitignore` file (here the [Community default one](
React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the [Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/android/settings.gradle)):
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the Community template):
```groovy
// Configures the React Native Gradle Settings plugin used for autolinking
@@ -78,7 +83,7 @@ includeBuild("../node_modules/@react-native/gradle-plugin")
// include(":app")
```
-Then you need to open your top level `build.gradle` and include this line (as suggested from the [Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/android/build.gradle)):
+Then you need to open your top level `build.gradle` and include this line (as suggested from the Community template):
```diff
buildscript {
@@ -94,7 +99,7 @@ buildscript {
```
This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/build.gradle)):
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the Community template file as reference):
```diff
apply plugin: "com.android.application"
@@ -118,7 +123,7 @@ dependencies {
+}
```
-Finally, open your application `gradle.properties` files and add the following line (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/gradle.properties)):
+Finally, open your application `gradle.properties` files and add the following line (here the Community template file as reference):
```diff
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
@@ -155,7 +160,7 @@ Then you need to enable [cleartext traffic](https://developer.android.com/traini
```
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: [main](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/AndroidManifest.xml) and [debug](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/debug/AndroidManifest.xml)
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: main and debug.
This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
@@ -173,7 +178,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.77-stable/template/index.js)):
+Our index.js should look as follows (here the Community template file as reference):
```js
import {AppRegistry} from 'react-native';
@@ -184,7 +189,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]() expressions. It contains the root React Native component that we will integrate into our Android application ([link](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)):
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX]() expressions. It contains the root React Native component that we will integrate into our Android application (link):
```tsx
import React from 'react';
@@ -257,7 +262,7 @@ const styles = StyleSheet.create({
export default App;
```
-Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)
+Here is the Community template file as reference.
## 5. Integrating with your Android code
@@ -368,7 +373,7 @@ import android.app.Application
-As usual, here the [MainApplication.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt)
+As usual, here the `MainApplication.kt` Community template file as reference.
#### Creating a `ReactActivity`
@@ -424,7 +429,7 @@ class MyReactActivity : ReactActivity() {
-As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.80-stable/template/android/app/src/main/java/com/helloworld/MainActivity.kt)
+As usual, here the `MainActivity.kt` Community template file as reference.
Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
@@ -458,9 +463,9 @@ 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.77-stable/template/metro.config.js) from the Community template file as reference.
+You can checkout the `metro.config.js` file 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:
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
diff --git a/website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md
index 971833eb33c..56aca7b981c 100644
--- a/website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md
+++ b/website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md
@@ -1,3 +1,6 @@
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+
# Using Codegen
This guide teaches how to:
@@ -15,9 +18,9 @@ The **Codegen** process is tightly coupled with the build of the app, and the sc
For the sake of this guide, create a project using the React Native CLI as follows:
-```bash
-npx @react-native-community/cli@latest init SampleApp --version 0.76.0
-```
+
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+
**Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them.
diff --git a/website/versioned_docs/version-0.81/turbo-native-modules.md b/website/versioned_docs/version-0.81/turbo-native-modules.md
index 8493c1febca..d409797576e 100644
--- a/website/versioned_docs/version-0.81/turbo-native-modules.md
+++ b/website/versioned_docs/version-0.81/turbo-native-modules.md
@@ -3,7 +3,11 @@ id: turbo-native-modules-introduction
title: 'Native Modules: Introduction'
---
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
# Native Modules
@@ -19,9 +23,9 @@ The basic steps are:
Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-```shell
-npx @react-native-community/cli@latest init TurboModuleExample --version 0.76.0
-```
+
+{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
+
## Native Persistent Storage