Agenda half open in mount, after click on a date, it closes properly.

[Etiolate7]

The agenda seems to be half open in rendering, instead of being close. But once we chose a date, it closes properly to let us see the meeting.

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import React, { Component } from 'react'
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
import { SafeAreaView } from 'react-native-safe-area-context';


export class AgendaScreen extends Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <Agenda
                    items={{
                        '2025-09-24': [{ name: 'Meeting 1', data: 'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. ' }],
                    }}

                    renderItem={(item, isFirst) => (
                        <TouchableOpacity style={styles.item}>
                            <Text style={styles.itemText}>{item.name}</Text>
                            <Text style={styles.itemText}>{item.data}</Text>
                        </TouchableOpacity>
                    )}
                />
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',

    },
    item: {
        backgroundColor: 'lightblue',
        flex: 1,
        borderRadius: 5,
        padding: 10,
        marginRight: 10,
        marginTop: 25,
        paddingBottom: 20
    },
    itemText: {
        color: 'black',
        fontSize: 16,
    },

});


export default AgendaScreen

ScreenRecording_09-24-2025.17-40-17_1.MP4

[Cassianosch]

Same here.

[jhogervorst]

Anyone found a workaround?

[jhogervorst]

I figured out the following (nasty) workaround:

import { Platform } from "react-native";
import { Agenda } from "react-native-calendars";

function MyAgenda() {
	const didResetCalendarPosition = React.useRef(false);
	const resetCalendarPosition = React.useCallback((node) => {
		if (Platform.OS === "ios" && node && !didResetCalendarPosition.current) {
			didResetCalendarPosition.current = true;
			setTimeout(() => node.toggleCalendarPosition(true), 0);
			setTimeout(() => node.toggleCalendarPosition(false), 250);
		}
	});

	return (
		<Agenda
			ref={resetCalendarPosition}
			// ...
		/>
	);
}

[Ozaoujal]

@jhogervorst 's solution works for me
but it flickers on mount