From e19163167ebab17ea06508e1d940f7e264073593 Mon Sep 17 00:00:00 2001
From: Scott McKay <skottmckay@gmail.com>
Date: Wed, 28 Sep 2022 08:11:58 +1000
Subject: [PATCH] Update React Native documentation to reflect change to use
 full ORT  (#13091)

### Description
<!-- Describe your changes. -->
Update React Native documentation to reflect change to use full ORT. Fix
broken links.


### Motivation and Context
<!-- - Why is this change required? What problem does it solve?
ORT v1.13 uses the full ORT package. Instructions for performing a
custom build did not cover this.

Co-authored-by: Edward Chen <18449977+edgchen1@users.noreply.github.com>
---
 js/README.md                 | 74 ++++++++++++++++++++++++++++--------
 js/react_native/README.md    | 14 ++++---
 js/react_native/package.json |  4 +-
 3 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/js/README.md b/js/README.md
index 9f1a6150a7..b6f5eb84cc 100644
--- a/js/README.md
+++ b/js/README.md
@@ -339,7 +339,11 @@ This project provides an ONNX Runtime React Native JavaScript library to run ONN
 
 ### Models with ORT format
 
-By default, ONNX Runtime React Native leverages ONNX Runtime Mobile package with ORT format. Follow the [instruciton](https://onnxruntime.ai/docs/tutorials/mobile/model-conversion.html) to covert ONNX model to ORT format.
+Prior to ORT v1.13, the ONNX Runtime React Native package utilized the ONNX Runtime Mobile package, which required an ONNX model to be converted to ORT format.
+Follow these [instructions](https://onnxruntime.ai/docs/reference/ort-format-models.html#convert-onnx-models-to-ort-format) to convert ONNX model to ORT format.
+Note that the ONNX Runtime Mobile package includes a reduced set of operators and types, so not all models are supported. See [here](https://onnxruntime.ai/docs/reference/operators/MobileOps.html) for the list of supported operators and types.
+
+From ORT v1.13 onwards the 'full' ONNX Runtime package is used. It supports both ONNX and ORT format models, and all operators and types.
 
 ### Build
 
@@ -349,21 +353,38 @@ By default, ONNX Runtime React Native leverages ONNX Runtime Mobile package with
    - in `<ORT_ROOT>/js/common/`, run `npm ci`.
    - in `<ORT_ROOT>/js/react_native/`, run `yarn`.
 
-2. Build Android ONNX Runtime package
+2. Acquire or build the Android ONNX Runtime package
 
    1. To use a published Android ONNX Runtime Mobile package from Maven, go to step 5.
 
-   2. Set up an Android build environment referring to [instruction](https://www.onnxruntime.ai/docs/how-to/build/android-ios.html#android)
+   2. Set up an Android build environment using these [instructions](https://onnxruntime.ai/docs/build/android.html). Note that the dependencies are quite convoluted, so using the specified JDK and Gradle versions is important.
 
-   3. In `<ORT_ROOT>`, run this python script to build ONNX Runtime Android archive file. In windows, this requires an admin account to build. To build a model specific package with reduced size, refer to [instruction](https://www.onnxruntime.ai/docs/how-to/build/reduced.html#build-ort-with-reduced-size).
+   3. In `<ORT_ROOT>`, run the below python script to build the ONNX Runtime Android archive file. On a Windows machine, this requires an admin account to build.
 
+   You can build a 'full' package that supports all operators and types, or a reduced size 'mobile' package that supports a limited set of operators and types based on your model/s to miminize the binary size. 
+   See [here](https://onnxruntime.ai/docs/build/custom.html) for information about how the reduced build works, including creating the configuration file using your model/s.
+
+
+      Full build:
       ```sh
-      python tools/ci_build/github/android/build_aar_package.py tools/ci_build/github/android/default_mobile_aar_build_settings.json --config MinSizeRel --android_sdk_path <ANDROID_SDK_PATH> --android_ndk_path <ANDROID_NDK_PATH> --build_dir <BUILD_DIRECTORY> --include_ops_by_config tools/ci_build/github/android/mobile_package.required_operators.config
+      python tools/ci_build/github/android/build_aar_package.py tools/ci_build/github/android/default_full_aar_build_settings.json --config Release --android_sdk_path <ANDROID_SDK_PATH> --android_ndk_path <ANDROID_NDK_PATH> --build_dir <BUILD_DIRECTORY>
       ```
 
-   4. Copy `<BUILD_DIRECTORY>/aar_out/MinSizeRel/com/microsoft/onnxruntime/onnxruntime-mobile/<version>/onnxruntime-mobile-<version>.aar` into `<ORT_ROOT>/js/react_native/android/libs` directory.
+      Reduced size build with configuration file generated from your model/s. Note that either Release or MinSizeRel could be used as the config, depending on your priorities:
+      ```sh
+      python tools/ci_build/github/android/build_aar_package.py tools/ci_build/github/android/default_mobile_aar_build_settings.json --config MinSizeRel --android_sdk_path <ANDROID_SDK_PATH> --android_ndk_path <ANDROID_NDK_PATH> --build_dir <BUILD_DIRECTORY> --include_ops_by_config <required_ops_and_types_for_your_models.config> --enable_reduced_operator_type_support
+      ```
 
-   5. To verify, open Android Emulator and run this command from `<ORT_ROOT>/js/react_native/android`
+   4. Move the generated ONNX Runtime Android archive file to `<ORT_ROOT>/js/react_native/android/libs/`.
+
+      Full build:
+      Copy `<BUILD_DIRECTORY>/aar_out/Release/com/microsoft/onnxruntime/onnxruntime-android/<version>/onnxruntime-android-<version>.aar` into `<ORT_ROOT>/js/react_native/android/libs` directory.
+
+      Reduced size build:
+      Copy `<BUILD_DIRECTORY>/aar_out/MinSizeRel/com/microsoft/onnxruntime/onnxruntime-mobile/<version>/onnxruntime-mobile-<version>.aar` into `<ORT_ROOT>/js/react_native/android/libs` directory and update to dependencies in [js/react_native/android/build.gradle](https://github.com/microsoft/onnxruntime/blob/365a01397dbd1293e0c2773380c57fd271432b72/js/react_native/android/build.gradle#L136-L137) to use onnxruntime-mobile instead of onnxruntime-android.
+
+
+   5. To verify, open the Android Emulator and run this command from `<ORT_ROOT>/js/react_native/android`
 
       ```sh
       ./gradlew connectedDebugAndroidTest
@@ -371,23 +392,40 @@ By default, ONNX Runtime React Native leverages ONNX Runtime Mobile package with
 
 3. Build iOS ONNX Runtime package
 
-   1. To use a published c/c++ ONNX Runtime Mobile package from CocoaPods, skip all steps below.
+   1. To use the published C/C++ ONNX Runtime package from CocoaPods, skip all steps below.
 
-   2. Set up iOS build environment referring to [instruction](https://www.onnxruntime.ai/docs/how-to/build/android-ios.html#ios).
+   2. Set up iOS build environment using these [instructions](https://onnxruntime.ai/docs/build/ios.html).
 
-   3. Build a fat ONNX Runtime Mobile Framework for iOS and iOS simulator from `<ORT_ROOT>` using this command,
+   3. Build a fat ONNX Runtime Mobile Framework for iOS and iOS simulator from `<ORT_ROOT>` using this command:
 
+      Full build:
       ```sh
-      python tools/ci_build/github/apple/build_ios_framework.py tools/ci_build/github/apple/default_mobile_ios_framework_build_settings.json --config MinSizeRel --include_ops_by_config tools/ci_build/github/android/mobile_package.required_operators.config
+      python tools/ci_build/github/apple/build_ios_framework.py tools/ci_build/github/apple/default_full_ios_framework_build_settings.json --config Release
       ```
 
-      It creates `Headers`, `LICENSE`, and `onnxruntime.xcframework` in `build/iOS_framework/framework_out` directory. From `framework_out` directory, create an archive file named `onnxruntime-mobile-c.zip` as follows and copy to `<ORT_ROOT>/js/react_native/local_pods` directory.
+      Reduced size build:
+      ```sh
+      python tools/ci_build/github/apple/build_ios_framework.py tools/ci_build/github/apple/default_mobile_ios_framework_build_settings.json --config MinSizeRel --include_ops_by_config <required_ops_and_types_for_your_models.config> --enable_reduced_operator_type_support
+      ```
 
+      The build creates `Headers`, `LICENSE`, and `onnxruntime.xcframework` in `build/iOS_framework/framework_out` directory. From `framework_out` directory, create an archive file named `onnxruntime-c.zip` for a full build or  `onnxruntime-mobile-c.zip` for a reduced size build and copy to `<ORT_ROOT>/js/react_native/local_pods` directory.
+
+      Full build:
+      ```sh
+      zip -r onnxruntime-c.zip .
+      ```
+
+      Reduced size build:
       ```sh
       zip -r onnxruntime-mobile-c.zip .
       ```
 
-   4. To verify, open iOS Simulator and run this command from `<ORT_ROOT>/js/react_native/ios`. Change a destination to specify a running iOS Simulator.
+   4. To verify, open the iOS Simulator and run the below command from `<ORT_ROOT>/js/react_native/ios`. Change the destination argument as needed to specify a running iOS Simulator.
+
+      If using the reduced size build it is necessary to first update some configuration to use the mobile ORT package:
+        - replace `onnxruntime/onnxruntime.framework` with `onnxruntime-mobile/onnxruntime.framework` in /js/react_native/ios/OnnxruntimeModule.xcodeproj/project.pbxproj
+        - replace `onnxruntime-c` with `onnxruntime-mobile-c` in /js/react_native/ios/Podfile
+        - For reference, [this PR](https://github.com/microsoft/onnxruntime/pull/13037) shows the changes made to switch from using the 'mobile' ORT package to the 'full' package.
 
       ```sh
       pod install
@@ -408,7 +446,13 @@ By default, ONNX Runtime React Native leverages ONNX Runtime Mobile package with
    yarn bootstrap
    ```
 
-   When testing with a custom built ONNX Runtime Android package, copy `<BUILD_DIRECTORY>/aar_out/MinSizeRel/com/microsoft/onnxruntime/onnxruntime-mobile/<version>/onnxruntime-mobile-<version>.aar` into `<ORT_ROOT>/js/react_native/e2e/android/app/libs` directory. Using a custom built ONNX Runtime iOS package, copy `onnxruntime-mobile-c.zip` into `<ORT_ROOT>/js/react_native/local_pods` directory if it's not already done.
+   When testing with a custom built ONNX Runtime Android package, copy `<BUILD_DIRECTORY>/aar_out/MinSizeRel/com/microsoft/onnxruntime/onnxruntime-{android|mobile}/<version>/onnxruntime-{android|mobile}-<version>.aar` into the `<ORT_ROOT>/js/react_native/e2e/android/app/libs` directory.
+
+   When testing with a custom built ONNX Runtime iOS package, copy `onnxruntime-[mobile-]c.zip` into the `<ORT_ROOT>/js/react_native/local_pods` directory.
+
+   If using the reduced size build it is necessary to update some configuration to use the mobile ORT package:
+     - replace `com.microsoft.onnxruntime:onnxruntime-android` with `com.microsoft.onnxruntime:onnxruntime-mobile` in /js/react_native/e2e/android/app/build.gradle
+     - replace `onnxruntime-c` with `onnxruntime-mobile-c` in /js/react_native/e2e/ios/Podfile
 
    From `<ORT_ROOT>/js/react_native/e2e/android`, run e2e Android tests as follows,
 
@@ -433,7 +477,7 @@ By default, ONNX Runtime React Native leverages ONNX Runtime Mobile package with
 
 ### NPM Packaging
 
-1. Update a version using `npm verison <version>` from `<ORT_ROOT>/js/react_native` folder. If it's for a dev, use `npm version <version>-dev.<subversion>`
+1. Update a version using `npm version <version>` from `<ORT_ROOT>/js/react_native` folder. If it's for a dev, use `npm version <version>-dev.<subversion>`
 
 2. Run `npm pack` and verify NPM package contents
 
diff --git a/js/react_native/README.md b/js/react_native/README.md
index d64d08484a..2f08356a84 100644
--- a/js/react_native/README.md
+++ b/js/react_native/README.md
@@ -1,6 +1,6 @@
 # onnxruntime-react-native
 
-ONNX Runtime React Native provides a JavaScript library for running ONNX models on React Native app.
+ONNX Runtime React Native provides a JavaScript library for running ONNX models in a React Native app.
 
 ### Why ONNX models
 
@@ -8,7 +8,7 @@ The [Open Neural Network Exchange](http://onnx.ai/) (ONNX) is an open standard f
 
 ### Why ONNX Runtime React Native
 
-With ONNX Runtime React Native, React Native developers can score pre-trained ONNX models directy on React Native apps by leveraging [ONNX Runtime Mobile](https://www.onnxruntime.ai/docs/reference/mobile/prebuilt-package/), so it provides a light-weight inference solution for Android and iOS.
+With ONNX Runtime React Native, React Native developers can score pre-trained ONNX models directly in React Native apps by leveraging [ONNX Runtime](https://onnxruntime.ai/docs/), so it provides a light-weight inference solution for Android and iOS.
 
 ### Installation
 
@@ -27,14 +27,16 @@ const session: InferenceSession = await InferenceSession.create(modelPath);
 const result = session.run(input, ['num_detection:0', 'detection_classes:0'])
 ```
 
-Refer to [ONNX Runtime JavaScript examples](https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js) for samples and tutorials. Different from other JavaScript frameworks like node.js and web, React Native library doesn't support these features.
-
-- Unsigned data type at Tensor
+Refer to [ONNX Runtime JavaScript examples](https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js) for samples and tutorials. The ONNX Runtime React Native library does not currently support the following features:
+- Tensors with unsigned data types, with the exception of uint8 on Android devices
 - Model loading using ArrayBuffer
 
 ### Operator and type support
 
-ONNX Runtime React Native currently supports most operators used by popular models. Refer to [ONNX Runtime Mobile Pacakge Operator and Type](https://www.onnxruntime.ai/docs/reference/mobile/prebuilt-package/1.8%20ORTMobilePackageOperatorTypeSupport).
+ONNX Runtime React Native version 1.13 supports both ONNX and ORT format models, and includes all operators and types.
+
+Previous ONNX Runtime React Native packages use the ONNX Runtime Mobile package, and support operators and types used in popular mobile models.
+See [here](https://onnxruntime.ai/docs/reference/operators/MobileOps.html) for the list of supported operators and types.
 
 ### License
 
diff --git a/js/react_native/package.json b/js/react_native/package.json
index 13c6b1eaa6..cc69c48dc7 100644
--- a/js/react_native/package.json
+++ b/js/react_native/package.json
@@ -40,7 +40,7 @@
   "source": "lib/index",
   "version": "1.13.0",
   "main": "dist/commonjs/index",
-  "homepage": "https://github.com/Microsoft/onnxruntime/js/react_native#readme",
+  "homepage": "https://github.com/microsoft/onnxruntime/blob/main/js/react_native/README.md",
   "files": [
     "lib",
     "dist",
@@ -60,7 +60,7 @@
     "!android/gradle/wrapper/*.jar",
     "!android/libs"
   ],
-  "description": "Onnxruntime bridge for react native",
+  "description": "ONNX Runtime bridge for react native",
   "repository": "https://github.com/Microsoft/onnxruntime.git",
   "react-native-builder-bob": {
     "source": "lib",