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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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