Calendar slides out of view when used in Modal

[zoraomio]

Current behaviour

When Calendar is placed inside a react-native Modal, sometimes when opened, the content of the modal initially slides out of the viewport.

Expected behaviour

Content always stays inside the viewport.

Code sample

I made a snack but strangely enough it's not reproducible there. It does happen on a simulated and real device though, and not just on my own machine.
Here's how I could reproduce it the simplest way:

1. New expo app: npx create-expo-app my-app && cd my-app
2. npm i react-native-calendario
3. This code in App.js:

import { useState } from 'react';
import { Text, Modal, SafeAreaView, TouchableOpacity } from 'react-native';
import { Calendar } from 'react-native-calendario';

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <SafeAreaView>
      <TouchableOpacity onPress={() => setVisible(true)}>
        <Text>Open</Text>
      </TouchableOpacity>
      <Modal
        visible={visible}
        animationType="slide"
        onRequestClose={() => setVisible(false)}
      >
        <SafeAreaView>
          <TouchableOpacity onPress={() => setVisible(false)}>
            <Text>Close</Text>
          </TouchableOpacity>
          <Calendar />
        </SafeAreaView>
      </Modal>
    </SafeAreaView>
  );
}

4. npm run ios

(the bug only happens every few tries)

Screenshots

simulator.mp4

What have you tried

I have noticed that the issue stops when numberOfMonths is smaller than 4.

Your Environment

Click To Expand

react-native info output:

System:
    OS: macOS 13.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 594.01 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.8 => 0.71.8 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[maggialejandro]

Hi @zoraomio !
are you using the monthHeight prop?

[zoraomio]

Nope, as the code is in the example, this happens without any props passed at all

[maggialejandro]

Could you try initialListSize={4} please?

[zoraomio]

That fixes it but also makes it a bit slower to open. Btw, we ended up solving this using the SafeAreaView from react-native-safe-area-context

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.