search

BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
933 stars 325 forks source link

Calendar Jumping due to scrollable attribute #321

Open KristoferKwan opened 2 years ago

KristoferKwan commented 2 years ago

As the title suggests, setting scrollable to true causes the calendar to jump when certain calendar dates are chosen (ie, if I choose anything under February 10th, 2021, I am jumped to October 2021 on the calendar strip). I am additionally thrown the following error by my compiler:

 WARN  scrollTo was called before RecyclerListView was measured, please wait for the mount to finish
CalendarScroller@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:196534:36
RCTView
RCTView
RCTView
RCTView
CalendarStrip@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:194789:36
RCTView
RCTView
RCTScrollView
ScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:71990:36
ScrollView
KeyboardAwareScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:174150:38
RCTView
SafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:81854:41
Content@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:173951:22
Styled(Content)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:127974:40
RCTView
Container@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:172740:22
Styled(Container)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:127974:40
Recordings
StaticContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:113256:17
EnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:111768:24
SceneView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:113140:22
RCTView
RCTView
RCTView
CardSheet@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:126534:23
RCTView
AnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:68940:24
AnimatedComponentWrapper
PanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:119074:38
PanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:118169:34
RCTView
AnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:68940:24
AnimatedComponentWrapper
RCTView
Card@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:124115:36
CardContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:123783:22
RCTView
MaybeScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:122583:24
RCTView
MaybeScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:122552:23
CardStack@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:121709:36
KeyboardManager@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:126711:36
SafeAreaProviderCompat@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:127173:24
GestureHandlerRootView
GestureHandlerRootView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:118598:24
StackView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:117667:36
StackNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:117539:32
RootNavigator
EnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:111768:24
BaseNavigationContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:111399:28
ThemeProvider@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:115886:21
NavigationContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:115790:26
Navigation@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:109620:27
RNCSafeAreaProvider
SafeAreaProvider@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:109369:24
App
RCTView
RCTView
AppContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.meercon&modulesOnly=false&runModule=true:76713:36

When I remove scrollable as an attribute, the error goes away (although I can no longer scroll). I'm thinking that this is a race condition issue due to the above error. Is it possible for me to workaround this bug while still having scrollable functionality on the calendar strip?

My calendar settings: 

        <CalendarStrip
                scrollable
                style={{ height:100, paddingTop: 20, paddingBottom: 10, borderColor: grey, borderBottomWidth: 1, borderTopWidth: 1}}
                calendarHeaderStyle={{color: grey}}
                calendarColor="#FFFCFC"
                daySelectionAnimation={{type: 'border', duration: 200, borderWidth: 1, borderHighlightColor: 'white', animProperty: undefined, animSpringDamping: undefined, animUpdateType: undefined, animType: undefined}}
                dateNumberStyle={{color: grey}}
                dateNameStyle={{color: grey}}
                iconContainer={{flex: 0.1}}
                highlightDateNumberStyle={{color: '#4ABAB6'}}
                highlightDateNameStyle={{color: '#4ABAB6'}}
                onDateSelected={(date) => {storeDate(date)}}
                selectedDate={date}
                datesWhitelist={[{start: moment("2021-01-01"), end: moment()}]}

              />
adamsolomon1986 commented 2 years ago

+1

gagansaini1212 commented 2 years ago

I am facing the same issue. While added scrollable prop dates are jumping. Does it have any solution?

jasonwiener commented 2 years ago

I had the same issue too. It appears that within the Scroller.js file there is logic that tried to override the scrolling in cases the selected day or marked days are used. I'm using v2.2.5 and it is on line 96-98. Commenting this out works around the issue. Not ideal, but done > perfect.

    if (selectedDate !== prevProps.renderDayParams.selectedDate) {
      this.scrollToDate(selectedDate);
    }