【react-native】スマホアプリの画面実装時に画面が見切れてしまう

こんにちは投資ロウトです。

背景

react-nativeで画面を実装時、Androidは問題なく表示されているが、iOSだけ画面が見切れてしまうという事象が発生している

解決方法

以下のようにコンポーネントをラップすると、iOSでの見切れる事象が解決した。
セーフエリアを設けていなかったのが要因でした。

import { SafeAreaView } from 'react-native';

const xxx = () => {
  return (
   // ラップする
　　　　　　　<SafeAreaView>
　　　　　　　　{表示したいコンポーネント}
    </SafeAreaView>
　　　　)
}