BugiDev / BugiDev/react-native-calendar-strip

Calendar Jumping due to scrollable attribute

Open
#321 3 comments 5 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
976
Forks
336
PR merge metrics
No merged PRs in 30d

Description

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:
```
{storeDate(date)}}
selectedDate={date}
datesWhitelist={[{start: moment("2021-01-01"), end: moment()}]}

/>
```

Contributor guide

Open the contributing guide

Research direction

Reproduce on Android with CalendarStrip using the scrollable prop, selectedDate, datesWhitelist, and the reported date range. Start at the CalendarStrip and CalendarScroller entry points and trace the warning about scrollTo before RecyclerListView measurement; done means selecting dates no longer jumps to the wrong month, the warning is gone, and scrolling still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.