[React Native] react-native-calendars 사용

react-native-calendars 사용

리액트 네이티브로 캘린더를 구현하는 역할을 맡아 라이브러리를 찾아보던 중 react-native-calendars 라는 라이브러리가 가장 많이 사용되고 있었고, 다양한 기능이 있는 것 같아 사용하여보기로 하였다.

npm i raect-native-calendars

속성이 되게 많았었는데 일단 간단히 작동되는 정도로만 구현하기로 하고 다음과 같이 코드를 작성하였다.

Calendar

<Calendar
	style={styles.calendar}
  	// 캘린더 내 스타일 수정
	theme={{
		todayTextColor: 'black',
		textDayFontSize: 20,
		textDayFontWeight: 'bold',
		textMonthFontSize: 20,
		textMonthFontWeight: 'bold',
		textSectionTitleColor: 'rgba(138, 138, 138, 1)',
	}}
  	// 날짜 클릭 시 그 날짜 출력
	onDayPress={(day) => {console.log(day)}}
  	// 이전 달, 다음 달 날짜 숨기기
	hideExtraDays={true}
  	// 달 포맷 지정
	monthFormat={'M월'}
  	// 달이 바뀔 때 바뀐 달 출력
	onMonthChange={(month) => {console.log(month)}}
  	// 달 이동 화살표 구현 왼쪽이면 왼쪽 화살표 이미지, 아니면 오른쪽 화살표 이미지
	renderArrow={(direction) => direction === "left" ?
	<Image name="left" size={20} source={left}/> : <Image name="right" size={20} source={right} />}
/>

StyleSheet

const styles = StyleSheet.create({
  calendar: {
    paddingBottom: 30,
    borderWidth: 1,
    borderColor: '#E9E9E9',
    borderRadius: 20
  }
});

이렇게 코드를 작성하여 깔끔한 캘린더를 구현해볼 수 있었다.