どこにでもいるTSコーダーの忘備録

プログラミングに関する忘備録を自分用に残しときます。マサカリ怖い。

Expo

React Native製のアプリで受け取ったプッシュ通知をタップして特定の画面に遷移させる方法

目次 FirebaseコンソールからServer Keyを取得する Server KeyをExpoのサーバーにアップロードする 必要なパッケージをインストールする FirebaseコンソールからServer Keyを取得する Expoが認証情報を使って開発者の代わりにExpoのサーバーからプッシュ通知…

FirebaseからReact Native製アプリにプッシュ通知を送信する方法

スタンドアロンアプリをExpoで開発中に、プッシュ通知をタップして特定の画面を開く機能を実装したくなった。 BFFとしてFirebase Functionsを使用していたので、忘備録としてFirebase FunctionsからExpoで構築されたReact Native製アプリにプッシュ通知を送…

React NativeでFirebaseのダイナミックリンクをハンドリングしてみる

Firebase Authに登録されたメールアドレスを認証したあと特定の画面に遷移して結果を表示したいというモチベーションが沸々と湧きあがった。 流れとしては次のような感じ。 firebase/authのsendEmailVerificationメソッドを利用してユーザーのメールアドレス…

Firebase Dynamic Linksでダイナミックリンクを作成する

Firebase Dynamic Linksの作成画面で各単語が意味していることや、各フィールドで求められる内容を入力する意味が最初わからなかったので、将来的なことも含めて忘備録としてダイナミックリンクの作り方を残しておく。 Firebaseのコンソール画面からDynamic …

Expoのマネージドアプリのアップデートに関するメモ

expo publishについて expo publishを実行するとプロジェクトの永続的なURLが発行される。 これはExpo Goアプリで開くことができる。 そして、アプリの画像、フォント、動画などのアセットがすべてCDNにアップロードされる。 expo publishを実行した際に指定…

ExpoのRelease ChannelsとRuntime Versionsを調べてみた。

Release Channelsとは リリースチャンネルを使用することで、スタンドアロンアプリのビルド時に指定したリリースチャンネルと同じリリースチャンネルが指定されたアップデートを配信することができる。 これにより、複数の環境やバージョンを分けてアップデ…

EASを使ってAndroidアプリをビルドして実機で動かしてみような話

EASにはおおまかにわけて2種類の主要なサービスがある。 EAS Build EAS Submit EAS Buildは、ExpoやReact Nativeで作成されたアプリのバイナリをビルドするためのホスティングサービスです。 EAS Submitは、AppleのAppStoreやGoogle Play StoreにEASビルド…

一つの端末に複数環境用にビルドされたapkをインストールする話

ひとつの端末に本番環境、ステージング環境、開発環境用のそれぞれの環境でビルドされたアプリをインストールするためには、動的にapp.config.jsのios.bundleIdentifierフィールドとandroid.packageフィールドを変更する必要がある。 そのために環境変数APP_…

React Query Firebaseを使って React Nativeで Firebase Authを通して認証したりFirebase Functionsの関数を 呼び出してみよう

React Query Firebaseとは、Firebaseを使いやすくするためのHookのセットを提供してくれるパッケージです。提供されているHookでは、React Queryをラップしていて、React Queryの利点を融合することでフックをプロジェクトに対して簡単に導入できるようにし…

"Generating a new Keystore is not supported in --non-interactive mode"というエラーが出た場合の対処法

いつものようにGitHub Actions上で、EAS Buildを実行していたところ次のようなエラーが発生した。 ✔ Using remote Android credentials (Expo server) Error: Generating a new Keystore is not supported in --non-interactive mode 解決方法として、Androi…

React NativeでFirebaseを使おうとする際に'While trying to resolve module `idb` from file...'というエラーが出る場合の対処法

Expo CLIを使用して作成したReact NativeプロジェクトでFirebaseを導入してアプリを立ち上げた際に次のようなエラーが発生した。 While trying to resolve module `idb` from file `/プロジェクトのパス/node_modules/@firebase/app/dist/esm/index.esm2017.…

React NativeでReact Queryを使ってみよう

React Native React Queryを使ってみようという話。ネタバレすると、今回はuseQueryのみで、useMutationなどは使わない。 TL;DR 今回のコードはこちらのリポジトリで全容を確認できる。 github.com プロジェクトの準備 まずはプロジェクトを作成する。 expo …

ReactNavigationで他のナビゲーターのスクリーンに移動したり型チェックを行いたい

企画 次のような画面構成でスクリーンを構築したい。 Bottom Tabs Navigatorにスクリーンの代わりにStack Navigatorを2つ配置して、それぞれのStack Navigatorに2つずつスクリーンを配置する感じ。 そして、それぞれのスクリーンから各ナビゲーションのス…

Nike Run Clubアプリのチャートコンポーネントぽいものを作ってみる

僕はランニングする時にNRCを愛用しています。 www.nike.com このアプリのグラフをReact Native Chart Kitというライブラリで再現できないか試してみた。 github.com まずはインストールから。 yarn add react-native-chart-kit react-native-svg 実際に実装…

React Native用にRemixのuseActionDataもどきを作ってみる話

僕がWebアプリを開発するときはもっぱらRemixフレームワークを利用する。 remix.run 理由は単純で、loader関数とaction関数の考え方が大好きだからだ。 React Nativeのアプリの開発をするときも、Remixのloader関数とaction関数を使いたい。 しかし、そんな…

Expoで簡単なテスト環境を用意する

プロジェクトを準備する まずはプロジェクトを作ってみよ。 npx create-react-native-app -t with-typescript テストに必要なパッケージをインストールする 今回は普段使っているJestの代わりにVitestを入れてみる。 vitest.dev vitest yarn add -D vitest h…

Expoで立ち上げたアプリをシミュレーターで開こうとしたら開けなくなった話

いつものように、expo start --clearでアプリを立ち上げて、iOSシミュレーターで開こうとしたら次のように表示された。 no launchable updates found in databaseと書かれている。 意味がよくわからない。。。 今度は、別のシミュレーターで開いてみた。する…