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.

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

Update New Architecture instructions to use CMake instead of Android.mk #3304

Merged
merged 1 commit into from
Sep 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
94 changes: 18 additions & 76 deletions docs/new-architecture-app-modules-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,30 +32,20 @@ android {

// 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",
"NODE_MODULES_DIR=$rootDir/../node_modules"
cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
cppFlags "-std=c++17"
targets "myapplication_appmodules"
// Fix for windows limit on number of character in file paths and in command lines
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
arguments "NDK_APP_SHORT_COMMANDS=true"
}
cmake {
arguments "-DPROJECT_BUILD_DIR=$buildDir",
"-DREACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
"-DREACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
"-DNODE_MODULES_DIR=$rootDir/../node_modules",
"-DANDROID_STL=c++_shared"
}
}
}

// Add this block
externalNativeBuild {
ndkBuild {
path "$projectDir/src/main/jni/Android.mk"
cmake {
path "$projectDir/src/main/jni/CMakeLists.txt"
}
}
}
Expand All @@ -77,8 +67,8 @@ android {

afterEvaluate {
preBuild.dependsOn(packageReactNdkLibs)
configureNdkBuildDebug.dependsOn(preBuild)
configureNdkBuildRelease.dependsOn(preBuild)
configureCMakeRelWithDebInfo.dependsOn(preReleaseBuild)
configureCMakeDebug.dependsOn(preDebugBuild)
}

packagingOptions {
Expand All @@ -88,64 +78,16 @@ android {
}
```

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

```makefile
THIS_DIR := $(call my-dir)
```cmake
cmake_minimum_required(VERSION 3.13)

include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
# Define the library name here.
project(myapplication_appmodules)

# If you wish to add a custom TurboModule or Fabric component in your app you
# will have to include the following autogenerated makefile.
# include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk

# Includes the MK file for autolinked libraries
include $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni/Android-rncli.mk

include $(CLEAR_VARS)

LOCAL_PATH := $(THIS_DIR)

# You can customize the name of your application .so file here.
LOCAL_MODULE := awesomeapp_appmodules

LOCAL_C_INCLUDES := $(LOCAL_PATH) $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni
LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp) $(wildcard $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni/*.cpp)
LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH) $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni

# If you wish to add a custom TurboModule or Fabric component in your app you
# will have to uncomment those lines to include the generated source
# files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
#
# LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
# LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
# LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni

# Here you should add any native library you wish to depend on.
LOCAL_SHARED_LIBRARIES := \
libfabricjni \
libfbjni \
libfolly_runtime \
libglog \
libjsi \
libreact_codegen_rncore \
libreact_debug \
libreact_nativemodule_core \
libreact_render_componentregistry \
libreact_render_core \
libreact_render_debug \
libreact_render_graphics \
librrc_view \
libruntimeexecutor \
libturbomodulejsijni \
libyoga

# Autolinked libraries
LOCAL_SHARED_LIBRARIES += $(call import-codegen-modules)

LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17

include $(BUILD_SHARED_LIBRARY)
# This file includes all the necessary to let you build your application with the New Architecture.
include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
```

This setup will run a native build on your project and will compile the C++ files that have been generated by the codegen. You will see the native build running with the Gradle task `:app:externalNativeBuildDebug`
Expand Down Expand Up @@ -249,7 +191,7 @@ protected constructor(
</TabItem>
</Tabs>

Please note that the `SoLoader.loadLibrary` parameter (in this case `"myapplication_appmodules")` should be the same as the one specified for `LOCAL_MODULE :=` inside the `Android.mk` file you created before.
Please note that the `SoLoader.loadLibrary` parameter (in this case `"myapplication_appmodules")` should be the same as the one specified for `project()` inside the `CMakeLists.txt` file you created before.

This class will then be responsible of loading the TurboModules and will take care of loading the native library build with the NDK at runtime.

Expand Down
2 changes: 1 addition & 1 deletion docs/new-architecture-app-renderer-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ LOG Running "App" with {"fabric":true,"initialProps":{},"rootTag":1}

## Migrating Android ViewManagers

First, make sure you followed the instructions to [Enabling the New Renderer (Fabric) in Your Android Application](#enabling-the-new-renderer-fabric-in-your-android-application). Plus we will also assume that you followed the instructions from [Enabling the New NativeModule System (TurboModule) in Your Android Application](#enabling-the-new-nativemodule-system-turbomodule-in-your-android-application) as the Makefile (`Android.mk`) and other native builds setup steps are presented over there and won’t be repeated here.
First, make sure you followed the instructions to [Enabling the New Renderer (Fabric) in Your Android Application](#enabling-the-new-renderer-fabric-in-your-android-application). Plus we will also assume that you followed the instructions from [Enabling the New NativeModule System (TurboModule) in Your Android Application](#enabling-the-new-nativemodule-system-turbomodule-in-your-android-application) as the native builds setup steps are presented over there and won’t be repeated here.

### JavaScript changes

Expand Down
1 change: 1 addition & 0 deletions docs/new-architecture-library-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ app/build/generated/source/codegen
│ └── NativeAwesomeManagerSpec.java
├── jni
│ ├── Android.mk
│ ├── CMakeLists.txt
│ ├── react
│ │ └── renderer
│ │ └── components
Expand Down
1 change: 1 addition & 0 deletions docs/the-new-architecture/pillars-codegen.md
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ codegen
│ └── MyTurbomodule.java
├── jni
│ ├── Android.mk
│ ├── CMakeLists.txt
│ ├── MyTurbomodule-generated.cpp
│ ├── MyTurbomodule.h
│ └── react
Expand Down
1 change: 1 addition & 0 deletions docs/the-new-architecture/pillars-turbomodule.md
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,7 @@ codegen
│ └── NativeCalculatorSpec.java
├── jni
│ ├── Android.mk
│ ├── CMakeLists.txt
│ ├── RTNCalculator-generated.cpp
│ ├── RTNCalculator.h
│ └── react
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,30 +32,20 @@ android {

// 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",
"NODE_MODULES_DIR=$rootDir/../node_modules"
cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
cppFlags "-std=c++17"
targets "myapplication_appmodules"
// Fix for windows limit on number of character in file paths and in command lines
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
arguments "NDK_APP_SHORT_COMMANDS=true"
}
cmake {
arguments "-DPROJECT_BUILD_DIR=$buildDir",
"-DREACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
"-DREACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
"-DNODE_MODULES_DIR=$rootDir/../node_modules",
"-DANDROID_STL=c++_shared"
}
}
}

// Add this block
externalNativeBuild {
ndkBuild {
path "$projectDir/src/main/jni/Android.mk"
cmake {
path "$projectDir/src/main/jni/CMakeLists.txt"
}
}
}
Expand All @@ -77,8 +67,8 @@ android {

afterEvaluate {
preBuild.dependsOn(packageReactNdkLibs)
configureNdkBuildDebug.dependsOn(preBuild)
configureNdkBuildRelease.dependsOn(preBuild)
configureCMakeRelWithDebInfo.dependsOn(preReleaseBuild)
configureCMakeDebug.dependsOn(preDebugBuild)
}

packagingOptions {
Expand All @@ -88,64 +78,16 @@ android {
}
```

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

```makefile
THIS_DIR := $(call my-dir)
```cmake
cmake_minimum_required(VERSION 3.13)

include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
# Define the library name here.
project(myapplication_appmodules)

# If you wish to add a custom TurboModule or Fabric component in your app you
# will have to include the following autogenerated makefile.
# include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk

# Includes the MK file for autolinked libraries
include $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni/Android-rncli.mk

include $(CLEAR_VARS)

LOCAL_PATH := $(THIS_DIR)

# You can customize the name of your application .so file here.
LOCAL_MODULE := awesomeapp_appmodules

LOCAL_C_INCLUDES := $(LOCAL_PATH) $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni
LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp) $(wildcard $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni/*.cpp)
LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH) $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni

# If you wish to add a custom TurboModule or Fabric component in your app you
# will have to uncomment those lines to include the generated source
# files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
#
# LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
# LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
# LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni

# Here you should add any native library you wish to depend on.
LOCAL_SHARED_LIBRARIES := \
libfabricjni \
libfbjni \
libfolly_runtime \
libglog \
libjsi \
libreact_codegen_rncore \
libreact_debug \
libreact_nativemodule_core \
libreact_render_componentregistry \
libreact_render_core \
libreact_render_debug \
libreact_render_graphics \
librrc_view \
libruntimeexecutor \
libturbomodulejsijni \
libyoga

# Autolinked libraries
LOCAL_SHARED_LIBRARIES += $(call import-codegen-modules)

LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17

include $(BUILD_SHARED_LIBRARY)
# This file includes all the necessary to let you build your application with the New Architecture.
include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
```

This setup will run a native build on your project and will compile the C++ files that have been generated by the codegen. You will see the native build running with the Gradle task `:app:externalNativeBuildDebug`
Expand Down Expand Up @@ -249,7 +191,7 @@ protected constructor(
</TabItem>
</Tabs>

Please note that the `SoLoader.loadLibrary` parameter (in this case `"myapplication_appmodules")` should be the same as the one specified for `LOCAL_MODULE :=` inside the `Android.mk` file you created before.
Please note that the `SoLoader.loadLibrary` parameter (in this case `"myapplication_appmodules")` should be the same as the one specified for `project()` inside the `CMakeLists.txt` file you created before.

This class will then be responsible of loading the TurboModules and will take care of loading the native library build with the NDK at runtime.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ LOG Running "App" with {"fabric":true,"initialProps":{},"rootTag":1}

## Migrating Android ViewManagers

First, make sure you followed the instructions to [Enabling the New Renderer (Fabric) in Your Android Application](#enabling-the-new-renderer-fabric-in-your-android-application). Plus we will also assume that you followed the instructions from [Enabling the New NativeModule System (TurboModule) in Your Android Application](#enabling-the-new-nativemodule-system-turbomodule-in-your-android-application) as the Makefile (`Android.mk`) and other native builds setup steps are presented over there and won’t be repeated here.
First, make sure you followed the instructions to [Enabling the New Renderer (Fabric) in Your Android Application](#enabling-the-new-renderer-fabric-in-your-android-application). Plus we will also assume that you followed the instructions from [Enabling the New NativeModule System (TurboModule) in Your Android Application](#enabling-the-new-nativemodule-system-turbomodule-in-your-android-application) as the native builds setup steps are presented over there and won’t be repeated here.

### JavaScript changes

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ app/build/generated/source/codegen
│ └── NativeAwesomeManagerSpec.java
├── jni
│ ├── Android.mk
│ ├── CMakeLists.txt
│ ├── react
│ │ └── renderer
│ │ └── components
Expand Down