Allow customization of CalendarList loading placeholder

[jeferson-sb]

Description

Whenever you have CalendarList loading there is a quick flash of a <Text> showing for each of the months (calendars) being rendered. But looking into the props there were no options to either replace the text or change its string.

I found out to be this guy:

react-native-calendars/src/calendar-list/item.tsx

Lines 84 to 88 in da9b1bd

	if (!visible) {
	return (
	<Text style={textStyle}>{dateString}</Text>
	);
	}

And the styles:

react-native-calendars/src/calendar-list/style.ts

Lines 14 to 23 in da9b1bd

	placeholder: {
	backgroundColor: appStyle.calendarBackground,
	alignItems: 'center',
	justifyContent: 'center'
	},
	placeholderText: {
	fontSize: 20,
	fontWeight: '200',
	color: appStyle.dayTextColor
	},

Expected Behavior

I expect to be able to at least change the style of the placeholder text.

Observed Behavior

See example below:

Pay attention to the 2024-05-01 text showing in the place of the calendar

Screen.Recording.2024-05-01.at.17.54.00.mov

Code:

import React from 'react';
import {CalendarList} from 'react-native-calendars';

export const MyCalendar = () => {
  return (
    <CalendarList
      showScrollIndicator
      pastScrollRange={5}
      futureScrollRange={5}
    />
  );
};

[sifthedog]

I would also like this to be implemented. I can submit a PR

[jeferson-sb]

I was able to circumvent this for now changing the theme with:

const calendarTheme = {
  'stylesheet.calendar-list.main': {
    placeholder: {
       // wrapper styles
    },
    placeholderText: {
      // text styles
    },
  },
};

export default calendarTheme;