Skip to content

Commit 1d44e58

Browse files
authored
Fix integration with existing apps URLs (facebook#4427)
1 parent 5548cc1 commit 1d44e58

File tree

3 files changed

+28
-28
lines changed

3 files changed

+28
-28
lines changed

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ To ensure a smooth experience, create a new folder for your integrated React Nat
2929
Go to the root directory and run the following command:
3030

3131
```
32-
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/package.json
32+
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/package.json
3333
```
3434

35-
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.
35+
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.
3636

3737
Next, install the NPM packages by running:
3838

@@ -55,7 +55,7 @@ yarn install
5555

5656
Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
5757

58-
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)).
58+
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)).
5959

6060
### 3. Install Development tools
6161

@@ -87,22 +87,22 @@ To configure CocoaPods, we need two files:
8787
For the **Gemfile**, go to the root directory of your project and run this command
8888

8989
```sh
90-
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/Gemfile
90+
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/Gemfile
9191
```
9292

9393
This will download the Gemfile from the template.
9494
Similarly, for the **Podfile**, go to the `ios` folder of your project and run
9595

9696
```sh
97-
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/ios/Podfile
97+
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/ios/Podfile
9898
```
9999

100-
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).
100+
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).
101101

102102
:::note
103-
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.
103+
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.
104104

105-
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).
105+
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).
106106
:::
107107

108108
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.
127127

128128
`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.
129129

130-
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)):
130+
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)):
131131

132132
```js
133133
import {AppRegistry} from 'react-native';
@@ -138,7 +138,7 @@ AppRegistry.registerComponent('HelloWorld', () => App);
138138

139139
### Create a `App.tsx` file
140140

141-
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)):
141+
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)):
142142

143143
```tsx
144144
import React from 'react';
@@ -211,7 +211,7 @@ const styles = StyleSheet.create({
211211
export default App;
212212
```
213213

214-
Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.76-stable/template/App.tsx)
214+
Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)
215215

216216
## 5. Integrating with your iOS code
217217

@@ -279,7 +279,7 @@ First, we need to extends the `AppDelegate` to inherit from one of the classes p
279279

280280
To achieve this, we have to modify the `AppDelegate.h` file and the `AppDelegate.m` files:
281281

282-
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):
282+
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):
283283

284284
```diff title="AppDelegate.h changes"
285285
#import <UIKit/UIKit.h>
@@ -292,7 +292,7 @@ To achieve this, we have to modify the `AppDelegate.h` file and the `AppDelegate
292292
@end
293293
```
294294

295-
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
295+
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
296296

297297
```diff title="AppDelegate.mm"
298298
#import "AppDelegate.h"
@@ -550,7 +550,7 @@ const {getDefaultConfig} = require('@react-native/metro-config');
550550
module.exports = getDefaultConfig(__dirname);
551551
```
552552

553-
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.
553+
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.
554554

555555
Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project:
556556

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Add `node_modules/` to your `.gitignore` file (here the [Community default one](
6363

6464
React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
6565

66-
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)):
66+
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)):
6767

6868
```groovy
6969
// Configures the React Native Gradle Settings plugin used for autolinking
@@ -78,7 +78,7 @@ includeBuild("../node_modules/@react-native/gradle-plugin")
7878
// include(":app")
7979
```
8080

81-
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)):
81+
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)):
8282

8383
```diff
8484
buildscript {
@@ -94,7 +94,7 @@ buildscript {
9494
```
9595

9696
This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
97-
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)):
97+
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)):
9898

9999
```diff
100100
apply plugin: "com.android.application"
@@ -118,7 +118,7 @@ dependencies {
118118
+}
119119
```
120120

121-
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)):
121+
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)):
122122

123123
```diff
124124
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
@@ -155,7 +155,7 @@ Then you need to enable [cleartext traffic](https://developer.android.com/traini
155155
</manifest>
156156
```
157157

158-
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)
158+
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)
159159

160160
This is needed as your application will communicate with your local bundler, [Metro][https://metrobundler.dev/], via HTTP.
161161

@@ -173,7 +173,7 @@ First, create an empty `index.js` file in the root of your React Native project.
173173

174174
`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.
175175

176-
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)):
176+
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)):
177177

178178
```js
179179
import {AppRegistry} from 'react-native';
@@ -184,7 +184,7 @@ AppRegistry.registerComponent('HelloWorld', () => App);
184184

185185
### Create a `App.tsx` file
186186

187-
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 Android application ([link](https://github.com/react-native-community/template/blob/0.76-stable/template/App.tsx)):
187+
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 Android application ([link](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)):
188188

189189
```tsx
190190
import React from 'react';
@@ -257,7 +257,7 @@ const styles = StyleSheet.create({
257257
export default App;
258258
```
259259

260-
Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.76-stable/template/App.tsx)
260+
Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)
261261

262262
## 5. Integrating with your Android code
263263

@@ -367,7 +367,7 @@ import android.app.Application
367367
</TabItem>
368368
</Tabs>
369369

370-
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)
370+
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)
371371

372372
#### Creating a `ReactActivity`
373373

@@ -423,7 +423,7 @@ class MyReactActivity : ReactActivity() {
423423
</TabItem>
424424
</Tabs>
425425

426-
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)
426+
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)
427427

428428
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:
429429

@@ -457,7 +457,7 @@ const {getDefaultConfig} = require('@react-native/metro-config');
457457
module.exports = getDefaultConfig(__dirname);
458458
```
459459

460-
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.
460+
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.
461461

462462
Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project:
463463

website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ To ensure a smooth experience, create a new folder for your integrated React Nat
2929
Go to the root directory and run the following command:
3030

3131
```
32-
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json
32+
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/package.json
3333
```
3434

35-
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.
35+
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.
3636

3737
Next, install the NPM packages by running:
3838

@@ -55,7 +55,7 @@ yarn install
5555

5656
Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
5757

58-
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)).
58+
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)).
5959

6060
## 3. Adding React Native to your app
6161

0 commit comments

Comments
 (0)