React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選

React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選 Ichiki Sato
(@ichiki1023)

自己紹介 Ichiki Sato (@ichiki1023) 株式会社マイベスト (2024 年 4 月から！ )
現在育休中の 2 児の父 React Native は 3 年のブランクを経て 4 月から奮闘中経験としては iOS/Web のみで Android は未経験

マイベスト - 商品比較サービス

今日のおはなし iOS Only だった React Native 製のアプリで Android 版をリリースするまでに特にハマ
ったポイントが 2 つあったのでそのお話をさせてください！

ハマったポイント 1. テキストの高さがズレる問題 2. 画像周りのパーミッション問題

はじめにビルドを通すために色々設定したやったことの例環境変数の設定モジュールのアップデート React Native Firebase の Android
対応

思っていたよりもすぐに起動できた

ただよく見ると。。

なんかズレてる。。

ハマったポイント 1. テキストの高さがズレる問題

分かったこと Android のデフォルトのフォントは日本語だと NotoSansCJKJP 上記だと lineHeight が大きめに勝手に設定されている (っぽい ) 調査した感じだとおおよそ
10~15% フォントそのものに includeFontPadding も効いてなさそうフォント上部の方が余白が大きいので下にズレて見えるデフォルトではなくフォントをダウンロードして NotoSansJP にしても変わらなかった参考 : Android アプリで Line Height を   設定するときに注意したいこと 1. テキストの高さがズレる問題

対策 Android のみ lineHeight を 1.1 で割り縮小することでデフォルトで加わっている余分差をなくす (1.1 ~
1.15 を比較 & 計算した結果最適な値を設定 ) マイベストでは基本的に lineHeight まで細かくデザインシステムで管理しているため、縮小することで本来の期待するデザインに力技で合わせにいく 1. テキストの高さがズレる問題

改善後 1. テキストの高さがズレる問題

ハマったポイント 2. 画像周りのパーミッション問題

(iOS での経験上 ) パーミッションをしっかりと定義しておかないとストアの審査で Reject を受ける可能性が高いので、追加しておく 2. 画像周りのパーミッション問題

画像周りの権限追加マイベストのアプリで取得していた主な権限写真 (プロフィール写真用 ) カメラ (プロフィール写真用 ) android/app/src/main/AndroidManifest.xml に画像周りで必要な権限を追加しておく
<uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> 2. 画像周りのパーミッション問題

ただ、使用しているライブラリにこんな一文が ref: https://github.com/react-native-image-picker/react-native-image-picker? tab=readme-ov-file#android-1

権限不要。。。？プロフィール画像の写真選択 & 撮影をするのに権限不要 ? react-native-image-picker を使用していたが、 Android
の場合権限は不要なことが判明。 ref: https://github.com/react-native-image-picker/react-native-image-picker? tab=readme-ov-file#android-1 2. 画像周りのパーミッション問題

なぜ？ 2. 画像周りのパーミッション問題

権限が不要な理由の深堀り ① react-native-image-picker の内部実装を見てみる if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) { if
(isSingleSelect && (isPhoto || isVideo)) { libraryIntent = new Intent(Intent.ACTION_PICK); } else { libraryIntent = new Intent(Intent.ACTION_GET_CONTENT); libraryIntent.addCategory(Intent.CATEGORY_OPENABLE); } } else { libraryIntent = new Intent(MediaStore.ACTION_PICK_IMAGES); } https://github.com/react-native-image-picker/react-native-image- picker/.../ImagePickerModuleImpl.java#L128C1-L137C10 2. 画像周りのパーミッション問題

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) { if (isSingleSelect && (isPhoto ||
isVideo)) { libraryIntent = new Intent(Intent.ACTION_PICK); } else { libraryIntent = new Intent(Intent.ACTION_GET_CONTENT); libraryIntent.addCategory(Intent.CATEGORY_OPENABLE); } } else { libraryIntent = new Intent(MediaStore.ACTION_PICK_IMAGES); } Intent というものが使われていて、バージョンと画像の選択数によって使用するアクションを分けているみたい。

権限が不要な理由の深堀り ② 先ほどのコードを訳すとこんな感じ 13 未満かつ単一の選択 : Intent.ACTION_PICK を使用する 13 未満かつ複数の選択
: Intent.ACTION_GET_CONTENT を使用する 13 以降 : MediaStore.ACTION_PICK_IMAGES (PhotoPicker)を使用する 2. 画像周りのパーミッション問題

Intent とは？ https://developer.android.com/guide/components/intents-filters?hl=ja Intent は、アクションのリクエストに使用できるメッセージオブジェクト別のアプリコンポーネントから。 2.
画像周りのパーミッション問題

。。。。。。。 2. 画像周りのパーミッション問題

色々調べた結果アクションを指定すると、それを実行できる端末上のアプリが起動されるものらしい。 2. 画像周りのパーミッション問題

つまり react-native-image-picker では Intent が使用されている Intent はアクション（動作）を指定して、それを実行できる端末上のアプリを起動する仕組み Intent を使用して画像の選択を
PhotoPicker 含めて外部アプリに任せると個別のアプリ側では権限取得は不要になるということらしい 2. 画像周りのパーミッション問題

なるほど！ 2. 画像周りのパーミッション問題

不必要なパーミッションは削除しておく不要なことが判明したので追加していた権限を AndroidManifest.xml から削除する 2. 画像周りのパーミッション問題

その後無事 2024/09/25 に 1st リリース公開完了権限周りも問題なかった！

まとめ iOS 版でアプリケーションとしての形はできていたので、コードを直接修正するのはごくわずかで済んだ (React Native 最高 ) ただし Android
の前提知識はかなり必要なのでひたすらキャッチアップをしていく必要があってそれが大変

ご清聴ありがとうございました

React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選

React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選

Ichiki

More Decks by Ichiki

Other Decks in Technology

Featured

Transcript