Skip to content

ExpandableCalendar component is fully transparent within a production build. #2625

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EnriqueSarmiento opened this issue Mar 26, 2025 · 8 comments

Comments

@EnriqueSarmiento
Copy link

EnriqueSarmiento commented Mar 26, 2025

Hey guys. I am experiencing a very annoying issue with the ExpandableCalendar component. I'm using this library package for a while now and all of the sudden the component is fully transparent on a production build. I'm developing this app with expo ~49.0.15 and react-native-calendars ^1.1307.0. I have tried several approaches to tackle this issue but I haven't found a solution. I've been stuck here for a while.

### DOCUMENTATION
Image

`
<ExpandableCalendar
key={user?.id}
firstDay={1}
theme={{
arrowColor: 'rgba(163, 163, 163, 1)',
arrowHeight: 5,
arrowWidth: 5,
calendarBackground: '#1E1E1E',
dayTextColor: 'rgba(245, 245, 245, 1)',
dotColor: 'rgba(248, 211, 71, 1)',
indicatorColor: 'rgba(248, 211, 71, 1)',
monthTextColor: 'rgba(163, 163, 163, 1)',
selectedDayBackgroundColor: 'rgba(248, 211, 71, 1)',
selectedDayTextColor: 'rgba(23, 23, 23, 1)',
selectedDotColor: 'rgba(23, 23, 23, 1)',
textDayHeaderFontFamily: 'InterMedium',
textDayHeaderFontSize: 12,
textDayHeaderFontWeight: '600',
textMonthFontFamily: 'InterMedium',
textMonthFontSize: 12,
textMonthFontWeight: '600',
textSectionTitleColor: 'rgba(163, 163, 163, 1)',
todayTextColor: 'rgba(248, 211, 71, 1)',
}}
// style={{
// shadowColor: 'transparent',
// }}
futureScrollRange={12}
pastScrollRange={0}
refreshing={false}
/>

`

@tushar8295
Copy link

I encountered the same issue with the latest version of react-native-calendars. After some troubleshooting, I resolved it by downgrading to version 1.1307.0, and everything is now working perfectly. Hope this helps.

@EnriqueSarmiento
Copy link
Author

@tushar8295 Yes it's related to the version. if using useFocusEffect on the same component will crush it. Furthermore, which is more strange is that changing a setState action from false to true while fetching data to render on the expandable calendar will crash as well. I thought that maybe I had a dependency with that state variable but I created a new one that I wasn't using at all and still crashed the expandable component.

@ScopeSV
Copy link

ScopeSV commented Apr 7, 2025

Image

I just upgraded from 1.1305 to 1.1310 and I am experiencing the same issue. The calendar wont load, so it's just a gray box. If I exit the route with the calendar on it, and reenter its rendered correctly.

@bofeiw
Copy link

bofeiw commented Apr 12, 2025

Had the same issue with version 1.1310. Calendar component renders a transparent empty box. Downgrading to 1.1307.0 fixed it. Seems like an issue with that version.

@TM-Baier
Copy link

Still present in 1.1311.0 in dev and release bundle.

1.1309.0 seems to work for me.

@sainjay
Copy link

sainjay commented Apr 21, 2025

yes facing the same in 1.1311.0 for Expandable Calendar

@zkteco-home
Copy link

yes,facing same issue for 1.1310 and 1.1311.1,
1.1309 ok

@vendramini
Copy link

Yep, we can't use useEffect neither useFocusEffect on the same component nor any other component on the sub-tree.

Just tested latest version 1.1311.1 and isn't fixed.

1.1309.1 works well - however, it won't accurately fit my styles (which have been fixed in 1.1310 forward).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants