I have been trying to open a modal when the day is pressed on CalendarList on react-native-calendars.
If I remove the CalendarList component, the modal is opening flawlessly.
The CalendarList very slow in rendering and make other components to render slow
Is there any way to fix this issue?
import React, {useEffect, useState} from 'react';import { SafeAreaView, StatusBar, StyleSheet, Text, View, ActivityIndicator, TouchableOpacity,} from 'react-native';import {CalendarList, CalendarProvider, Agenda} from 'react-native-calendars';import {useTheme} from 'react-native-paper';import Filter from '../../../assets/icons/Filter';import LeftArrow from '../../../assets/icons/LeftArrow';import Header from '../../../components/Header';import BookedModal from '../../../components/calendars/BookedModal';import OptionsModal from '../../../components/OptionsModal';import {NavigationProps} from 'react-native-navigation';import moment from 'moment';import {ThemeProps} from '../../../utils/theme';const Calendar = (props: NavigationProps) => { const theme: ThemeProps = useTheme(); const styles = makeStyles(theme); const [selected, setSelected] = useState(moment().format('YYYY-MM-DD')); const [showOptionsModal, setshowOptionsModal] = useState(false); const [showBookedModal, setshowBookedModal] = useState(false); const [loading, setloading] = useState(false); const toggleShowBookedModal = () => setshowBookedModal(!showBookedModal); const toggleShowOptionsModal = () => setshowOptionsModal(!showOptionsModal); const getSelectedDates = () => { return { [moment().format('YYYY-MM-DD')]: { selected: true, disableTouchEvent: true, selectedColor: theme.colors.secondary, selectedTextColor: theme.colors.primary, // selectedColor: '#fff', // selectedTextColor: theme.colors.primary, marked: false, dotColor: theme.colors.primary, }, }; }; const getMarkedDates = () => { const dates = ['2024-05-16', '2024-05-10', '2024-05-20']; let markedDates = {}; dates.map(date => { //@ts-ignore markedDates[date] = { selected: true, disableTouchEvent: true, selectedColor: '#fff', selectedTextColor: theme.colors.primary, marked: true, dotColor: theme.colors.primary, }; }); return markedDates; }; console.log(showBookedModal, 'showBookedModal'); return (<SafeAreaView style={styles.screen}><BookedModal componentId={props.componentId} visible={showBookedModal} onClose={toggleShowBookedModal} /><Header><View style={styles.headerContainer}><View style={styles.row}><LeftArrow /><Text style={styles.headerTitle}>Calendar</Text></View><Filter onPress={toggleShowOptionsModal} /></View></Header><View style={styles.mainContainer}><OptionsModal onClose={toggleShowOptionsModal} options={[ {title: 'All', onPress: () => {}}, {title: 'Bookings', onPress: () => {}}, {title: 'Reminders', onPress: () => {}}, ]} visible={showOptionsModal} /><CalendarList markedDates={{ ...getSelectedDates(), ...getMarkedDates(), }} theme={{ backgroundColor: '#ffffff', textDisabledColor: '#d9e', textMonthfontFamily: theme.fontFamily.semiBold, monthTextColor: theme.colors.primary, textMonthFontSize: 20, todayTextColor: theme.colors.primary, }} dayComponent={({date, state, marking, onPress}) => { const isMarked = marking?.marked || false; return (<TouchableOpacity onPress={onPress} style={[ styles.dayContainer, isMarked && styles.markedDayContainer, ]}><Text style={[styles.dayText, isMarked && styles.markedDayText]}> {date?.day}</Text></TouchableOpacity> ); }} onDayPress={day => { console.log('ONPRESSED'); toggleShowBookedModal(); // setSelected(day.dateString); }} markingType="custom" /></View><StatusBar backgroundColor={theme.colors.primary} /></SafeAreaView> );};export default Calendar;const makeStyles = (theme: ThemeProps) => StyleSheet.create({ screen: { flex: 1, backgroundColor: theme.colors.primary, }, mainContainer: { backgroundColor: '#F9F9F9', height: '100%', }, headerContainer: { flexDirection: 'row', alignItems: 'center', height: '100%', paddingHorizontal: 20, justifyContent: 'space-between', }, headerTitle: { fontFamily: theme.fontFamily.semiBold, fontSize: 18, color: '#fff', }, row: { flexDirection: 'row', gap: 10, }, dayContainer: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center', borderRadius: 20, }, markedDayContainer: { backgroundColor: theme.colors.secondary, // Adjust color for marked day }, dayText: { color: '#000', // Adjust color for regular day fontFamily: theme.fontFamily.semiBold, }, markedDayText: { color: theme.colors.primary, // Adjust color for marked day text }, });
