-
Notifications
You must be signed in to change notification settings - Fork 27
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
Bug: ref scrollToDate sometimes scroll past the desired date #18
Comments
We faced this issue with I am sharing the some details from our bug investigation done on Code to reproduceimport {
Calendar,
CalendarListRef,
toDateId,
} from '@marceloterreiro/flash-calendar';
import {addWeeks, endOfWeek, startOfWeek} from 'date-fns';
import React, {useCallback, useRef, useState} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
const today = toDateId(new Date());
const getWeekStartOrEnd = (dateId: string, weekEnd?: boolean): string => {
const weekCalculator = weekEnd ? endOfWeek : startOfWeek;
return toDateId(
weekCalculator(dateId, {
weekStartsOn: 1,
}),
);
};
export function BasicCalendarList() {
const [selectedDate, setSelectedDate] = useState<string>(today);
const [weekStart, setWeekStart] = useState<string>(getWeekStartOrEnd(today));
const [weekEnd, setWeekEnd] = useState<string>(
getWeekStartOrEnd(today, true),
);
const ref = useRef<CalendarListRef>(null);
const onDateChange = useCallback((dateId: string) => {
setSelectedDate(dateId);
setWeekStart(getWeekStartOrEnd(dateId));
setWeekEnd(getWeekStartOrEnd(dateId, true));
}, []);
return (
<SafeAreaView
style={{
flex: 1,
gap: 20,
backgroundColor: 'white',
}}>
<Text style={{textAlign: 'center', fontWeight: 'bold'}}>
Selected date: {selectedDate}
</Text>
<Calendar.List
calendarActiveDateRanges={[
{
startId: weekStart,
endId: weekEnd,
},
]}
calendarFirstDayOfWeek="monday"
calendarInitialMonthId={selectedDate}
calendarMinDateId={'2023-02-27'}
onCalendarDayPress={onDateChange}
ref={ref}
/>
<View style={{flexDirection: 'row', gap: 20, justifyContent: 'center'}}>
<TouchableOpacity
onPress={() => {
const previousWeek = addWeeks(selectedDate, -1);
onDateChange(toDateId(previousWeek));
ref?.current?.scrollToDate(previousWeek, true);
}}
style={{backgroundColor: '#DCB3E3', padding: 5, borderRadius: 5}}>
<Text>Previous</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
onDateChange(toDateId(new Date()));
ref?.current?.scrollToDate(new Date(), true);
}}
style={{backgroundColor: '#DCB3E3', padding: 5, borderRadius: 5}}>
<Text>Today</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
const nextWeek = addWeeks(selectedDate, 1);
onDateChange(toDateId(nextWeek));
ref?.current?.scrollToDate(nextWeek, true);
}}
style={{backgroundColor: '#DCB3E3', padding: 5, borderRadius: 5}}>
<Text>Next</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
} Incorrect Scrolling Behavior seen on
|
Thanks for the help! Turns out #19 (v0.0.7) also fixed this issue 🙂 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
TODO: add better issue description
The text was updated successfully, but these errors were encountered: