ExpandableCalendar issue with orientation

Description

The Week Calendar in the Expandable Calendar is having trouble when the orientation is changed. I tried to fix it with stylings but it didn’t seem to affect it. The problem seems to be similar to this one: #606

Expected Behavior

I changed the orientation to landscape

Observed Behavior

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: react-native-calendars@1.1260.0
• npm ls react-native:

* +-- @react-native-clipboard/clipboard@1.7.0
| `-- react-native@0.64.1 deduped
+-- @react-native-community/geolocation@2.0.2
| `-- react-native@0.64.1 deduped
+-- @react-native-community/masked-view@0.1.11
| `-- react-native@0.64.1 deduped
+-- @react-native-picker/picker@1.16.0
| `-- react-native@0.64.1 deduped
+-- @react-navigation/native@5.9.4
| `-- react-native@0.64.1 deduped
+-- @react-navigation/stack@5.14.5
| +-- react-native-iphone-x-helper@1.3.1
| | `-- react-native@0.64.1 deduped
| `-- react-native@0.64.1 deduped
+-- @storybook/addon-ondevice-actions@5.3.23
| `-- react-native@0.64.1 deduped
+-- @storybook/addon-ondevice-knobs@5.3.25
| +-- @emotion/native@10.0.27
| | `-- react-native@0.64.1 deduped
| +-- react-native-modal-datetime-picker@7.6.1
| | `-- react-native-modal@11.10.0
| |   `-- react-native@0.64.1 deduped
| `-- react-native@0.64.1 deduped
+-- @storybook/react-native@5.3.25
| `-- react-native@0.64.1 deduped
+-- react-native-dev-menu@4.0.2
| `-- react-native@0.64.1 deduped
+-- react-native-draggable-flatlist@2.6.2
| `-- react-native@0.64.1 deduped
+-- react-native-elements@3.4.1
| +-- react-native-ratings@7.6.1
| | `-- react-native@0.64.1 deduped
| `-- react-native-size-matters@0.3.1
|   `-- react-native@0.64.1 deduped
+-- react-native-google-places-autocomplete@2.2.0
| `-- react-native@0.64.1 deduped
+-- react-native-keyboard-aware-scroll-view@0.9.4
| `-- react-native@0.64.1 deduped
+-- react-native-linear-gradient@2.5.6
| `-- react-native@0.64.1 deduped
+-- react-native-maps@0.28.0
| `-- react-native@0.64.1 deduped
+-- react-native-pager-view@5.1.8
| `-- react-native@0.64.1 deduped
+-- react-native-reanimated@2.1.0
| `-- react-native@0.64.1 deduped
+-- react-native-safe-area-context@3.2.0
| `-- react-native@0.64.1 deduped
+-- react-native-screens@3.2.0
| `-- react-native@0.64.1 deduped
+-- react-native-swipeable-item@1.5.7
| `-- react-native@0.64.1 deduped invalid
+-- react-native-tab-view@2.16.0
| `-- react-native@0.64.1 deduped
+-- react-native-track-player@1.2.7
| `-- react-native@0.64.1 deduped
+-- react-native-webview@11.4.5
| `-- react-native@0.64.1 deduped
`-- react-native@0.64.1
  `-- @react-native-community/cli@5.0.1-alpha.2
    `-- react-native@0.64.1 deduped

Also specify:

1. Phone/emulator/simulator & version: Pixel 3a API 30 (Android 11)

Reproducible Demo

https://snack.expo.io/@kris_lau/schedule

[hoanganhle1996]

data = useWindowDimensions() Adding key={orientation} to CalendarProvider Adding calendarWidth={data.width} to ExpandableCalendar It works for me

[scblason]

I would add that is not just orientation issues. I have a tablet app with views like list and detail format (list at the left, detail of a selected element at right). I put an expandable calendar as a header of the list and when I expand it, it shows the calendar’s days format as it would be the entire width of the screen. There is a calculation there that assumes that is always shown in the entire width of the device I think, that breaks the component