From 600e6c98ee484c5f590d448317c835c500b907a4 Mon Sep 17 00:00:00 2001 From: Simek Date: Tue, 23 Sep 2025 12:39:37 +0200 Subject: [PATCH 1/2] add helpers and components to resolve docs version automatically --- docs/_integration-with-existing-apps-ios.md | 43 +++++++++++-------- .../_integration-with-existing-apps-kotlin.md | 41 ++++++++++-------- docs/the-new-architecture/using-codegen.md | 9 ++-- docs/turbo-native-modules.md | 12 ++++-- website/core/RNTemplateRepoLink.tsx | 15 +++++++ website/src/getCurrentVersion.ts | 6 +++ .../getTemplateBranchNameForCurrentVersion.ts | 6 +++ .../_integration-with-existing-apps-ios.md | 43 +++++++++++-------- .../_integration-with-existing-apps-kotlin.md | 41 ++++++++++-------- .../the-new-architecture/using-codegen.md | 9 ++-- .../version-0.81/turbo-native-modules.md | 12 ++++-- 11 files changed, 149 insertions(+), 88 deletions(-) create mode 100644 website/core/RNTemplateRepoLink.tsx create mode 100644 website/src/getCurrentVersion.ts create mode 100644 website/src/getTemplateBranchNameForCurrentVersion.ts 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..40847ccf45a 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()}.0`} + ## 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..d5110432f68 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()}.0`} + ## Native Persistent Storage From fb1b26174ec9d490778c3461d0617c8f7a14e52e Mon Sep 17 00:00:00 2001 From: Simek Date: Tue, 23 Sep 2025 12:58:32 +0200 Subject: [PATCH 2/2] remove trailing zero in turbo modules command --- docs/turbo-native-modules.md | 2 +- website/versioned_docs/version-0.81/turbo-native-modules.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/turbo-native-modules.md b/docs/turbo-native-modules.md index 40847ccf45a..424edf9924d 100644 --- a/docs/turbo-native-modules.md +++ b/docs/turbo-native-modules.md @@ -24,7 +24,7 @@ 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: -{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}.0`} +{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`} ## Native Persistent Storage 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 d5110432f68..d409797576e 100644 --- a/website/versioned_docs/version-0.81/turbo-native-modules.md +++ b/website/versioned_docs/version-0.81/turbo-native-modules.md @@ -24,7 +24,7 @@ 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: -{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}.0`} +{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`} ## Native Persistent Storage