그다음에는 SafeAreaView도 불러와서 App을 감싸주세요. SafeAreaView는 언제나 SafeAreaProvider 내부에 위치해야 합니다.

App.js

import React from 'react';
import {StyleSheet} from 'react-native';
import DateHead from './components/DateHead';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';

function App() {
  const today = new Date();

  return (
    <SafeAreaProvider>
    <SafeAreaView>
        <DateHead date={today} />
    </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({});

export default App;

참고로 지금은 App 컴포넌트에서 SafeAreaProvider와 SafeAreaView를 둘 다 사용하고 있지만, 나중에 여러 화면을 다루는 앱을 만들 때는 SafeAreaProvider를 App 컴포넌트 JSX의 가장 바깥 부분에서 딱 한 번만 사용하고, 다른 화면에서는 SafeAreaView 컴포넌트 하나만 사용하면 됩니다. 해당 예시는 추후 다뤄보겠습니다.