Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use diff syntax for codeblocks #2984

Closed
wants to merge 2 commits into from
Closed

Use diff syntax for codeblocks #2984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac2ad82
Use diff syntax for codeblocks
cortinico Mar 1, 2022
558df33
Fix whitespace
cortinico Mar 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 24 additions & 26 deletions docs/new-architecture-app-intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,53 +72,51 @@ ls -la node_modules/react-native-gradle-plugin

Now, you can edit your **top level** `settings.gradle` file to include the following line at the end of the file:

```groovy
includeBuild('../node_modules/react-native-gradle-plugin')
```diff title='android/settings.gradle'
include ':app'
+includeBuild('../node_modules/react-native-gradle-plugin')

include(":ReactAndroid")
project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
+include(":ReactAndroid")
+project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
```

Then, edit your **top-level Gradle file** to include the highlighted lines:

```groovy
```diff title='android/build.gradle'
buildscript {
// ...
dependencies {
// Make sure that AGP is at least at version 7.x
classpath("com.android.tools.build:gradle:7.0.4")
- classpath("com.android.tools.build:gradle:4.2.2")
+ classpath("com.android.tools.build:gradle:7.0.4")

// Add those lines
classpath("com.facebook.react:react-native-gradle-plugin")
classpath("de.undercouch:gradle-download-task:4.1.2")
+ classpath("com.facebook.react:react-native-gradle-plugin")
+ classpath("de.undercouch:gradle-download-task:4.1.2")
}
}
```

Edit your **module-level** **Gradle file** (usually `app/build.gradle[.kts]`) to include the following:

```groovy
apply plugin: "com.android.application"
```diff title='android/app/settings.gradle'
apply plugin: "com.android.application"

// Add those lines
apply plugin: "com.facebook.react"
// Add those lines as well
react {
reactRoot = rootProject.file("../node_modules/react-native/")
codegenDir = rootProject.file("../node_modules/react-native-codegen/")
}
+apply plugin: "com.facebook.react"

+react {
+ reactRoot = rootProject.file("../node_modules/react-native/")
+ codegenDir = rootProject.file("../node_modules/react-native-codegen/")
+}
```

Finally, it’s time to update your project to use the `react-native` dependency from source, rather than using a precompiled artifact from the NPM package. This is needed as the later setup will rely on building the native code from source.

Let’s edit your **module level** `build.gradle` (the one inside `app/` folder) and change the following line:

```groovy
```diff title='android/app/build.gradle'
dependencies {
// Replace this:
implementation "com.facebook.react:react-native:+" // From node_modules
// With this:
implementation project(":ReactAndroid") // From node_modules
- implementation "com.facebook.react:react-native:+" // From node_modules
+ implementation project(":ReactAndroid") // From node_modules
```

## Use Hermes
Expand Down Expand Up @@ -173,15 +171,15 @@ In order to set up the TurboModule system, you will add some code to interact wi

Now you will have your AppDelegate conform to `RCTCxxBridgeDelegate`. Start by adding the following imports at the top of your AppDelegate file:

```objc
```objc title='AppDelegate.mm'
#import <reacthermes/HermesExecutorFactory.h>
#import <React/RCTCxxBridgeDelegate.h>
#import <React/RCTJSIExecutorRuntimeInstaller.h>
```

Then, declare your app delegate as a `RCTCxxBridgeDelegate` provider:

```objc
```objc title='AppDelegate.mm'
@interface AppDelegate () <RCTCxxBridgeDelegate> {
// ...
}
Expand All @@ -192,7 +190,7 @@ To conform to the `RCTCxxBridgeDelegate` protocol, you will need to implement th

You can implement the `jsExecutorFactoryForBridge:` method like this:

```objc
```objc title='AppDelegate.mm'
#pragma mark - RCTCxxBridgeDelegate

- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
Expand Down
178 changes: 87 additions & 91 deletions docs/new-architecture-app-modules-android.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,68 +25,65 @@ The code-gen will output some Java and some C++ code that now we need to build.

Let’s edit your **module level** `build.gradle` to include the **two** `externalNativeBuild` blocks detailed below inside the `android{}` block:

```groovy
```diff title='android/app/build.gradle'
android {
defaultConfig {
applicationId "com.awesomeproject"
// ...

// Add this block
externalNativeBuild {
ndkBuild {
arguments "APP_PLATFORM=android-21",
"APP_STL=c++_shared",
"NDK_TOOLCHAIN_VERSION=clang",
"GENERATED_SRC_DIR=$buildDir/generated/source",
"PROJECT_BUILD_DIR=$buildDir",
"REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
"REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build"
cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
cppFlags "-std=c++17"
targets "myapplication_appmodules"
}
}
}

// Add this block
externalNativeBuild {
ndkBuild {
path "$projectDir/src/main/jni/Android.mk"
}
+ externalNativeBuild {
+ ndkBuild {
+ arguments "APP_PLATFORM=android-21",
+ "APP_STL=c++_shared",
+ "NDK_TOOLCHAIN_VERSION=clang",
+ "GENERATED_SRC_DIR=$buildDir/generated/source",
+ "PROJECT_BUILD_DIR=$buildDir",
+ "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
+ "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build"
+ cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
+ cppFlags "-std=c++17"
+ targets "myapplication_appmodules"
+ }
+ }
}

+ externalNativeBuild {
+ ndkBuild {
+ path "$projectDir/src/main/jni/Android.mk"
+ }
+ }
}
```

