You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
36
36
37
37
Next, install the NPM packages by running:
38
38
@@ -55,7 +55,7 @@ yarn install
55
55
56
56
Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
57
57
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)).
59
59
60
60
### 3. Install Development tools
61
61
@@ -87,22 +87,22 @@ To configure CocoaPods, we need two files:
87
87
For the **Gemfile**, go to the root directory of your project and run this command
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).
101
101
102
102
:::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.
104
104
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).
106
106
:::
107
107
108
108
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.
127
127
128
128
`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.
129
129
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)):
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)):
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)
215
215
216
216
## 5. Integrating with your iOS code
217
217
@@ -279,7 +279,7 @@ First, we need to extends the `AppDelegate` to inherit from one of the classes p
279
279
280
280
To achieve this, we have to modify the `AppDelegate.h` file and the `AppDelegate.m` files:
281
281
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):
283
283
284
284
```diff title="AppDelegate.h changes"
285
285
#import<UIKit/UIKit.h>
@@ -292,7 +292,7 @@ To achieve this, we have to modify the `AppDelegate.h` file and the `AppDelegate
292
292
@end
293
293
```
294
294
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
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.
554
554
555
555
Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project:
Copy file name to clipboardExpand all lines: docs/_integration-with-existing-apps-kotlin.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -63,7 +63,7 @@ Add `node_modules/` to your `.gitignore` file (here the [Community default one](
63
63
64
64
React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
65
65
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)):
67
67
68
68
```groovy
69
69
// Configures the React Native Gradle Settings plugin used for autolinking
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)):
82
82
83
83
```diff
84
84
buildscript {
@@ -94,7 +94,7 @@ buildscript {
94
94
```
95
95
96
96
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)):
98
98
99
99
```diff
100
100
apply plugin: "com.android.application"
@@ -118,7 +118,7 @@ dependencies {
118
118
+}
119
119
```
120
120
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)):
@@ -155,7 +155,7 @@ Then you need to enable [cleartext traffic](https://developer.android.com/traini
155
155
</manifest>
156
156
```
157
157
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)
159
159
160
160
This is needed as your application will communicate with your local bundler, [Metro][https://metrobundler.dev/], via HTTP.
161
161
@@ -173,7 +173,7 @@ First, create an empty `index.js` file in the root of your React Native project.
173
173
174
174
`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.
175
175
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)):
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)):
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)
371
371
372
372
#### Creating a `ReactActivity`
373
373
@@ -423,7 +423,7 @@ class MyReactActivity : ReactActivity() {
423
423
</TabItem>
424
424
</Tabs>
425
425
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)
427
427
428
428
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:
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.
461
461
462
462
Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project:
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.
36
36
37
37
Next, install the NPM packages by running:
38
38
@@ -55,7 +55,7 @@ yarn install
55
55
56
56
Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
57
57
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)).
0 commit comments