【React-Native】ngrok経由でAndroidシミュレータを起動する方法

Question

前提・実現したいこと

表題の通りです。
React-Nativeでyarn Androidを実行し、ローカルからアプリを起動するところまではできています。
ただ、ngrokとなると調べても有益な情報がでてこなく、どうしてよいのかさっぱりわかりません。
そもそもReact-Nativeのポート番号がわかりません。。

試したこと

ngrok http 8081をしてAndroidシミュレータのクロームで開く。

補足情報（FW/ツールのバージョンなど）

ReactNative
Pixel 3a(Android11.0)

追記 2021年8月4日

Androidシュミレータでcommand+Mを押して、Change Bundle LocationでngrokのURLを入れたら上の画像のエラーがでました。

Comments

[hoshi-takanori]

ngrok 詳しくないのですが、Android エミュレータから ngrok を使う目的は何でしょうか？
また、React Native を Chrome で開いても意味ない気が…。

[Hinoarashi.]

コメントありがとうございます。
アプリの仕様でandroidシュミレータからローカルホストに接続できないので、ngrokで外部に公開し、接続したいためです。

[hoshi-takanori]

なるほど。Android Emulator で Ctrl-M または Cmd-M を押して、Change Bundle Location で ngrok の URL を入れてみては。

[Hinoarashi.]

ご回答ありがとうございます。
ngrokでlocalhost:8081のURLを出力し、Change Bundle Locationに打ち込んだら追記画像のエラーがでました。。

[hoshi-takanori]

yarn start して ngrok http 8081 で http://xxxx.ngrok.io という URL が得られたら、Change Bundle Location に xxxx.ngrok.io の部分を入れたら動きましたけど…。

[Hinoarashi.]

http抜けていました！すいません、ありがとうございます！
「なるほど。Android Emulator で Ctrl-M または Cmd-M を押して、Change Bundle Location で ngrok の URL を入れてみては。」
↑をコピペでもいいので回答してもらえると助かります！
そちらをベストアンサーにいたします！
お手数おかけしますが、よろしくお願いします。

Answer 1

yarn start して ngrok http 8081 で http://xxxx.ngrok.io という URL が得られたら、Android Emulator で Ctrl-M または Cmd-M を押して (実機なら振って)、Change Bundle Location に xxxx.ngrok.io の部分を入れると良いでしょう。

Comments

[Hinoarashi.]

本当に助かりました、ありがとうございました！