RN-Fetch on the Steam Deck

This commit is contained in:
SheetJS 2024-04-30 00:29:40 -04:00
parent 954ab5fe7e
commit ea8129c3d4
5 changed files with 141 additions and 23 deletions

@ -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
<details>
<summary><b>Installation Notes</b> (click to show)</summary>
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
```
</details>
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:
<pre>
<b {...y}>warn</b> Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
</pre>
**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:
<pre>
<span {...gr}>Android</span> {`\n`}
{` `}<span {...r}></span> Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.
</pre>
Press `f` and a list of available emulators will be shown. Select the emulator
(typically the last line) and press Enter.
<pre>
<span {...g}></span> <b>Select the device / emulator you want to use</b> <span {...gr}></span> <b>Emulator</b> <span {...g}>Pixel_3a_API_34_extension_level_7_x86_64</span> (disconnected)
</pre>
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:

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

@ -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 |
<details>
<summary><b>Configurations</b> (click to show)</summary>
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`.
</details>
:::

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

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