React-Native on 怠惰技術ブログ

WSL2でExpo + E2Eテスト（MaestroとDetox）を試みて完全に詰んだ話

Mon, 23 Feb 2026 21:30:00 +0900

TL;DR

WSL2環境でExpo（React Native）のE2EテストをMaestroとDetoxで試みたが、どちらもWSL2とWindowsエミュレータの構造的な問題で動かなかった。

かなり過言ではあるが、あえて感情的になるならば、Mobile開発においてMac以外は人権がない。というかあまりにもMac環境以外がだるすぎる。

環境

OS: Windows + WSL2（Ubuntu）
Expo SDK 54 / React Native 0.81.5
New Architecture有効
Androidエミュレータ: Windows側で動作（Medium Phone API 36）
ADB: Windows側のものをWSL2から参照

Maestroを試みる

インストール

curl -Ls "https://get.maestro.mobile.dev" | bash
export PATH="$HOME/.maestro/bin:$PATH"

ここで最初の罠。maestro --helpを叩くとAI系の全く別のCLIツールが応答した。同名の別アプリが先にPATHに入っていたため。$HOME/.maestro/binをPATHの先頭に置くことで解決。

フローの準備

# .maestro/add_and_complete_task.yml
appId: com.example.myapp
---
- launchApp
- tapOn:
    text: "追加"
- inputText: "テストタスク"
- tapOn:
    text: "追加する"
- assertVisible:
    text: "NOW"

実行して即死

You have 0 devices connected, which is not enough to run 1 shards.

エミュレータはWindows側で動いており、adb devicesにはemulator-5554が見えている。しかしMaestroはWSL2側でデバイスを探すため認識できない。

--udid=emulator-5554を指定しても：

Device emulator-5554 was requested, but it is not connected.

maestro start-device --platform=androidを試みると：

react-native-pdf 6.7.7のiOS表示問題をpatch-packageで解決する

Tue, 17 Feb 2026 14:30:00 +0900

はじめに

業務でreact-native-pdfを使用した際、AndroidではPDFが正常に表示されるのにiOSでは表示されないという問題に遭遇しました。

この記事では、GitHubのissueで共有された解決策であるpatch-packageを使ったパッチ適用方法について解説します。

問題の概要

環境

{
  "react-native-pdf": "^6.7.7",
  "react-native": "0.80.1",
  "react-native-blob-util": "^0.22.2"
}

症状

Android: PDF表示が正常に動作
iOS: PDFが表示されない

この問題は、React Native 0.80以降でreact-native-pdfを使用した際に発生することが確認されています。

参考: pdf is not displayed，Android is working fine, but there are problems with iOS #966

解決策: patch-packageを使う

GitHubのissueで@anhnguyen123さんが共有してくれたパッチファイルを適用することで、この問題を解決できます。

1. patch-packageのインストール

まず、patch-packageとpostinstall-postinstallをdevDependenciesとしてインストールします。

# npmの場合
npm install --save-dev patch-package

# yarnの場合
yarn add --dev patch-package postinstall-postinstall

参考: patch-package - npm

2. package.jsonにpostinstallスクリプトを追加

package.jsonのscriptsセクションに、postinstallスクリプトを追加します。

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

このスクリプトにより、npm installまたはyarn installを実行するたびに、自動的にパッチが適用されます。

3. パッチファイルの配置

GitHubのissueからパッチファイルreact-native-pdf+6.7.7.patchをダウンロードし、プロジェクトルートにpatchesディレクトリを作成してそこに配置します。

AsyncStorageって裏側何やってんの？ - 2.0と3.0の実装の違いを調べてみた

Sun, 08 Feb 2026 17:50:00 +0900

私は普段React NativeでExpo触ってるので、AsyncStorageはよく使うんだけど、「そういえばAsyncStorageって裏側何やってんだろう？」って疑問が湧いてきたので調べてみることにした。

AsyncStorageの裏側

AsyncStorageのバージョンによって実装が少し違う。

AsyncStorage 2.0の実装

iOS/Androidのみ調査。

公式ドキュメント: Where your data is stored - Async Storage

iOS (2.0)

manifest.jsonファイルに保存される
JSONファイル形式
パス: Documents/RCTAsyncLocalStorage_V1/manifest.json
詳細: 1024文字以下のデータはmanifest.jsonに、それより大きいデータは個別ファイル(MD5ハッシュ名)に保存される

Android (2.0)

SQLiteデータベースに保存される
データベース名: RKStorage
パス: /data/data/{package_name}/databases/RKStorage

AsyncStorage 3.0 (next)の実装

公式ドキュメント: https://react-native-async-storage.github.io/3.0-next/

対応プラットフォーム

Android (SQLite)
iOS (SQLite) ✨
macOS (SQLite)
visionOS (legacy fallback, single database only)
Web (IndexedDB backend)
Windows (legacy fallback, single database only)

iOS (3.0)

SQLiteデータベースに変更された
Androidと同じ実装に統一
パフォーマンスと安定性が向上

Android (3.0)

引き続きSQLite
より洗練された実装

3.0からはiOSもAndroidも両方SQLiteになって、実装が統一されるそうだ。

互換性

React Native 0.76以降が必要(iOS/Android)
Kotlin 2.1.0
iOS minimum target: 13
Android minimum SDK: 24

なぜiOSでmanifest.jsonからSQLiteに変更したのか

あくまでも推測ではあるがやってみた。

React NativeのTodoアプリで実装する相対時間ベースのプリセット機能

Sun, 08 Feb 2026 10:50:00 +0900

絶対時間ではなく相対時間（dueHoursOffset）で期限を管理することで、繰り返しタスクを効率化するプリセット機能の実装方法を解説

三竦（さんすくみ）要件定義書

Fri, 06 Feb 2026 07:30:00 +0900

犬猿雉の三すくみを使った追跡型対戦ゲームの要件定義。リアルタイムアクション + 戦略性を両立したシンプルなモバイルゲーム

Gemini CLIでExpo Todoアプリを爆速開発した話

Sat, 31 Jan 2026 19:00:00 +0900

Gemini CLI を使って Expo の Todo アプリを開発した体験記。GEMINI.md でルールを管理し、段階的に機能を追加していく方法を紹介します。

React NativeでTextInputの日本語入力が壊れる問題と解決方法

Sat, 31 Jan 2026 18:30:00 +0900

React NativeのTextInputで日本語入力時に変換候補が消える問題の原因と、autoComplete/autoCorrectによる解決方法を解説します。