Calendar strip is cut when using scrollable props

[kurniawanw0194]

The calendar strip is only displaying 6 days (should be 7 days), and it cuts the 7th day.

[peacechen]

What device and resolution are you testing on?

[kurniawanw0194]

What device and resolution are you testing on?

I tried on both iPhone 11 and iPhone 11 Pro Max. Both of them render cut calendar strip.

[peacechen]

The issue was that the responsive day sizing wasn't properly taking into account the left & right selectors. The optimal way to handle that is to move onLayout to the inner view containing only the dates.

Please test this on master before a new version is published by pointing to this repo directly in the package.json

  "dependencies": {
    "react-native-calendar-strip": "https://github.com/BugiDev/react-native-calendar-strip",
    ...
  }

Note that on very wide screens (tablets or landscape mode on larger phones), more than 7 days can appear in the strip. The maxDayComponentSize prop restricts how large the dates can become to prevent hilariously large dates from rendering. If you'd like them to be very large, increase the value to ~200.

[dl-husky73]

I am having the same issue, tried the above dependency change and rebuilt. No change on my Android Motorolla Moto G6. But on another note, wow do I love the Scrollable! It is awesome. GREAT WORK!

[peacechen]

Thanks for the props @dl-husky73

Did you run npm install after pointing package.json directly to this repo? I tested the fix on an Android simulator.

If that still doesn't fix it, please post your <CalendarStrip> code snippet and the container dimensions you're using.

[dl-husky73]

Well deserved Props!

I just did an npm install and rebuilt. The font is clearly smaller, spacing between is still wider than it was. I see a little bit of the 7th day. My snippet is pretty standard, almost straight from the demo. I use the calendar strip to update a flatlist below with date components. Really love it.

        <View style={{ flex: 1, backgroundColor: "#f4f1de" }}>

          <CalendarStrip
            scrollable={true}
            style={{ height: 125, paddingTop: 10, paddingBottom: 15 }}
            selectedDate={gDate}
            markedDates={gMarkedDates}
            minDate={gMinDate}
            maxDate={gMaxDate}
            customDatesStyles={gCurrentDate}
            calendarAnimation={{ type: 'sequence', duration: 30, useNativeDriver: true }}
            daySelectionAnimation={{
              type: "background",
              duration: 200,
              highlightColor: "#B7E9F7",
            }}
            onDateSelected={loadItems}
          />

[peacechen]

This may be due to pixel density (dpi) differences between devices. I pushed a change to master that attempts to account for that. Please run npm install again and test for improvement.

[dl-husky73]

I hope I am doing this right. I deleted the directory from node_modules, did npm install, cleared android cache. Did a build, I think the font is slightly bigger, but unfortunately same issue. It feels like the spacing is what has changed.

[peacechen]

I tested with 240 & 320 dpi on the simulator and am getting 7 days in the strip. There's a chance that the bundler is still caching the old files. Here are steps to clear out everything: https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d

To further debug this, would you open the element inspector and find the sizes of the strip container (the one housing the days, without the left/right selectors) as well as a day container?

[dl-husky73]

Interesting. I cleared cache following above, rebuilt everything. My team member also did an iOS build on a separate machine, Mac. We both had the same result. I changed the calendarheaderformat and noticed the starting date is Sunday, but calendar starts at Monday. Is that the issue? Here is a screen grab...

[peacechen]

I ran the sample app in the example folder on a physical device and saw the issue. Unlike the simulator, the physical device fires onLayout multiple times with different values each time as it successively composes the screen. The scroller was only using the first size and didn't update to new values. Hope this latest fix squashes the bug.

[dl-husky73]

Interesting. I updated to the latest & retested. On Android Moto g6 the issue persists. Almost showing but the spacing is still too wide, much like above except font is smaller. On iPhone something really weird is happening (iPhone 11). The scrollable is re-rendering several times until it finally stops with 7 days on screen but no longer scrollable and no greater than/less than to move by pressing. So on iphone, multiple renders (dizzying) until it stops and nothing works. Hope that feedback helps.

[peacechen]

That's really strange that the Moto G6 isn't rendering all the days. Run the app in debug mode and inspect the week dates container and day container sizes. Something is being mis-reported on that device, and until we know those sizes, it's a guessing game.

The iPhone 11 re-rendering is concerning. It sounds like onLayout fires multiple times which causes CalendarStrip to responsively resize, which causes more onLayout's to fire. The scrolling not working is also quite bizarre. I'll have to find a physical device to test on to understand the behavior.

[peacechen]

@dl-husky73 I tested the example app on a physical iOS device and don't see the resize thrashing. It fires onLayout twice with the same values. Please test the sample app on your iOS and Android devices to confirm.

Your app's layout is certainly more complex than the example app. Please create Snack with minimal code to reproduce the behavior.

[peacechen]

2.0.2 has been published which debounces onLayout. Does it improve the resize thrashing on iOS for your app?

[peacechen]

The code related to this has been updated and may have changed the underlying cause or behavior since this issue was opened. If you have more information directly related to this, please re-open. Alternatively, open a new issue.