前置き

iOSではATS(App Transport Security)で許可されていない httpリソースにはアクセスできない仕組みになっており、 React Nativeでもそれは変わりません。

自身が管理しているドメインであればhttpsにする、または 特定の限られたhttpリソース(かつ信頼できる)であればATSを許可する、 などやり方はありますが、 今回不特定のhttpリソースにアクセスする方法を実現したかったのでちょっと調べました。

環境はReact Native 0.44、iOSでの利用を想定してます。

方法

WebViewonErrorというpropsを渡すことで、 ネットワークに繋がっていないなどのエラー時に任意の関数を呼べます。

関数の引数としてエラー情報が入ったProxyオブジェクトが返ってくるので、 それを使って外部ブラウザで開いたりすると良さそうです。

おわりに

外部ブラウザで開きたくないという場合は、 今回試してはいないですが naoufal/react-native-safari-view も使えそうです(しばらく更新されていないのは気がかりですが)。