import firebase from '../../firebase'; ↓ import firebase from 'app/src/firebase'; ルートのエイリアスをpackage.jsonに設定する。 { "name": "app", } jsconfig.jsonのpathsにも設定すると、VSCodeでインテリセンスが使える。 // jsconfig.json { "comp…

i18n-js ローカライズのため翻訳ファイルを作成します。 Localization - Expo Documentation import * as Localization from 'expo-localization'; import i18n from 'i18n-js'; import en from './en.json'; import ja from './ja.json'; // 言語ごとの翻訳…

Cloud Functions Cloud Functions for Firebase Cloud Functions for Firebase はじめに: 最初の関数の記述とデプロイ はじめに: 最初の関数の記述とデプロイ | Firebase 簡単に言うとコードをクラウドに保存して、データベースやストレージ、HTTPといった …

Firebase Storage ファイルをクラウドに保存するサービスです。 ガイド Cloud Storage Cloud Storage | Firebase ウェブで使ってみる Get Started on Web | Firebase バケットの参照（パスを指定して別のバケットを使うこともできる） var storage = firebas…

Firestore Firebaseが提供するデータベースシステムです。仕組みはKeyValueStoreの構造を持つNoSQLとなります。 FirebaseにはRealtimeDatabaseというサービスもありますがFirestoreのほうが新しいようです。 Cloud Firestore | Firebase 3階層 collection （…

プロジェクト作成 https://console.firebase.google.com/ にアクセスしてプロジェクトを作成する ウェブアプリに Firebase を追加。アプリ側で apiKey や databaseURL などの設定を行う。 Database -> Database を作成 -> テストモードで開始 Database -> ル…

Amplitudeを使うとアプリを使用したユーザのログを収集できます。 OSバージョンや環境、ログイン、使用ユーザ、表示画面などの操作ログを取得できます。 import * as Amplitude from 'expo-analytics-amplitude'; Amplitudeでアカウントを作成し、プロジェク…

Expoビルドしようとしたときのエラー。 expo build:ios Your application icon can't have transparency if you wish to upload your app to Apple Store. 透明付き画像（アルファ付きpng）は使用できなようなので、 macのプレビューで「書き出し」を行って…

.envを使う .envファイルからfirebaseのapikeyを取り出したい。 yarn add react-native-dotenv GitHub - zetachang/react-native-dotenv: A Babel preset let you import application configs from .env file (zero runtime dependency) // babel.config.js …

通知をタップして任意の画面を起動したい。 Expoの通知機能を使います。 Notificationを受け取ってアクションさせる これをルートコンポーネントに置いておくと、通知を開いたときに実行される。 dataも受け取れる。 Notifications - Expo Documentation Rea…

Classコンポーネントの場合 class TestScreen extends React.Component { constructor(props) { componentDidMount() { } componentDidMount() { const { navigation, route } = this.props; } } Functionコンポーネントの場合 export default function(prop…

firebaseのfunctionでExpoの通知を送るために、https://exp.host/--/api/v2/push/sendにPOSTするようにしたい。ようやくstatus 'OK'が返ってきて準備OKのはずだが通知が届かなくて困っていた。 試しに下記のツールhttps://expo.io/notificationsで送るように…

ListHeaderComponentに入力欄を入れない方が良い FlatListのListHeaderComponentに検索のTextInputを配置して検索しようとすると、入力のたびにキーボードが閉じてしまうという現象が発生する。 TextInputのonChangeTextでstateを更新しているため、毎回全体…

whereとorderByで指定しているフィールドが異なる場合は、手動で複合インデックスを作成する必要があようです。 おそらくクエリが遅くなるのを強制的に防ぐためでしょう。合理的ですね。 // こんな場合 this.post.where('user', '==', 'test').orderBy('time…

タブの切替時に更新があった場合になにか処理をさせたい。 例えばタブを切替時や別の画面から移動してきた際にCRUDの更新を反映させるなど。 リスナーを設定する focus, blurといったイベントが使える。それぞれスクリーンがフォーカス取得、喪失時のイベン…

expoのチュートリアルで出てくる、expo install xxx. npm install と何が違うのかわからないけど、内部ではyarnが起動されているように見える。 そのためかnpm install xxxでライブラリ追加したあとにexpo startで実行すると、インストール済みのライブラリ…

インストール npx create-react-app sampleapp npm install redux react-redux Quick Start · React Redux react-reduxの目的 Reduxのstate, dispatch関数をReactのpropsで操作できるようにする でAppを囲む mapStateToPropsとmapDispatchToPropsを用意し、c…

はじめに Redux Devtoolsはchrome extensionを追加しただけでは使えません。 アプリ側のコードに下記を仕込んでおくする必要があります。 extensionはchromeウェブストアにあります。 GitHub - zalmoxisus/redux-devtools-extension: Redux DevTools extensi…

はじめに おそらく読んで理解できることはないので、なんとなく読んでExample: Todo Listで紹介されているようなサンプルアプリを作ることをおすすめします。 またReactで具体的に使う方法は後述のreact-reduxのガイドを読むことをおすすめします。 Basics h…

匿名ログインはできるものの、データのセットができない。 Missing or insufficient permissions. セキュリティルールの画面で、アクセスできるようにテストモードを選択したはずだが、 なんかアクセス権がないようです。 ルールの画面でfalseになっており実…

概要 あるコンポーネントから、子、孫のコンポーネントに値を渡すのに 通常だとpropsを使って順番に橋渡ししていくので手間ですが、 Contextを使うことでそんな面倒はなしにグローバルに値にアクセスできます。 アプリ全体で使う設定をもたせるのに便利だと…

VSCodeの左サイドバーのフォルダ名が、Udemy \ Rails のようにバックスラッシュが入ってしまいます。 フォルダの中にフォルダが1個しかない場合はまとめられるようです。 気持ち悪いのですが、最初は仕様なのかと諦めてましたが設定で修正できました。 Compa…

なんとなくVSCodeの左サイドバーのツリーが見にくいなと思っていたのですが、 原因はアイコンが無いからでした。 フォルダとファイルの見分けがつきにくいんです。なのでアイコンを探しました。 vscode-icons いい感じになりました。フォルダが黄色なのが良…