BugiDev / BugiDev/react-native-calendar-strip
Calendar Jumping due to scrollable attribute
- 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
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