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

Author: cortinico

docs/new-architecture-app-modules-android.md

@@ -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"
         }
     }
 }
@@ -77,8 +67,8 @@ android {
 
     afterEvaluate {
         preBuild.dependsOn(packageReactNdkLibs)
-        configureNdkBuildDebug.dependsOn(preBuild)
-        configureNdkBuildRelease.dependsOn(preBuild)
+        configureCMakeRelWithDebInfo.dependsOn(preReleaseBuild)
+        configureCMakeDebug.dependsOn(preDebugBuild)
     }
 
     packagingOptions {
@@ -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`
@@ -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.
 

docs/new-architecture-app-renderer-android.md

@@ -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
 

docs/new-architecture-library-android.md

@@ -34,6 +34,7 @@ app/build/generated/source/codegen
 │               └── NativeAwesomeManagerSpec.java
 ├── jni
 │   ├── Android.mk
+│   ├── CMakeLists.txt
 │   ├── react
 │   │   └── renderer
 │   │       └── components

docs/the-new-architecture/pillars-codegen.md

@@ -162,6 +162,7 @@ codegen
 │           └── MyTurbomodule.java
 ├── jni
 │   ├── Android.mk
+│   ├── CMakeLists.txt
 │   ├── MyTurbomodule-generated.cpp
 │   ├── MyTurbomodule.h
 │   └── react

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

@@ -497,6 +497,7 @@ codegen
 │           └── NativeCalculatorSpec.java
 ├── jni
 │   ├── Android.mk
+│   ├── CMakeLists.txt
 │   ├── RTNCalculator-generated.cpp
 │   ├── RTNCalculator.h
 │   └── react

website/versioned_docs/version-0.70/new-architecture-app-modules-android.md

@@ -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"
         }
     }
 }
@@ -77,8 +67,8 @@ android {
 
     afterEvaluate {
         preBuild.dependsOn(packageReactNdkLibs)
-        configureNdkBuildDebug.dependsOn(preBuild)
-        configureNdkBuildRelease.dependsOn(preBuild)
+        configureCMakeRelWithDebInfo.dependsOn(preReleaseBuild)
+        configureCMakeDebug.dependsOn(preDebugBuild)
     }
 
     packagingOptions {
@@ -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`
@@ -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.
 

website/versioned_docs/version-0.70/new-architecture-app-renderer-android.md

@@ -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
 

website/versioned_docs/version-0.70/new-architecture-library-android.md

@@ -34,6 +34,7 @@ app/build/generated/source/codegen
 │               └── NativeAwesomeManagerSpec.java
 ├── jni
 │   ├── Android.mk
+│   ├── CMakeLists.txt
 │   ├── react
 │   │   └── renderer
 │   │       └── components