Agenda: Weekdays shift and disappear when opening and closing the keyboard.

[Balint-kodeministeriet]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

When you have a text input field on the same page as Agenda, and you open the keyboard, the weekdays will switch. For example, initially days from 24 to 30 are displayed. When the keyboard opens, days from 3 to 9 will be shown. When you close the keyboard, the number disappear, and a duplicate names of Sun - Sat will be shown.

Expected Behavior

I opened and closed the keyboard. I would expect the weekdays to remain the same.

Observed Behavior

The weekdays shifted and then disappeared.

Environment

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

• npm ls react-native-calendars: `-- [email protected]
• npm ls react-native: +-- [email protected] | -- [email protected] | -- [email protected] deduped -- [email protected] -- @react-native-community/[email protected] `-- [email protected] deduped

Also specify:

1. Device/emulator/simulator & OS version: pixel 5 api 30

Reproducible Demo

/**

• Sample React Native App
• https://github.com/facebook/react-native
• @format
• @flow strict-local */

import React from 'react'; import type {Node} from 'react'; import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native';

import { Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; import { Agenda } from 'react-native-calendars'; import { TextInput } from 'react-native';

const Section = ({children, title}): Node => { const isDarkMode = useColorScheme() === 'dark'; return ( <View style={styles.sectionContainer}> <Text style={[ styles.sectionTitle, { color: isDarkMode ? Colors.white : Colors.black, }, ]}> {title} </Text> <Text style={[ styles.sectionDescription, { color: isDarkMode ? Colors.light : Colors.dark, }, ]}> {children} </Text> </View> ); };

const App: () => Node = () => { const isDarkMode = useColorScheme() === 'dark';

const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, };

return ( <SafeAreaView style={backgroundStyle}> <View style={{ height: '100%' }}> <Agenda // The list of items that have to be displayed in agenda. If you want to render item as empty date // the value of date key has to be an empty array []. If there exists no value for date key it is // considered that the date in question is not yet loaded items={{ '2022-07-22': [{name: 'item 1 - any js object'}], '2022-07-23': [{name: 'item 2 - any js object', height: 80}], '2022-07-24': [], '2022-07-25': [{name: 'item 3 - any js object'}, {name: 'any js object'}] }} // Callback that gets called when items for a certain month should be loaded (month became visible) loadItemsForMonth={month => { console.log('trigger items loading'); }} // Callback that fires when the calendar is opened or closed onCalendarToggled={calendarOpened => { console.log(calendarOpened); }} // Callback that gets called on day press onDayPress={day => { console.log('day pressed'); }} // Callback that gets called when day changes while scrolling agenda list onDayChange={day => { console.log('day changed'); }} // Initially selected day selected={'2022-07-30'} // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined minDate={'2022-07-01'} // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined maxDate={'2022-08-30'} // Max amount of months allowed to scroll to the past. Default = 50 pastScrollRange={50} // Max amount of months allowed to scroll to the future. Default = 50 futureScrollRange={50} // Specify how each item should be rendered in agenda renderItem={(item, firstItemInDay) => { return <View />; }} // Specify how each date should be rendered. day can be undefined if the item is not first in that day renderDay={(day, item) => { return <View />; }} // Specify how empty date content with no items should be rendered renderEmptyDate={() => { return <View />; }} // Specify how agenda knob should look like renderKnob={() => { return <View />; }} // Specify what should be rendered instead of ActivityIndicator renderEmptyData={() => { return <View />; }} // Specify your item comparison function for increased performance rowHasChanged={(r1, r2) => { return r1.text !== r2.text; }} // Hide knob button. Default = false hideKnob={true} // When true and hideKnob prop is false, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false showClosingKnob={false} // By default, agenda dates are marked if they have at least one item, but you can override this if needed markedDates={{ '2022-07-16': {selected: true, marked: true}, '2022-07-17': {marked: true}, '2022-07-18': {disabled: true} }} // If disabledByDefault={true} dates flagged as not disabled will be enabled. Default = false disabledByDefault={true} // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly onRefresh={() => console.log('refreshing...')} // Set this true while waiting for new data from a refresh refreshing={false} // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView refreshControl={null} // Agenda theme theme={{ agendaDayTextColor: 'yellow', agendaDayNumColor: 'green', agendaTodayColor: 'red', agendaKnobColor: 'blue' }} // Agenda container style style={{ }} /> <TextInput style={{width: 150, height: 36, paddingLeft: 10}} onChangeText={(text) => {}} value={'text input'} /> </View>
</SafeAreaView> ); };

const styles = StyleSheet.create({ sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', }, highlight: { fontWeight: '700', }, });

export default App;

Screenshots

Screenshots or gifs of the issue and the suggested fix will help us move faster with the review process.

[dogankablan]

I have the same problem. Did you find a solution?

[askynet]

any workaround for this?

[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.

[khushboo-vs]

Still facing this issue on RN 0.68