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
@@ -4,7 +4,8 @@ title: Prerequisites for Applications
4
4
---
5
5
6
6
import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
7
-
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
7
+
import Tabs from '@theme/Tabs';
8
+
import TabItem from '@theme/TabItem';
8
9
import constants from '@site/core/TabsConstants';
9
10
10
11
<NewArchitectureWarning/>
@@ -19,174 +20,106 @@ This guide is written with the expectation that you’re using the [**latest** R
19
20
20
21
You can find instructions on how to upgrade in the page [upgrading to new versions](/docs/upgrading).
21
22
22
-
## Use Hermes
23
+
Remember to re-install the dependencies after upgrading (run `npm install` or `yarn`).
23
24
24
-
Hermes is an open-source JavaScript engine optimized for React Native. Hermes is enabled by default, and you have to explicitly disable it if you want to use JSC.
25
-
26
-
We highly recommend using Hermes in your application. With Hermes enabled, you can use the JavaScript debugger in Flipper to directly debug your JavaScript code.
27
-
28
-
Please [follow the instructions on the Hermes page](hermes) to learn how to enable/disable Hermes.
29
-
30
-
:::caution
25
+
:::important
31
26
32
-
**iOS:**If you opt out of using Hermes, you will need to replace `HermesExecutorFactory` with `JSCExecutorFactory` in any examples used throughout the rest of this guide.
27
+
Whenever you have to rename some files in the `ios` folder, please **use Xcode to rename them**. This ensure that the file references are updated in the Xcode project as well. You might need to clean the build folder (**Project** → **Clean Build Folder** or <kbd>Cmd ⌘</kbd> + <kbd>Shift ⇪</kbd> + <kbd>K</kbd>) before re-building the app. If the file is renamed outside of Xcode, you may need to click on the old `.m` file reference and Locate the new file.
33
28
34
29
:::
35
30
36
-
## iOS - Build the Project
31
+
## Android - Enable the New Architecture
37
32
38
-
After upgrading the project, there are a few changes you need to apply:
33
+
If you successfully updated your project to the latest version of React Native, you **already meet** all the prerequisites to use the New Architecture on Android.
39
34
40
-
1. Target the proper iOS version. Open the `Podfile` and apply this change:
35
+
You will only need to update your `android/gradle.properties` file as follows:
41
36
42
37
```diff
43
-
- platform :ios, '11.0'
44
-
+ platform :ios, '12.4'
38
+
# Use this property to enable support to the new architecture.
39
+
# This will allow you to use TurboModules and the Fabric render in
40
+
# your application. You should enable this flag either if you want
41
+
# to write custom TurboModules/Fabric components OR use libraries that
42
+
# are providing them.
43
+
-newArchEnabled=false
44
+
+newArchEnabled=true
45
45
```
46
46
47
-
2. Create a `.xcode.env` file to export the location of the NODE_BINARY. Navigate to the `ios` folder and run this command:
If you need it, you can also open the file and replace the `$(command -v node)` with the path to the node executable.
54
-
React Native also supports a local version of this file `.xcode.env.local`. This file is not synced with the repository to let you customize your local setup, if it differs from the Continuous Integration or the team one.
49
+
If you successfully updated your project to the latest version of React Native, you **already meet** all the prerequisites to use the New Architecture on iOS.
55
50
56
-
2. Fix an API change in the `AppDelegate.m`. Open this file and apply this change:
51
+
You will only need to reinstall your pods by running `pod install` with the right flag:
Turbo Native Modules can be written using Objective-C or C++. In order to support both cases, any source files in the user project space that include C++ code should use the `.mm` file extension. This extension corresponds to Objective-C++, a language variant that allows for the use of a combination of C++ and Objective-C in source files.
60
+
It’s now time to run your app to verify that everything works correctly:
68
61
69
-
:::important
70
-
71
-
**Use Xcode to rename existing files** to ensure file references persist in your project. You might need to clean the build folder (_Project → Clean Build Folder_) before re-building the app. If the file is renamed outside of Xcode, you may need to click on the old `.m` file reference and Locate the new file.
For example, if you use the template, your project structure for what concerns iOS should look like this:
65
+
```bash
66
+
# To run android
67
+
yarn android
76
68
69
+
# To run iOS
70
+
yarn ios
77
71
```
78
-
AppName
79
-
├── ...
80
-
├── ios
81
-
│ ├── Podfile
82
-
│ ├── Podfile.lock
83
-
│ ├── Pods
84
-
│ │ └── ...
85
-
│ ├── AppName
86
-
│ │ ├── AppDelegate.h
87
-
│ │ ├── AppDelegate.mm
88
-
│ │ ├── Images.xcassets
89
-
│ │ ├── Info.plist
90
-
│ │ ├── LaunchScreen.storyboard
91
-
│ │ └── main.m
92
-
│ ├── AppName.xcodeproj
93
-
│ ├── AppName.xcworkspace
94
-
│ ├── AppNameTests
95
-
│ └── build
96
-
└── ...
97
-
```
98
-
99
-
All the `.m` files within the `AppName` inner folder should be renamed from `.m` to `.mm`. If you have packages that contains Objective-C code at the same level of the `AppName` folder, they should be renamed from `.m` to `.mm` too.
100
72
101
-
## iOS - Make your AppDelegate conform to `RCTAppDelegate`
73
+
</TabItem>
74
+
<TabItemvalue="npm">
102
75
103
-
The final step to configure iOS for the New Architecture is to extend a base class provided by React Native, called `RCTAppDelegate`.
104
-
105
-
This class provides a base implementation for all the required functionalities of the new architecture. If you need to customize some of them, you can override those methods, invoke `[super methodNameWith:parameters:];` collecting the returned value and customize the bits you need to customize.
106
-
107
-
1. Open the `ios/<AppName>/AppDelegate.h` file and update it as it follows:
In your Metro terminal log, you will now see the following log to confirm that Fabric is running correctly:
118
88
119
-
@end
120
89
```
121
-
122
-
2. Open the `ios/<AppName>/AppDelegate.mm` (remember that you have to rename the `AppDelegate.m` to `AppDelegate.mm` first) file and replace its content with the following:
LOG Running "App" with {"fabric":true,"initialProps":{"concurrentRoot": "true"},"rootTag":1}
150
92
```
151
93
152
-
:::note
153
-
The `moduleName` has to be the same string used in the `[RCTRootView initWithBridge:moduleName:initialProperties]` call in the original `AppDelegate.mm` file.
154
-
:::
94
+
## Advanced - Pass your component in the interop layer
155
95
156
-
## iOS - Run pod install
96
+
If you followed the previous steps but your app uses some custom Native Components that have not been migrated to the New Architecture completely, you are going to see some reddish/pinkish boxes saying that the component is not compatible with Fabric. This is happening because custom Native Components written for the legacy architecture can't run as-is in the New Architecture.
157
97
158
-
```bash
159
-
// Run pod install with the flags
160
-
RCT_NEW_ARCH_ENABLED=1 pod install
161
-
```
98
+
Starting from **React Native `0.72.0`**, we worked on a interoperability layer to let you use legacy components in the New Architecture without having to wait for them to be migrated.
162
99
163
-
## Android - Prerequisites
100
+
You can read more about the interoperability layer and how to use it [here](https://github.com/reactwg/react-native-new-architecture/discussions/135). Follow this guide to register your components and then rerun your app with the commands:
164
101
165
-
If you successfully updated your project to React Native `0.71.0`, you **already meet** all the prerequisites to use the New Architecture on Android.
0 commit comments