Agenda's calendar immediately collapses after user toggles it to expand

[magnus80a]

Description: When the calendar is manually expanded using the knob (via toggleCalendarPosition(true)), tapping a date (either directly or via chooseDay(...)) causes the calendar to collapse unexpectedly, even though no collapse was explicitly triggered by the user.

This behavior is not consistent but happens frequently enough to degrade UX.

React Native 0.76.9 react-native-calendar 0.1311.0

Expected Behavior: Expanding the calendar should show the calendar in its expanded state until user collapses it manually or selects a day.

Actual Behavior: The calendar often collapses immediately after tapping knob or a date is selected via onDayPress, chooseDay, or scrollToDay.

Steps to Reproduce: 1. Render an <Agenda /> with showClosingKnob={true} 2. Tap the knob to expand the calendar 3. Observe the calendar collapsing on Android without user intent

Attempted Workarounds: • Guarding setScrollPadPosition with a timestamp + direction tracking (lastUserToggleTimestamp, lastUserToggledOpenRef) • Debouncing unintended scrolls • Blocking optimistic collapse paths in chooseDay and onSnapAfterDrag • Despite these, the calendar still often collapses when selecting a date.

Additional observations: • This only happens on Android. • We did not experience this when running React Native 0.75.4 and react-native-calendar 0.1308.0 • Async scroll dispatch from ReservationList or AgendaList triggering internal collapse logic • chooseDay calls triggering a scroll that is interpreted as user input • I cannot reproduce this in a very simple version of our code which first made me suspect the error was on our end. However, by adding just a slight level of complexity into the view returned in Agenda prop renderItem will make the collapse start happening. It suggests there's some timing issue at work here.

[magnus80a]

I detected that I can also trigger this for iOS by setting a header using

import { createNativeStackNavigator } from '@react-navigation/native-stack'
const OverviewStack = createNativeStackNavigator()

export function Navigator() {
    const insets = useSafeAreaInsets()
    const { week, month, year } = useAppSelector<OverviewState>(state => state.overview)
    return (
        <OverviewStack.Navigator initialRouteName="OverviewRoot">
            <OverviewStack.Screen
                name="Calendar"
                component={Calendar}
                options={{
                    header: () => <Header insets={insets} week={week} month={month} year={year} />, // Setting header this way triggers error on iOS!
                    headerStyle: headerStyle,
                    headerTitleStyle: headerTitleStyle,
                }}
            />
        </OverviewStack.Navigator>
    )
}

[stale[bot]]

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.