In the same `build.gradle` file, inside the same `android{}` let’s add also the following section:

```groovy
```diff title='android/app/build.gradle'
android {
// ...

def reactAndroidProjectDir = project(':ReactAndroid').projectDir
def packageReactNdkLibs = tasks.register("packageReactNdkLibs", Copy) {
dependsOn(":ReactAndroid:packageReactNdkLibsForBuck")
dependsOn("generateCodegenArtifactsFromSchema")
from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib")
into("$buildDir/react-ndk/exported")
}

afterEvaluate {
preBuild.dependsOn(packageReactNdkLibs)
configureNdkBuildDebug.dependsOn(preBuild)
configureNdkBuildRelease.dependsOn(preBuild)
}

packagingOptions {
pickFirst '**/libhermes.so'
pickFirst '**/libjsc.so'
}
+ def reactAndroidProjectDir = project(':ReactAndroid').projectDir
+ def packageReactNdkLibs = tasks.register("packageReactNdkLibs", Copy) {
+ dependsOn(":ReactAndroid:packageReactNdkLibsForBuck")
+ dependsOn("generateCodegenArtifactsFromSchema")
+ from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib")
+ into("$buildDir/react-ndk/exported")
+ }
+
+ afterEvaluate {
+ preBuild.dependsOn(packageReactNdkLibs)
+ configureNdkBuildDebug.dependsOn(preBuild)
+ configureNdkBuildRelease.dependsOn(preBuild)
+ }
+
+ packagingOptions {
+ pickFirst '**/libhermes.so'
+ pickFirst '**/libjsc.so'
+ }
}
```

Finally, we need to create a Makefile inside the `src/main/jni` folder called `Android.mk` with the following content:

```makefile
```makefile title='src/main/jni/Android.mk'
THIS_DIR := $(call my-dir)

include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
Expand Down Expand Up @@ -143,7 +140,7 @@ yarn react-native run-android
Now is time to actually use the TurboModule.
First, we will need to create a `ReactPackageTurboModuleManagerDelegate` subclass, like the following:

```java
```java title='ReactPackageTurboModuleManagerDelegate.java'
package com.awesomeproject;

import com.facebook.jni.HybridData;
Expand Down Expand Up @@ -192,7 +189,7 @@ Then, you can provide the class you created to your `ReactNativeHost`. You can l

Once you located it, you need to add the `getReactPackageTurboModuleManagerDelegateBuilder` method as from the snippet below:

```java
```diff title='MyApplication.java'
public class MyApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost =
Expand All @@ -206,11 +203,11 @@ public class MyApplication extends Application implements ReactApplication {
@Override
protected String getJSMainModuleName() {/* ... */ }

@NonNull
@Override
protected ReactPackageTurboModuleManagerDelegate.Builder getReactPackageTurboModuleManagerDelegateBuilder() {
return new MyApplicationTurboModuleManagerDelegate.Builder();
}
+ @NonNull
+ @Override
+ protected ReactPackageTurboModuleManagerDelegate.Builder getReactPackageTurboModuleManagerDelegateBuilder() {
+ return new MyApplicationTurboModuleManagerDelegate.Builder();
+ }
};
}
```
Expand All @@ -219,7 +216,7 @@ public class MyApplication extends Application implements ReactApplication {

Still on the `ReactNativeHost` , we need to extend the the `getPackages()` method to include the newly created TurboModule. Update the method to include the following:

```java
```diff title='MyApplication.java'
public class MyApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost =
Expand All @@ -231,38 +228,37 @@ public class MyApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() {
List<ReactPackage> packages = new PackageList(this).getPackages();

// Add those lines
packages.add(new TurboReactPackage() {
@Nullable
@Override
public NativeModule getModule(String name, ReactApplicationContext reactContext) {
if (name.equals(NativeAwesomeManager.NAME)) {
return new NativeAwesomeManager(reactContext);
} else {
return null;
}
}

@Override
public ReactModuleInfoProvider getReactModuleInfoProvider() {
return () -> {
final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
moduleInfos.put(
NativeAwesomeManager.NAME,
new ReactModuleInfo(
NativeAwesomeManager.NAME,
"NativeAwesomeManager",
false, // canOverrideExistingModule
false, // needsEagerInit
true, // hasConstants
false, // isCxxModule
true // isTurboModule
)
);
return moduleInfos;
};
}
});
+ packages.add(new TurboReactPackage() {
+ @Nullable
+ @Override
+ public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+ if (name.equals(NativeAwesomeManager.NAME)) {
+ return new NativeAwesomeManager(reactContext);
+ } else {
+ return null;
+ }
+ }
+
+ @Override
+ public ReactModuleInfoProvider getReactModuleInfoProvider() {
+ return () -> {
+ final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
+ moduleInfos.put(
+ NativeAwesomeManager.NAME,
+ new ReactModuleInfo(
+ NativeAwesomeManager.NAME,
+ "NativeAwesomeManager",
+ false, // canOverrideExistingModule
+ false, // needsEagerInit
+ true, // hasConstants
+ false, // isCxxModule
+ true // isTurboModule
+ )
+ );
+ return moduleInfos;
+ };
+ }
+ });
return packages;
}

