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というエラーが出てビルドできず。

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

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

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

TypeScriptでd.ts内でimportすると外部でその型が読み込めなくなるのを解決した的なお話

タイトルからするとよくわかりづらいんだけど。
React Native x TypeScriptで型をtypesディレクトリの中につらつらと書く感じで自分は開発してる。
そうするとどこでもtype Hogeを読み出すことができるんだけど、d.ts内でimport { FirebaseFirestoreTypes } from '@react-native-firebase/firestore';みたいにすると途端にHogeが読み出せなくなってしまう的な。

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

Expo v36でReact Nativeが0.61になってfast refreshが使えるようになったり、Permissionを各モジュールから確認できるようになった的なお話

Expoがv36にアップデートした。
ついにReact Nativeが0.61になったよね的な。

Expo SDK 36 is now available

ということで今日はいつも通りのざっくり翻訳記事的なお話をば。

React NativeをバージョンアップしたらCould not connect to development serverとなってAndroidで実行できないときの対処的なお話

react-nativeとreact-native-unimodulesを最新版にアップロードしたんだけど。
諸々どのファイルをアップデートする必要があるとかは面倒だから説明はしないけどもリポジトリはこちら。

https://github.com/watanabeyu/rn-update-repo

で、その中でAndroidでどうしてもCould not connect to development serverとなって実行できないという問題が発生。
ということで今日はこれの対処方法的なお話をば。

XcodeでTARGETを複数作ったら、ちゃんとPodfileで作ったターゲット分installしましょう的なお話

タイトル通りな感じ。
今作っているものでfirebase使ってるし開発用とかでプッシュ通知とか考えるとどうしてもTARGETをわけてbudle idも変えておきたいなと。
ってな感じでTARGETもう一個作ってローカルでArchiveするともちろん問題なし。
ただしBitrise上でArchiveするとなぜかlibPods-targetname.aのlinkingが外れてる状態。

ということで今日はどうしてもlinkingが外れてしまうのはPodfileの書き方が悪いからちゃんとしましょう的なお話をば。

react-native-firebase/firestoreを使っていて、FIRESTORE INTERNAL ASSERTION FAILED: Could not load root certificates from the bundle. SSL cannot work.ってエラーが出たときの対処的なお話

react-native-firebase/firestoreを使ったらなぜか出てきた「FIRESTORE INTERNAL ASSERTION FAILED: Could not load root certificates from the bundle. SSL cannot work.」っていうエラー。
SSLで通信できないよ的な感じなんだけどよくわからず。
とりあえず調べていくとこのようなstack overflowが見つかった。

ってなわけで今日はfirestoreでちゃんと通信できないのを解決するには的なお話をば。

Expo v35でiOS13対応でDark ModeとかApple IDでログインとかデバイス系の新しいAPIとか使えるようになったよ的なお話

Expoがv35にアップデートした。
今回も前回から約2ヶ月以内となかなかのスピード。
主にiOS13という新しいバージョンへの対応がメイン的なお話みたい。
ちなみに残念ながらReact Nativeのバージョンはまだ0.59.8だったりする。

Expo SDK 34 is now available

ということで今日は変更点的なお話をば。

eslintルールのreact-hooks/exhaustive-depsを設定していると無限ループに陥った的なお話

hooksは便利というかいい感じなわけで。
useStateとかuseCallbackとか色々とあるわけで。
その中で公式的にESLint入れるならばreact-hooks/exhaustive-depsとreact-hooks/rules-of-hooksを入れておけって言ってるんだけど、react-hooks/exhaustive-depsが悪さをしていたっていう。

ということで今日はreact-hooks/exhaustive-depsが悪さをするパターン的なお話をば。

react-nativeプロジェクトでSplash Screenの調整をしたい的なお話

React Nativeでアプリを書いていると、スプラッシュスクリーンが終わって画面が表示されるまでに白のブランクスクリーンが一瞬出てきてしまう。
ちなみにExpoでも出てくるんだけどもExpoではSplashというAPIがあって、Splashスクリーンを閉じるタイミングを調整できたりする。
けどReact Nativeではreact-native-splash-screenなどのパッケージを入れないといけないんだけど、これがreact-native linkだけで済むならばいいんだけどそういうわけにもいかなかったりするわけで。
個人的にはなるべくXcodeはいじりたくないという信念があるんだけどこればかりはいかんせん難しかったり。

でもまぁデザイン次第ではあるんだけどどうにかこれを解決する方法を見つけた。
ということで今日はデザイン次第ではあるんだけどSplash Screenの調整をサクッとやる方法的なお話をば。

React Nativeプロジェクトのリポジトリルートにあるindex.jsはindex.tsにしてはいけないお話

まんまタイトル通り。
これにしてしまうとビルドできない。
ちなみにリポジトリルートにあるindex.jsってAppRegistry.registerComponent(appName, () => App);みたいにするやつ。

というのもビルド(アーカイブ)するときにCLIだかシェルスクリプトが走るんだけど、それがindex.jsを指定しているから。
index.tsにしてもシミュレータではちゃんと走るんですけどという感じではあるんだけど、シミュレータはビルドしていないから。
なんでビルドできないんだって謎だったんだけどこういうオチ。
TypeScript化するのはいいんだけどできないファイルもあるよね的なみたいな。

