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

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

React Native

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製アプリにプッシュ通知を送…

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

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

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

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

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と書かれている。 意味がよくわからない。。。 今度は、別のシミュレーターで開いてみた。する…