【React Native】外部サイトをブラウザで開く

今後も多用すると思うので、備忘録としてまとめ。
タイトル通り、React Native で外部サイトをブラウザで開く方法についてです。

参考にさせていただいた記事はこちらから。

React Nativeで外部リンクをブラウザで開く – Qiita
https://qiita.com/Horie1024/items/3f672e04720bbc043760

React Native の公式ドキュメントはこちらです。

Linking · React Native
https://reactnative.dev/docs/linking

さて実装方法ですが、サンプルコードは下記のとおりです。

import { Alert, Linking } from 'react-native';

async openUrl(url) {
  const supported = await Linking.canOpenURL(url);
  if (supported) {
    await Linking.openURL(url);
  } else {
    Alert.alert(
      "エラー",
      "このページを開ませんでした",
      [{ text: "OK", onPress: () => console.log("OK Pressed") }],
      { cancelable: false }
    );
  }
}

関数化しているので、Button などの onPress でこちらを呼び出せばOKです。

2 行目の Linking.canOpenURL() で開こうとしている URL が有効かどうかを判定しています。
で、問題がなければ、4 行目の Linking.openURL() でブラウザでページを開きます。
もし、URL が有効でなければ、Alert でメッセージを表示しています。

処理としては以上です！
てっきり、Cordova＋React アプリの時のように、プラグインを導入する必要があるのかと思っていたのですが、既に標準であったので実装はとても簡単でした！

以上、React Native で外部サイトをブラウザで開く方法についてでした。
ご参考になれば幸いです。