BitriseでアプリのバージョンとビルドナンバーをXcodeとかAndroid Studioを使わずに簡単に管理するための方法的なお話

Birtriseはとても便利なCI/CDなわけで。
アプリをビルドしてadhoc配布もしてくれるわ、App Store上にアップロードもしてくれるわ、Google Play Storeにもアップしてくれるわといいことが多い。
もちろんアプリビルドとかがあると無料プランでは収まるわけがないから課金をせざるをえないんだけど、それでも十分すぎるほど楽になる感じ。

けどまぁ普通にやっているとアプリのバージョンとかビルドナンバーはXcodeを開いたりAndroid Studioを開いたりして管理しないといけなくかなり面倒。
もちろんBitriseのステップでビルドナンバーを埋め込んでくれるステップがあったりするんだけど、それはBitriseのジョブIDに準拠する形になるのでバージョンが飛んでしまうのが個人的にはあまり好きじゃなく。
かといって定数としていくつとか入れるのも面倒だし、Tagおよびリリースを発行したタイミングをトリガーにして、そのタグ名の中にビルドナンバーも埋め込んで、さらにバージョンも埋め込んじゃうっていう強引な方法もあるけど、それだとAdhoc配信するときとかどうするんだ？っていう感じでもあったり。

ということで今日はバージョンやビルドナンバーをなるべく簡単に管理する方法的なお話をば。

react nativeで環境別にAPI_URLを出し分けしたいときにはbabel-plugin-transform-inline-environment-variablesを使えばネイティブをいじらずに簡単にできるよ的なお話

react-nativeでアプリ開発をしているときに直面するconfig的な定数の出し分け。
APIなど環境ごとに変わらないような簡単なアプリでは必要ないんだけど、がっつりと作り込んだアプリの場合に直面するやつ。
Expoだとapp.jsonのextra部分に好きなkey-valueを埋め込むことができ、buildやpublish時に--configでapp.jsonを指定することができるので何も深く考える必要がなかったり。

ちなみにreact native 環境変数とかで調べると大体の記事がreact-native-configで、次点でreact-native-dotenvという感じになる。
react-native-configはネイティブ部分にも環境変数を渡したいとかそういうときになるんだろうけど、ぶっちゃけそんな使うことある？って思ってしまう。
react-native linkするのも面倒だしましてやgradleをいじったりもかなり面倒だったり。
react-native-dotenvは.envとして中にkey=value形式で記述した環境変数をimport {Hoge} from 'react-native-dotenv'みたいな感じで呼び出すことができるんだけど、個人的に定数に関してはjsonで管理したいなぁっていう気持ちがあったり。
それに複数値を環境変数として定義するよりも、1つのAPP_ENVみたいな変数を見て読み込むファイルを変更する方がいいんじゃないかと。

ということで今日は簡単に環境ごとに読み込む定数を変更したい的なお話をば。

generator-rn-toolboxを使ってReact Nativeアプリのアイコンやスプラッシュスクリーンを簡単に変更しましょう的なお話

Expoを使わない素のReact Nativeでアプリを開発していると避けては通れないXcodeやAndroid Studio。
面倒なのがネイティブ部分のローカライズやアイコンなどのアセット類の管理。
特にアイコンなどのアセット類に関しては入れる画像の数が大量だったりサイズいっぱい用意しないとで面倒だったりするわけで。

ということで今日はそれを簡単に行うためのツールの紹介をば。

expo initで出てくるbare-minimum(react-native-unimodules)のreact-nativeのバージョンをv0.59.8 -> v0.60.4にしたお話

Expoチームが開発してるreact-native-unimodules(bare workflow)というものがあるんだけど、これは素のreact-nativeでExpoのコンポーネントを使えるようにしちゃおう的なパッケージだったり。
で、これの何がすごいってもちろんExpoの便利なコンポーネントを使えるのもそうなんだけど、ExpoKitと違ってreact-nativeのバージョンが自由に使えるということ。
なので最新のreact-nativeもいつでも使える的な。

ということで今日はexpo init -> bare-minimum (react-native-unimodules)したときのプロジェクトを最新版のreact-nativeで使うには的なお話をば。

Expo v34でAndroid 64bitサポートとかiOS13向けとかBare workflowでもExpo Client使えるよ的なお話

Expoがv34にアップデートした。
今回は前回から2ヶ月以内とかなり早めなアップデート。
特にAndroidの64ビットサポートがやっぱメインとなる内容だよね的な。

Expo SDK 34 is now available

ということで今日は変更点的なお話をば。

Expoでprovisioning profileの有効期限が切れてしまったときの対応的なお話

タイトル通りなお話。
通常のXcodeを使っての開発とはまた違ってExpoで開発しているとExpoに証明書関連を任せることができるわけで。
これがまた便利ですごい楽なんだけど、通常の開発と同じく証明書をアップデートする必要があったり。

ってことで今日はExpoで証明書の期限が切れてしまった場合にどうしたらいいのか的なお話をば。