이 컴포넌트에서는 block 스타일에 flex: 1을 설정해 자신이 차지할 수 있는 영역을 모두 차지하도록 했습니다. 그리고 alignItems와 justifyContent 값을 모두 center로 설정했는데, 이렇게 하면 내용이 중앙에 위치합니다. description 스타일에는 폰트 크기와 색상을 설정했습니다.

컴포넌트 코드를 다 작성했으면 App.js 파일을 열어 Empty 컴포넌트를 DateHead와 AddTodo 사이에 사용하세요.

지금 단계에서는 아직 Empty 컴포넌트가 보이지 않을 것입니다. 추가로 해줘야 하는 작업이 있습니다. SafeAreaView 컴포넌트에도 StyleSheet로 flex: 1 스타일을 적용해야 합니다.

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';
import AddTodo from './components/AddTodo';
import Empty from './components/Empty';

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

  return (
    <SafeAreaProvider>
      <SafeAreaView edges={['bottom']} style={styles.block}>
        <DateHead date={today} />
        <Empty />
        <AddTodo />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
  },
});

export default App;