From ea8129c3d4eb8d74701dedb45b9985e97c37e82c Mon Sep 17 00:00:00 2001 From: SheetJS Date: Tue, 30 Apr 2024 00:29:40 -0400 Subject: [PATCH] RN-Fetch on the Steam Deck --- .../docs/03-demos/17-mobile/01-reactnative.md | 98 ++++++++++++++++++- docz/docs/03-demos/17-mobile/03-quasar.md | 10 +- docz/docs/03-demos/17-mobile/04-ionic.md | 18 ++-- docz/docs/03-demos/17-mobile/05-capacitor.md | 19 ++-- docz/docs/03-demos/17-mobile/06-flutter.md | 19 ++-- 5 files changed, 141 insertions(+), 23 deletions(-) diff --git a/docz/docs/03-demos/17-mobile/01-reactnative.md b/docz/docs/03-demos/17-mobile/01-reactnative.md index 53bee9c..c8aa3b9 100644 --- a/docz/docs/03-demos/17-mobile/01-reactnative.md +++ b/docz/docs/03-demos/17-mobile/01-reactnative.md @@ -229,6 +229,7 @@ This demo was tested in the following environments: | Android 34 | Pixel 3a | `0.73.6` | `darwin-x64` | 2024-03-13 | | iOS 17.4 | iPhone 15 Pro Max | `0.73.6` | `darwin-x64` | 2024-03-13 | | Android 34 | Pixel 3a | `0.73.5` | `win10-x64` | 2024-03-05 | +| Android 34 | Pixel 3a | `0.73.7` | `linux-x64` | 2024-04-29 | **Real Devices** @@ -239,10 +240,42 @@ This demo was tested in the following environments: ::: +0) Install React Native dependencies + +
+ Installation Notes (click to show) + +On the Steam Deck, JDK17 was installed using `pacman`: + +```bash +sudo pacman -Syu jdk17-openjdk +``` + +[The Android Studio tarball](https://developer.android.com/studio) was +downloaded and extracted. After extracting: + +```bash +cd ./android-studio/bin +./studio.sh +``` + +In Android Studio, select "SDK Manager" and switch to the "SDK Tools" tab. Check +"Show Package Details" and install "Android SDK Command-line Tools (latest)". + +When this demo was last tested, the following environment variables were used: + +```bash +export ANDROID_HOME=~/Android/Sdk +export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools +export JAVA_HOME=/usr/lib/jvm/java-17-openjdk +``` + +
+ 1) Create project: ```bash -npx -y react-native@0.73.6 init SheetJSRNFetch --version="0.73.6" +npx -y react-native@0.73.7 init SheetJSRNFetch --version="0.73.7" ``` 2) Install shared dependencies: @@ -282,6 +315,20 @@ OpenJDK 64-Bit Server VM Temurin-17.0.10+7 (build 17.0.10+7, mixed mode) npx react-native run-android ``` +:::info pass + +On Linux, the command may silently stall. It is strongly recommended to launch +the interactive CLI tool: + +```bash +npx react-native start +``` + +Once the dev server is ready, the terminal will display a few options. Press `a` +to run on Android. + +::: + :::caution pass If the initial launch fails with an error referencing the emulator, manually @@ -298,6 +345,55 @@ This error can be resolved by installing and switching to the requested version. ::: +:::caution pass + +When this demo was last tested on Linux, the process failed to launch the emulator: + +
+warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
+
+ + +**This is a known bug in React Native!** + +If an emulator is installed, run the following command: + +```bash +npx react-native doctor +``` + +Under `Android`, there will be one error: + +
+Android {`\n`}
+{` `}✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.
+
+ +Press `f` and a list of available emulators will be shown. Select the emulator +(typically the last line) and press Enter. + +
+✔ Select the device / emulator you want to use › Emulator Pixel_3a_API_34_extension_level_7_x86_64 (disconnected)
+
+ +The text in green is the name of the virtual device +(`Pixel_3a_API_34_extension_level_7_x86_64` in this example). +Run the following command to manually start the emulator: + +```bash +$ANDROID_HOME/tools/emulator -avd Pixel_3a_API_34_extension_level_7_x86_64 +``` + +(replace `Pixel_3a_API_34_extension_level_7_x86_64` with the name of the virtual device) + +To confirm React Native detects the emulator, run the following command again: + +```bash +npx react-native doctor +``` + +::: + 6) When opened, the app should look like the "Before" screenshot below. After tapping "Import data from a spreadsheet", verify that the app shows new data: diff --git a/docz/docs/03-demos/17-mobile/03-quasar.md b/docz/docs/03-demos/17-mobile/03-quasar.md index 70c0717..bdc6695 100644 --- a/docz/docs/03-demos/17-mobile/03-quasar.md +++ b/docz/docs/03-demos/17-mobile/03-quasar.md @@ -41,10 +41,12 @@ The ["Demo"](#demo) creates an app that looks like the screenshots below: This demo was tested in the following environments: -| OS | Type | Device | Quasar | Date | -|:-----------|:-----|:--------------------|:---------|:-----------| -| Android 34 | Sim | Pixel 3a | `2.14.1` | 2023-12-04 | -| iOS 17.0.1 | Sim | iPhone SE (3rd gen) | `2.14.1` | 2023-12-04 | +**Simulators** + +| OS | Device | Quasar | Dev Platform | Date | +|:-----------|:--------------------|:---------|:-------------|:-----------| +| Android 34 | Pixel 3a | `2.14.1` | `darwin-x64` | 2023-12-04 | +| iOS 17.0.1 | iPhone SE (3rd gen) | `2.14.1` | `darwin-x64` | 2023-12-04 | ::: diff --git a/docz/docs/03-demos/17-mobile/04-ionic.md b/docz/docs/03-demos/17-mobile/04-ionic.md index 44c1a97..533f5cf 100644 --- a/docz/docs/03-demos/17-mobile/04-ionic.md +++ b/docz/docs/03-demos/17-mobile/04-ionic.md @@ -49,17 +49,23 @@ The [CapacitorJS demo](/docs/demos/mobile/capacitor) covers CapacitorJS apps. This demo was tested in the following environments: -| OS | Type | Device | Date | -|:-----------|:-----|:--------------------|:-----------| -| Android 34 | Sim | Pixel 3a | 2023-12-04 | -| iOS 17.0.1 | Sim | iPhone SE (3rd gen) | 2023-12-04 | +**Simulators** -`ionic info` showed: +| OS | Device | Config | Date | +|:-----------|:--------------------|:-------|:-----------| +| Android 34 | Pixel 3a | A | 2023-12-04 | +| iOS 17.0.1 | iPhone SE (3rd gen) | A | 2023-12-04 | + +
+ Configurations (click to show) + +Configuration A: - Ionic: `@ionic/angular 7.5.7`, `@ionic/angular-toolkit 9.0.0` - Cordova: `cordova-lib@12.0.1`, `android 12.0.1, ios 7.0.1` +- File Integration: `@awesome-cordova-plugins/file` version `6.4.0` -The file integration uses `@awesome-cordova-plugins/file` version `6.4.0`. +
::: diff --git a/docz/docs/03-demos/17-mobile/05-capacitor.md b/docz/docs/03-demos/17-mobile/05-capacitor.md index e1977d7..5d88f64 100644 --- a/docz/docs/03-demos/17-mobile/05-capacitor.md +++ b/docz/docs/03-demos/17-mobile/05-capacitor.md @@ -32,12 +32,19 @@ The "Complete Example" creates an app that looks like the screenshots below: This demo was tested in the following environments: -| OS | Type | Device | CapacitorJS + FS | Date | -|:-----------|:-----|:--------------------|:------------------|:-----------| -| Android 34 | Sim | Pixel 3a | `5.5.1` / `5.1.4` | 2023-12-04 | -| iOS 17.0.1 | Sim | iPhone 15 Pro Max | `5.5.1` / `5.1.4` | 2023-12-04 | -| Android 29 | Real | NVIDIA Shield | `5.5.1` / `5.1.4` | 2023-12-04 | -| iOS 15.1 | Real | iPad Pro | `5.5.1` / `5.1.4` | 2023-12-04 | +**Simulators** + +| OS | Device | CapacitorJS + FS | Dev Platform | Date | +|:-----------|:--------------------|:------------------|:-------------|:-----------| +| Android 34 | Pixel 3a | `5.5.1` / `5.1.4` | `darwin-x64` | 2023-12-04 | +| iOS 17.0.1 | iPhone 15 Pro Max | `5.5.1` / `5.1.4` | `darwin-x64` | 2023-12-04 | + +**Real Devices** + +| OS | Device | CapacitorJS + FS | Date | +|:-----------|:--------------------|:------------------|:-----------| +| Android 29 | NVIDIA Shield | `5.5.1` / `5.1.4` | 2023-12-04 | +| iOS 15.1 | iPad Pro | `5.5.1` / `5.1.4` | 2023-12-04 | ::: diff --git a/docz/docs/03-demos/17-mobile/06-flutter.md b/docz/docs/03-demos/17-mobile/06-flutter.md index 0e5101e..0bf1078 100644 --- a/docz/docs/03-demos/17-mobile/06-flutter.md +++ b/docz/docs/03-demos/17-mobile/06-flutter.md @@ -41,12 +41,19 @@ The "Demo" creates an app that looks like the screenshots below: This demo was tested in the following environments: -| OS | Type | Device | Dart | Flutter | Date | -|:-----------|:-----|:------------------|:--------|:---------|:-----------| -| Android 34 | Sim | Pixel 3a | `3.2.2` | `3.16.2` | 2023-12-04 | -| iOS 17.0.1 | Sim | iPhone 15 Pro Max | `3.2.2` | `3.16.2` | 2023-12-04 | -| Android 29 | Real | NVIDIA Shield | `3.2.2` | `3.16.2` | 2023-12-04 | -| iOS 15.1 | Real | iPad Pro | `3.2.2` | `3.16.2` | 2023-12-04 | +**Simulators** + +| OS | Device | Dart | Flutter | Dev Platform | Date | +|:-----------|:------------------|:--------|:---------|:-------------|:-----------| +| Android 34 | Pixel 3a | `3.2.2` | `3.16.2` | `darwin-x64` | 2023-12-04 | +| iOS 17.0.1 | iPhone 15 Pro Max | `3.2.2` | `3.16.2` | `darwin-x64` | 2023-12-04 | + +**Real Devices** + +| OS | Device | Dart | Flutter | Date | +|:-----------|:------------------|:--------|:---------|:-----------| +| Android 29 | NVIDIA Shield | `3.2.2` | `3.16.2` | 2023-12-04 | +| iOS 15.1 | iPad Pro | `3.2.2` | `3.16.2` | 2023-12-04 | :::