From 8ae89406098caa512fb3343e44b4ef67a55c52fb Mon Sep 17 00:00:00 2001 From: Nicola Corti Date: Tue, 7 Jan 2025 11:35:28 +0000 Subject: [PATCH] Fix integration with existing apps URLs The urls should point to the right branch in the template repo, otherwise users will download a wrong version of the files. Fixes https://github.com/facebook/react-native-website/issues/4426 --- docs/_integration-with-existing-apps-ios.md | 28 +++++++++---------- .../_integration-with-existing-apps-kotlin.md | 22 +++++++-------- .../_integration-with-existing-apps-kotlin.md | 6 ++-- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/_integration-with-existing-apps-ios.md b/docs/_integration-with-existing-apps-ios.md index dc59c8888ca..11c773a4965 100644 --- a/docs/_integration-with-existing-apps-ios.md +++ b/docs/_integration-with-existing-apps-ios.md @@ -29,10 +29,10 @@ 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 +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]() 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]() 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 @@ -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" @@ -550,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: diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 0feda99ba54..971e3f45acf 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -63,7 +63,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.76-stable/template/android/settings.gradle)): +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)): ```groovy // Configures the React Native Gradle Settings plugin used for autolinking @@ -78,7 +78,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.76-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](https://github.com/react-native-community/template/blob/0.77-stable/template/android/build.gradle)): ```diff buildscript { @@ -94,7 +94,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.76-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](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/build.gradle)): ```diff apply plugin: "com.android.application" @@ -118,7 +118,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.76-stable/template/android/gradle.properties)): +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)): ```diff +reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 @@ -155,7 +155,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.76-stable/template/android/app/src/main/AndroidManifest.xml) and [debug](https://github.com/react-native-community/template/blob/0.76-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](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) This is needed as your application will communicate with your local bundler, [Metro][https://metrobundler.dev/], via HTTP. @@ -173,7 +173,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'; @@ -184,7 +184,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.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]() 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)): ```tsx import React from 'react'; @@ -257,7 +257,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 Android code @@ -367,7 +367,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.76-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt) +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) #### Creating a `ReactActivity` @@ -423,7 +423,7 @@ class MyReactActivity : ReactActivity() { -As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.76-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt) +As usual, here the [MainActivity.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) 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: @@ -457,7 +457,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: diff --git a/website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md index 0feda99ba54..7a0188623bb 100644 --- a/website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md +++ b/website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md @@ -29,10 +29,10 @@ 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.75-stable/template/package.json +curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/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](https://github.com/react-native-community/template/blob/0.76-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.75-stable/template/_gitignore)). +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)). ## 3. Adding React Native to your app