Skip to content

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

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
magnus80a opened this issue Apr 23, 2025 · 1 comment
Open

Comments

@magnus80a
Copy link

magnus80a commented Apr 23, 2025

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 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
Copy link
Author

magnus80a commented May 5, 2025

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>
    )
}

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

1 participant