Expandable calendar invisible

[OscarBlackbullion]

Hi. I'm having an issue with the ExpandableCalendar component. I am using the latest version (1.1313.0).

For some reason, on initial render of my screen the calendar is invisible. On inspect, I can see that the entire ExpandableCalendar component's opacity is set to 0. If I navigate away from the screen and then back, the calendar appears, so it seems to be an issue on the initial render/layout of the screen.

Here is a reproducible example:

import { format } from 'date-fns/esm';
import { Text, View } from 'react-native';
import { CalendarProvider, ExpandableCalendar } from 'react-native-calendars';
import { DayProps } from 'react-native-calendars/src/calendar/day';
import { FlatList } from 'react-native-gesture-handler';

const DummyScreen = () => {
  const date = format(new Date(), 'yyyy-MM-dd');
  return (
    <CalendarProvider date={date}>
      <ExpandableCalendar
        style={{ opacity: 1 }}
        contentContainerStyle={{ opacity: 1 }}
        dayComponent={renderDayComponent}
        firstDay={1}
      />
      <FlatList
        renderItem={(i) => (
          <View>
            <Text style={{ color: '#ffffff' }}>{i.item}</Text>
          </View>
        )}
        data={[1, 2, 3]}
      />
    </CalendarProvider>
  );
};

function renderDayComponent({ children }: DayProps) {
  return <Text style={{ color: '#ffffff' }}>{children}</Text>;
}

export default DummyScreen;

I have also included some screenshots to demonstrate the issue:

Any ideas why this might be happening?

[NiharR27]

Hey @OscarBlackbullion - check this guy out: https://github.com/wix/react-native-calendars/pull/2653 we were facing the same issue and had to patch it.

[OscarBlackbullion]

Thank you @NiharR27, this resolved the issue!

[luisscruza]

Having the same issue. The dates are not rendering... Could be related? I tried @NiharR27 fix and its not working for me.

[AndreMaz]

@luisscruza did you manage to fix this issue? If so, how?

[luisscruza]

@luisscruza did you manage to fix this issue? If so, how?

Hey! I think the problem was not related to the library itself but other peer dependencies. I had this problem while upgrading Expo SDK from 53 > 54. Apparently, there was an issue with some dependencies with their new auto linking Autolinking SDK4 so I opted out by adding the expo.autolinking.legacy_shallowReactNativeLinking: true in my package.json. This fixed my issues.

My guess is that something is broken in the Flatlist that breaks this component. Didn't dig further.

[Parth4149]

use v1.1307.0