Skip to content

Commit 50a01ac

Browse files
authored
Update the "Build from source" page (#3570)
* Update build-from-source page * Update website/contributing/how-to-build-from-source.md
1 parent b023540 commit 50a01ac

File tree

1 file changed

+21
-206
lines changed

1 file changed

+21
-206
lines changed

website/contributing/how-to-build-from-source.md

Lines changed: 21 additions & 206 deletions
Original file line numberDiff line numberDiff line change
@@ -8,139 +8,38 @@ You will need to build React Native from source if you want to work on a new fea
88

99
### Prerequisites
1010

11-
Assuming you have the Android SDK installed, run `android` to open the Android SDK Manager.
11+
To build from source, you need to have the Android SDK installed. If you followed the [Setting up the development environment](/docs/environment-setup) guide, you should already be set up.
1212

13-
Make sure you have the following installed:
13+
There is no need to install other tools like specific version of NDK or CMake as the Android SDK will **automatically download** whatever is needed for the build from source.
1414

15-
1. Android SDK (find the specific version in the `compileSdkVersion` in [`build.gradle`](https://github.com/facebook/react-native/blob/main/ReactAndroid/build.gradle#L253)).
16-
2. Android NDK
15+
### Point your project to a nightly
1716

18-
#### Point Gradle to your Android SDK
19-
20-
**Step 1:** Set environment variables through your local shell.
21-
22-
:::note
23-
Files may vary based on shell flavor. See below for examples from common shells.
24-
:::
25-
26-
- bash: `.bash_profile` or `.bashrc`
27-
- zsh: `.zprofile` or `.zshrc`
28-
- ksh: `.profile` or `$ENV`
29-
30-
Example:
17+
To use the latest fixes and features of React Native, you can update your project to use a nightly version of React Native with:
3118

3219
```
33-
export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx
34-
export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r20b
20+
yarn add react-native@nightly
3521
```
3622

37-
**Step 2:** Create a `local.properties` file in the `android` directory of your react-native app with the following contents:
38-
39-
Example:
40-
41-
```
42-
sdk.dir=/Users/your_unix_name/android-sdk-macosx
43-
ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r20b
44-
```
45-
46-
#### Download links for Android NDK
47-
48-
You can find the instructions to install the NDK on the [official Android NDK website](https://developer.android.com/studio/projects/install-ndk).
49-
50-
### Building the source
23+
This will update your project to use a nightly version of React Native that gets released every night with the latest changes.
5124

52-
#### 1. Installing from the fork
25+
### Update your project to build from source
5326

54-
First, you need to clone `react-native` from the repo you want to use locally inside the `node_modules` folder. For example, if you wish to build against `main` of this repo:
55-
56-
```sh
57-
mkdir node_modules
58-
git clone git@github.com:facebook/react-native.git node_modules/react-native
59-
```
60-
61-
#### 2. Adding gradle dependencies
62-
63-
Update the `android/build.gradle` to make sure you're using AGP 7.x and add the highlighted lines.
27+
Both with stable releases and nightlies, you will be consuming **precompiled** artifacts. If instead you want to switch to building from source, so you can test your changes to the framework directly, you will have to edit the `android/settings.gradle` file as follows:
6428

6529
```diff
66-
buildscript {
67-
// ...
68-
dependencies {
69-
// Make sure that AGP is at least at version 7.x
70-
classpath("com.android.tools.build:gradle:7.0.4")
71-
+ classpath("com.facebook.react:react-native-gradle-plugin")
72-
+ classpath("de.undercouch:gradle-download-task:5.0.1")
73-
}
74-
}
75-
```
76-
77-
#### 3. Adding the `:ReactAndroid` project
78-
79-
Add the `:ReactAndroid` project in `android/settings.gradle`:
80-
81-
```groovy
82-
pluginManagement {
83-
repositories {
84-
gradlePluginPortal()
85-
mavenLocal()
86-
google()
87-
}
88-
}
89-
90-
// ...
91-
92-
include ':ReactAndroid'
93-
project(':ReactAndroid').projectDir = new File(
94-
rootProject.projectDir, '../node_modules/react-native/ReactAndroid')
95-
96-
// Includes React Native Gradle Plugin into Gradle project. Required by `:ReactAndroid` project configuration.
97-
includeBuild('../node_modules/react-native/packages/react-native-gradle-plugin')
98-
99-
// ...
100-
```
101-
102-
Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `implementation 'com.facebook.react:react-native:+'` with `implementation project(':ReactAndroid')`:
103-
104-
```groovy
105-
dependencies {
106-
implementation fileTree(dir: 'libs', include: ['*.jar'])
107-
108-
implementation project(':ReactAndroid')
109-
110-
// ...
111-
}
112-
```
113-
114-
#### 4. Making 3rd-party modules use your fork
115-
116-
If you use 3rd-party React Native modules, you need to override their dependencies so that they don't bundle the pre-compiled library. Otherwise you'll get an error while compiling:
117-
118-
```
119-
Error: more than one library with package name 'com.facebook.react'
120-
```
121-
122-
Modify your `android/build.gradle`, and add:
123-
124-
```groovy
125-
allprojects {
126-
repositories { /* ... */ }
127-
128-
configurations.all {
129-
resolutionStrategy {
130-
dependencySubstitution {
131-
substitute module("com.facebook.react:react-native:+") with project(":ReactAndroid")
132-
}
133-
}
134-
}
135-
}
30+
// ...
31+
include ':app'
32+
includeBuild('../node_modules/react-native-gradle-plugin')
33+
+ includeBuild('../node_modules/react-native') {
34+
+ dependencySubstitution {
35+
+ substitute(module("com.facebook.react:react-android")).using(project(":ReactAndroid"))
36+
+ substitute(module("com.facebook.react:react-native")).using(project(":ReactAndroid"))
37+
+ substitute(module("com.facebook.react:hermes-android")).using(project(":ReactAndroid:hermes-engine"))
38+
+ substitute(module("com.facebook.react:hermes-engine")).using(project(":ReactAndroid:hermes-engine"))
39+
+ }
40+
+ }
13641
```
13742

138-
### Building from Android Studio
139-
140-
From the Welcome screen of Android Studio choose "Import project" and select the `android` folder of your app.
141-
142-
You should be able to use the _Run_ button to run your app on a device. Android Studio won't start the packager automatically, you'll need to start it by running `npm start` on the command line.
143-
14443
### Additional notes
14544

14645
Building from source can take a long time, especially for the first build, as it needs to download ~200 MB of artifacts and compile the native code.
@@ -156,92 +55,8 @@ gradle.projectsLoaded {
15655
}
15756
```
15857

159-
### Troubleshooting
160-
161-
Gradle build fails in `ndk-build`. See the section about `local.properties` file above.
162-
163-
## Publish your own version of React Native
164-
165-
There is a docker image that helps you build the required Android sources without installing any additional tooling (other than [Docker](https://docs.docker.com/install/)), which can be committed to a git branch as a fully functional React Native fork release.
166-
167-
Run this from a fork of the React Native [repo](https://github.com/facebook/react-native).
168-
169-
```bash
170-
git checkout -d release/my-react-native-release
171-
npm install
172-
docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives"
173-
git add android --force
174-
git commit -a -m 'my react native forked release'
175-
git push
176-
```
177-
178-
Install it in your app project package.json.
179-
180-
```json
181-
"dependencies": {
182-
// ...
183-
"react-native": "myName/react-native#release/my-react-native-release"
184-
}
185-
```
186-
18758
## Rationale
18859

189-
The recommended approach to working with React Native is to always update to the latest version. No support is provided on older versions and if you run into issues the contributors will always ask you to upgrade to the latest version before even looking at your particular issue.
190-
191-
Sometimes, though, you are temporarily stuck on an older React Native version, but you require some changes from newer versions urgently (bugfixes) without having to do a full upgrade right now. This situation should be short lived by definition and once you have the time, the real solution is to upgrade to the latest version.
192-
193-
With this goal of a shortlived fork of React Native in mind, you can publish your own version of React Native. The facebook/react-native repository contains all the dependencies required to be used directly as a git dependency, except for the Android React Native library binary (.aar).
194-
195-
## Building
196-
197-
This binary needs to become available in your project's `node_modules/react-native/android` folder or directly in your gradle dependency of your Android app. You can achieve this in one of two ways: Git dependency branch, Android binary dependency through Maven.
198-
199-
To build the .aar React Native library, you can follow the steps to build from source first to install all required tooling. Then to build the actual library, you can run the following in the root of your react-native checkout:
200-
201-
```$bash
202-
./gradlew :ReactAndroid:installArchives --no-daemon
203-
```
204-
205-
If you don't want to install the required toolchain for building from source, you can use a prebuilt docker image to create a React Native binary.
206-
207-
```bash
208-
docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives"
209-
```
210-
211-
If you haven't used the Android NDK before or if you have a NDK version not exactly matching the required version for building React Native, this is the recommended approach.
212-
213-
The resulting binary can be made available to app projects in one of the two ways described below.
214-
215-
### Publishing to Maven/Nexus
216-
217-
Upload the binaries from the `android` folder to maven and point your Android app project gradle dependency for React Native to your Maven/Nexus dependency.
218-
219-
### Publishing to a git fork dependency
220-
221-
Instead of uploading to Maven/Nexus, you can add the binaries built in the previous steps to git, by changing the .gitignore and committing the binaries to your forked branch. This allows you to make your fork into a functioning git dependency for React Native app projects.
222-
223-
If you have changes that you want to actually merge to React Native, make them on another branch first and open a PR.
224-
225-
To start making your dependency branch, make sure you are on a `release/my-forked-release` branch, then merge any commits that you need from yourself or others into this branch.
226-
227-
:::warning
228-
This release branch should never be merged into any other branch.
229-
:::
230-
231-
```bash
232-
# create .aar, then:
233-
git add android --force
234-
git commit -m 'my release commit'
235-
git push
236-
```
237-
238-
Now you can use this branch as a git dependency in your app project, by pointing your package.json dependency to this branch:
239-
240-
```json
241-
"dependencies": {
242-
// ...
243-
"react-native": "my-name/react-native#release/my-forked-release",
244-
}
245-
```
60+
The recommended approach to working with React Native is to always update to the latest version. The support we provide for older versions is [described in our support policy](https://github.com/reactwg/react-native-releases/#releases-support-policy).
24661

247-
No other modifications to your dependencies should be necessary for your native changes to be included in your project.
62+
The build from source approach should be used to end-to-end test a fix before submitting a pull request to React Native, and we're not encouraging its usages in the long run. Especially forking React Native or switching your setup to always use a build from source, will result in projects that are harder to update and generally a worse developer experience.

0 commit comments

Comments
 (0)