Expand Down Expand Up @@ -295,7 +291,7 @@ The content of those files should be the following:

Please note that the `kJavaDescriptor` should be adapted to follow the package name you picked for your project.

```cpp
```cpp title='MyApplicationTurboModuleManagerDelegate.h'
#include <memory>
#include <string>

Expand Down Expand Up @@ -330,7 +326,7 @@ private:

#### MyApplicationTurboModuleManagerDelegate.cpp

```cpp
```cpp title='MyApplicationTurboModuleManagerDelegate.cpp'
#include "MyApplicationTurboModuleManagerDelegate.h"
#include "MyApplicationModuleProvider.h"

Expand Down Expand Up @@ -362,7 +358,7 @@ std::shared_ptr<TurboModule> MyApplicationTurboModuleManagerDelegate::getTurboMo

#### MyApplicationModuleProvider.h

```cpp
```cpp title='MyApplicationModuleProvider.h'
#pragma once

#include <memory>
Expand All @@ -386,7 +382,7 @@ This is the C++ generated file that is created by the codegen.

Here you can also specify more than one provider, should you have more than one TurboModule. Specifically in this example we look for a TurboModule from `samplelibrary` (the one we specified) and we fallback to the `rncore` Module Provider (containing all the Core modules).

```cpp
```cpp title='MyApplicationModuleProvider.cpp'
#include "MyApplicationModuleProvider.h"

#include <rncore.h>
Expand All @@ -410,7 +406,7 @@ std::shared_ptr<TurboModule> MyApplicationModuleProvider(const std::string modul

#### OnLoad.cpp

```cpp
```cpp title='OnLoad.cpp'
#include <fbjni/fbjni.h>
#include "MyApplicationTurboModuleManagerDelegate.h"

Expand All @@ -425,12 +421,12 @@ JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {

Now you can finally enable the `TurboModule `support in your Application. To do so, you need to turn on the `useTurboModule` flag inside your Application `onCreate` method.

```java
```diff title='MyApplication.java'
public class MyApplication extends Application implements ReactApplication {

@Override
public void onCreate() {
ReactFeatureFlags.useTurboModules = true;
+ ReactFeatureFlags.useTurboModules = true;
//...
}
```
Expand Down
Loading