Skip to content

Commit 791d9d1

Browse files
Riccardoarati-1
Riccardo
and
arati-1
authored
[FEAT] Add doc to simplify podspecs for Native Modules and Native Components (facebook#3321)
* [FEAT] Add doc to simplify podspecs for Native Modules and Native Components * fix: apply suggested changes I Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes II Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes III Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes IV Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes V Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes VI Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com>
1 parent 0468011 commit 791d9d1

File tree

5 files changed

+92
-94
lines changed

5 files changed

+92
-94
lines changed

‎docs/new-architecture-library-ios.md

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,20 @@ The New Architecture makes use of CocoaPods.
1616

1717
### Add Folly and Other Dependencies
1818

19-
We'll need to ensure Folly is configured properly in any projects that consume your library. With CocoaPods, we can use the `compiler_flags` and `dependency` properties to set it up.
20-
21-
Add these to your `Pod::Spec.new` block:
22-
23-
```ruby
24-
folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
19+
The New Architecture requires some specific dependencies to work properly. You can set up your podspec to automatically install the required dependencies by modifying the `.podspec` file. In your `Pod::Spec.new` block, add the following line:
2520

21+
```diff
2622
Pod::Spec.new do |s|
2723
# ...
28-
s.compiler_flags = folly_compiler_flags
29-
30-
s.pod_target_xcconfig = {
31-
"HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\""
32-
}
33-
34-
s.dependency "React-Core"
35-
s.dependency "React-RCTFabric" # This is for Fabric Native Component
36-
s.dependency "React-Codegen"
37-
s.dependency "RCT-Folly"
38-
s.dependency "RCTRequired"
39-
s.dependency "RCTTypeSafety"
40-
s.dependency "ReactCommon/turbomodule/core"
24+
+ install_modules_dependencies(s)
4125
# ...
4226
end
4327
```
4428

29+
At this [link](https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L139-L144), you can find the documentation of the `install_modules_dependencies` function.
30+
31+
If you need to explicitly know which `folly_flags` React Native is using, you can query them using the [`folly_flag`](https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L135) function.
32+
4533
## 2. Extend or Implement the Code-generated Native Interfaces
4634

4735
The JavaScript spec for your native module or component will be used to generate native interface code for each supported platform (i.e., Android and iOS). These native interface files will be generated when a React Native application that depends on your library is built.

‎docs/the-new-architecture/backward-compatibility-fabric-components.md

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ While the last step is the same for all the platforms, the first two steps are d
4040

4141
The Apple platform installs Fabric Native Components using [Cocoapods](https://cocoapods.org) as a dependency manager.
4242

43-
Every Fabric Native Component defines a `podspec` that looks like this:
43+
If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoiding them when it is not enabled.
44+
45+
Otherwise, your Fabric Native Component's `podspec` should look like this:
4446

4547
```ruby
4648
require "json"
@@ -83,32 +85,50 @@ Pod::Spec.new do |s|
8385
end
8486
```
8587

86-
The **goal** is to avoid installing the dependencies when the app is prepared for the Old Architecture.
88+
You should install the extra dependencies when the New Architecture is enabled, and avoid installing them when it's not.
89+
To achieve this, you can use the [`install_modules_dependencies`](https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145). Update the `.podspec` file as it follows:
8790

88-
When we want to install the dependencies, we use the following commands depending on the architecture:
91+
```diff
92+
require "json"
8993

90-
```sh
91-
# For the Old Architecture, we use:
92-
pod install
94+
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
9395

94-
# For the New Architecture, we use:
95-
RCT_NEW_ARCH_ENABLED=1 pod install
96-
```
96+
- folly_version = '2021.07.22.00'
97+
- folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
9798

98-
Therefore, we can leverage this environment variable in the `podspec` to exclude the settings and the dependencies that are related to the New Architecture:
99+
Pod::Spec.new do |s|
100+
# Default fields for a valid podspec
101+
s.name = "<FC Name>"
102+
s.version = package["version"]
103+
s.summary = package["description"]
104+
s.description = package["description"]
105+
s.homepage = package["homepage"]
106+
s.license = package["license"]
107+
s.platforms = { :ios => "11.0" }
108+
s.author = package["author"]
109+
s.source = { :git => package["repository"], :tag => "#{s.version}" }
99110

100-
```diff
101-
+ if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
102-
# The following lines are required by the New Architecture.
103-
s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
104-
# ... other dependencies ...
105-
s.dependency "ReactCommon/turbomodule/core"
106-
+ end
111+
s.source_files = "ios/**/*.{h,m,mm,swift}"
112+
# React Native Core dependency
113+
+ install_modules_dependencies(s)
114+
- s.dependency "React-Core"
115+
- # The following lines are required by the New Architecture.
116+
- s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
117+
- s.pod_target_xcconfig = {
118+
- "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
119+
- "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
120+
- "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
121+
- }
122+
-
123+
- s.dependency "React-RCTFabric"
124+
- s.dependency "React-Codegen"
125+
- s.dependency "RCT-Folly", folly_version
126+
- s.dependency "RCTRequired"
127+
- s.dependency "RCTTypeSafety"
128+
- s.dependency "ReactCommon/turbomodule/core"
107129
end
108130
```
109131

110-
This `if` guard prevents the dependencies from being installed when the environment variable is not set.
111-
112132
### Android
113133

114134
To create a Native Component that can work with both architectures, you need to configure Gradle to choose which files need to be compiled depending on the chosen architecture. This can be achieved by using **different source sets** in the Gradle configuration.

‎docs/the-new-architecture/backward-compatibility-turbomodules.md

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ While the last step is the same for all the platforms, the first two steps are d
4040

4141
The Apple platform installs Turbo Native Modules using [Cocoapods](https://cocoapods.org) as a dependency manager.
4242

43-
Every Turbo Native Module defines a `podspec` that looks like this:
43+
If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoids them when it is not enabled.
44+
45+
Otherwise, your Turbo Native Module's `podspec` should look like this:
4446

4547
```ruby
4648
require "json"
@@ -82,32 +84,49 @@ Pod::Spec.new do |s|
8284
end
8385
```
8486

85-
The **goal** is to avoid installing the dependencies when the app is prepared for the Old Architecture.
87+
You should install the extra dependencies when the New Architecture is enabled, and avoid installing them when it's not.
88+
To achieve this, you can use the [`install_modules_dependencies`](https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145). Update the `.podspec` file as it follows:
8689

87-
When we want to install the dependencies we use the following commands, depending on the architecture:
90+
```diff
91+
require "json"
8892

89-
```sh
90-
# For the Old Architecture, we use:
91-
pod install
93+
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
9294

93-
# For the New Architecture, we use:
94-
RCT_NEW_ARCH_ENABLED=1 pod install
95-
```
95+
-folly_version = '2021.07.22.00'
96+
-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
9697

97-
Therefore, we can leverage this environment variable in the `podspec` to exclude the settings and the dependencies, that are related to the New Architecture:
98+
Pod::Spec.new do |s|
99+
# Default fields for a valid podspec
100+
s.name = "<TM Name>"
101+
s.version = package["version"]
102+
s.summary = package["description"]
103+
s.description = package["description"]
104+
s.homepage = package["homepage"]
105+
s.license = package["license"]
106+
s.platforms = { :ios => "11.0" }
107+
s.author = package["author"]
108+
s.source = { :git => package["repository"], :tag => "#{s.version}" }
98109

99-
```diff
100-
+ if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
101-
# The following lines are required by the New Architecture.
102-
s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
103-
# ... other dependencies ...
104-
s.dependency "ReactCommon/turbomodule/core"
105-
+ end
110+
s.source_files = "ios/**/*.{h,m,mm,swift}"
111+
# React Native Core dependency
112+
+ install_modules_dependencies(s)
113+
- s.dependency "React-Core"
114+
-
115+
- # The following lines are required by the New Architecture.
116+
- s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
117+
- s.pod_target_xcconfig = {
118+
- "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
119+
- "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
120+
- }
121+
-
122+
- s.dependency "React-Codegen"
123+
- s.dependency "RCT-Folly", folly_version
124+
- s.dependency "RCTRequired"
125+
- s.dependency "RCTTypeSafety"
126+
- s.dependency "ReactCommon/turbomodule/core"
106127
end
107128
```
108129

109-
This `if` guard prevents the dependencies from being installed when the environment variable is not set.
110-
111130
### Android
112131

113132
To create a module that can work with both architectures, you need to configure Gradle to choose which files need to be compiled depending on the chosen architecture. This can be achieved by using **different source sets** in the Gradle configuration.

‎docs/the-new-architecture/pillars-fabric-components.md

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,6 @@ require "json"
192192

193193
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
194194

195-
folly_version = '2021.07.22.00'
196-
folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
197-
198195
Pod::Spec.new do |s|
199196
s.name = "rtn-centered-text"
200197
s.version = package["version"]
@@ -208,27 +205,15 @@ Pod::Spec.new do |s|
208205

209206
s.source_files = "ios/**/*.{h,m,mm,swift}"
210207

211-
s.dependency "React-Core"
212-
213-
s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
214-
s.pod_target_xcconfig = {
215-
"HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
216-
"OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
217-
"CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
218-
}
219-
220-
s.dependency "React-RCTFabric"
221-
s.dependency "React-Codegen"
222-
s.dependency "RCT-Folly", folly_version
223-
s.dependency "RCTRequired"
224-
s.dependency "RCTTypeSafety"
225-
s.dependency "ReactCommon/turbomodule/core"
208+
install_modules_dependencies(s)
226209
end
227210
```
228211

229212
The `.podspec` file has to be a sibling of the `package.json` file, and its name is the one we set in the `package.json`'s `name` property: `rtn-centered-text`.
230213

231-
The first part of the file prepares some variables we will use throughout the rest of it. Then, there is a section that contains some information used to configure the pod, like its name, version, and description. Finally, we have a set of dependencies that the New Architecture requires.
214+
The first part of the file prepares some variables that we use throughout the file. Then, there is a section that contains some information used to configure the pod, like its name, version, and description.
215+
216+
All the requirements for the New Architecture have been encapsulated in the [`install_modules_dependencies`](https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145). It takes care of installing the proper dependencies based on which architecture is currently enabled. It also automatically installs the `React-Core` dependency in the old architecture.
232217

233218
### Android: `build.gradle`, `AndroidManifest.xml`, a `ReactPackage` class
234219

‎docs/the-new-architecture/pillars-turbomodule.md

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,6 @@ require "json"
182182

183183
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
184184

185-
folly_version = '2021.07.22.00'
186-
folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
187-
188185
Pod::Spec.new do |s|
189186
s.name = "rtn-calculator"
190187
s.version = package["version"]
@@ -198,26 +195,15 @@ Pod::Spec.new do |s|
198195

199196
s.source_files = "ios/**/*.{h,m,mm,swift}"
200197

201-
s.dependency "React-Core"
202-
203-
s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
204-
s.pod_target_xcconfig = {
205-
"HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
206-
"OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
207-
"CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
208-
}
209-
210-
s.dependency "React-Codegen"
211-
s.dependency "RCT-Folly", folly_version
212-
s.dependency "RCTRequired"
213-
s.dependency "RCTTypeSafety"
214-
s.dependency "ReactCommon/turbomodule/core"
198+
install_modules_dependencies(s)
215199
end
216200
```
217201
218202
The `.podspec` file has to be a sibling of the `package.json` file, and its name is the one we set in the `package.json`'s `name` property: `rtn-calculator`.
219203
220-
The first part of the file prepares some variables we will use throughout the rest of it. Then, there is a section that contains some information used to configure the pod, like its name, version, and description. Finally, we have a set of dependencies that are required by the New Architecture.
204+
The first part of the file prepares some variables that we use throughout the file. Then, there is a section that contains some information used to configure the pod, like its name, version, and description.
205+
206+
All the requirements for the New Architecture have been encapsulated in the [`install_modules_dependencies`](https://github.com/facebook/react-native/blob/82e9c6ad611f1fb816de056ff031716f8cb24b4e/scripts/react_native_pods.rb#L145). It takes care of installing the proper dependencies based on which architecture is currently enabled. It also automatically installs the `React-Core` dependency in the old architecture.
221207
222208
### Android: `build.gradle`, `AndroidManifest.xml`, a `ReactPackage` class
223209

0 commit comments

Comments
 (0)