はじめに

現在、勉強の一環でアプリの個人開発に取り組んでいます。
そこでweb用に作った画面をreact-native-webviewというライブラリを使ってアプリ側に表示させようとしたのですが、iOS Simulatorに表示されない、、、という問題に直面したので解決方法を書き留めておきます！

react-native-webviewとは

Chat-GPT大先生によると、

react-native-webviewは、React Nativeアプリケーション内でWebコンテンツを表示するためのコンポーネントを提供するライブラリです。これは公式のReact Nativeプロジェクトの一部であり、WebページやHTMLコンテンツをアプリ内で表示するために使用されます。

らしいです。web側で作った画面を再利用したい！といった場合に便利なライブラリだと思っています。

遭遇したバグとその時のコード

いざ、導入！と思い、expoを起動したところiOS Simulatorに何も表示されませでした。
web側は立ち上がっており、http://localhost:3000/にアクセスすると問題なく画面が表示されます。
その時のコードです↓

App.tsx

export default function App() {
  const WEB_APP_URL = 'http://localhost:3000'
  const webViewRef = useRef(null)
  return (
    <SafeAreaView>
      <WebView
        source={{ uri: WEB_APP_URL }}
        style={{ flex: 1 }}
        ref={webViewRef}
        onLoad={() => console.log('WebView Loaded')}
        onError={(syntheticEvent) => {
          console.warn('WebView error: ', syntheticEvent.nativeEvent)
        }}
      />
    </SafeAreaView>
  )

原因と解決策

SafeAreaViewが問題で、起きていたバグらしいです。
SafeAreaViewにスタイルを設定することで解決できました！↓

App.tsx

export default function App() {
  const WEB_APP_URL = 'http://localhost:3000'
  const webViewRef = useRef(null)
  return (
    <SafeAreaView style={{ flex: 1 }}>> // styleを設定
      <WebView
        source={{ uri: WEB_APP_URL }}
        style={{ flex: 1 }}
        ref={webViewRef}
        onLoad={() => console.log('WebView Loaded')}
        onError={(syntheticEvent) => {
          console.warn('WebView error: ', syntheticEvent.nativeEvent)
        }}
      />
    </SafeAreaView>
  )

最後に

他の解決策としてはWebViewをネストしなければ表示されるようです。
stackoverflowで見つけました↓

中々解決策を探せなかったので、この記事が少しでも参考になれば嬉しいです！