구성해야 할 마지막 화면인 달력 화면을 완성해봅시다. 달력 화면을 만드는 과정에서 react-native-calendars라는 라이브러리를 사용합니다. 이 라이브러리를 설치해주세요.

$ yarn add react-native-calendars

라이브러리를 설치한 다음에는 CalendarView라는 컴포넌트를 만듭니다. 이 컴포넌트에서는 방금 설치한 라이브러리를 사용해 달력을 보여주고, 로그가 작성된 날짜를 달력에 표시하도록 구현하겠습니다.

우선 달력이 어떻게 생겼는지부터 확인해볼까요?

components/CalendarView.js

import React from 'react';
import {Calendar} from 'react-native-calendars';
import {StyleSheet} from 'react-native';

function CalendarView() {
  return <Calendar style={styles.calendar} />;
}

const styles = StyleSheet.create({
  calendar: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
});

export default CalendarView;