react-navigationでnestした特定のスクリーンでDrawerのgestureを一時的にオフにしたい

react-navigationを使って様々な組み方をすると思うんだけど、よくあるのがネストして複雑なnavigationを作るという感じ。
stackNavigatorをネストしまくるとか、TabNavigatorの中にStackNavigatorとか、DrawerNavigatorの中にStackNavigatorとか。

で、今回はDrawerNavigatorについて。
スワイプしたらDrawerが出てきてしまうので、スワイプで戻りたい時にも出てきてしまう。
ということで今日はDrawerのスワイプを一時的にオフにするお話をば。

java.lang.RuntimeException: Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle'っていうエラーが出た的なお話

アプリをPCにつないでreact-native run-androidをした際に、アプリがすぐにクラッシュした。
Android Studioに繋いでlog catを見てたら java.lang.RuntimeException: Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle'っていうエラーが出ていた。

ということで今日はこれを解決するお話をば。

ScrollViewとかFlatlist内のTouchableOpacityがscroll中に勝手にonPressされてしまう問題

ScrollView使っていてTouchableOpacityがscroll中に暴発してしまうことがたまにあるわけで。
それを解決する方法の一つはonPressInとかonPressOutを使うっていう方法(https://dev.classmethod.jp/articles/touchables-in-scrollview-on-rnfw/)があるけど、大量にデータが入ってるScrollViewだとちょっとパフォーマンス的なところどうなんだろうと疑問に思うことがあったり。

そこで今日は別の方法で解決するお話をば。

M1 Mac(Apple Silicon)でld: library not found for -lBoringSSL-GRPCとなる的なお話

M1 Mac miniを買って全然セットアップしてなかったけどそろそろ本気を出そうと思ってセットアップをしてた。
で、諸々色々と面倒だし一部Rosettaで動かさないといけないのがあれだけど完了した。
なのでReact Nativeをビルドしようとしたところld: library not found for -lBoringSSL-GRPCというエラーが出てビルドできず。

ということで今日はこれを解決するには的なお話をば。

electronでprisma使うときに気をつけておきましょう的なお話

create-react-app + electron + ffmpeg static + prismaで以前作った動画エンコードアプリを作り直しているんだけど、二つ大きな問題が出てきた。
1つはQuery engine binary for current platform "darwin"で、npx prisma generateしたときにnode_modules/.prisma/clientに入ってるはずのquery-engine-darwinが見つからないよっていう問題。
もう1つは上記問題を解決したあと本番パッケージングをして出てきたError: ENOTDIR: not a directory, chmod 'path/to/app/Contents/Resources/app.asar/build/query-engine-darwin'っていうエラー。

ということで今日はそれらの問題が出てくる理由と解決方法をば。 cp file asarをしない

create-react-app v4 + React v17 + ESLint v7 + TypeScriptでeslint-config-airbnbを使っていると、d.ts読み込めてるのにerror "Hoge" is not definedって感じでno-undefエラーが出てきてしまう的なお話

今までcreate-react-appのv3系を使っていて、えいやっていう気持ちでv4にアップしたので、内部的に入っていたESLintもついに7系になりって感じ。
だったんだけど、今までd.tsで通っていた型がESLintで通らなくなるというか、VSCode上ではちゃんと引っ張ってきてるのにno-undefエラーが出てしまったという。

ということで今日はそれを解決する方法をば。

React NativeのBare Workflowでexpo-ads-admobを入れたいときに、firebase系のやつを入れてるとCocoaPodsでバッティング系エラーが出てくる的なお話

Bare Workflow(react-native-unimodules)でAdmobを入れたいときに要注意的な。
expo-ads-admobを安易に入れると場合によってはタイトル通りpods installするときにアラートが出てきて大変なことになるので今日はそのお話をば。

Reactで綺麗に無限スクロールを実現するためにIntersectionObserverを使いましょう的なお話

色々と実装していると、なんだかんだで無限スクロールを実装したいことって多々あるわけで。
もちろん単純なページングを実装してもいいのだけど、React使ってSPA的なことを書いているとページングよりも無限スクロールで配列にガンガン後ろに足していくっていう方が楽だったりもするわけで。
その際にもっと見るボタンをユーザが押して新しくデータを取って来て云々をしてもいいけどやっぱ流れるようにみたいわけで。

ってことでIntersectionObserverを使うとそこらへんの実装が簡単になるので、それをhooks化して使っちゃおう的なお話をば。

bitriseでgitのサブモジュールを使ってるときにうまくやってくれないのを対処する的なお話

サブモジュールを使ったプロジェクトをbitriseでビルドする際に、git cloneで失敗することがある。
サブモジュール部分が引っ張って来れないよ的なやつなんだけど、.gitmodulesで指定しているURLが悪かったりしてダメだったり。

https://github.com/hoge/repository.git -> [email protected]:hoge/repository.gitにしてあげればいけた。

ここら辺が厄介なところではあるよね。

firebaseのfirestoreでdevelopからproductionへindexesをコピーしたい的なお話

develop環境がベースで、複合インデックスやら何やらを試すことが多いわけで。
で、うまくいったから本番にも反映したいなぁっていうときにGUIでいちいちぽちぽちするのは地味に辛かったり。

なので今日はそれを簡単に行うには的なお話をば。