React-native-calendars: Horizontal scroll in Calendarlist calendarWidth

[Jeeva111]

Horizontal scroll in Calendarlist but not properly render when i'm set calendarWidth
// Enable horizontal scrolling, default = false
horizontal={true}
// Enable paging on horizontal, default = false
pagingEnabled={true}
// Set custom calendarWidth.
calendarWidth={300} <= Not rendering properly
/>

[damikdk]

try to add style prop:

<CalendarList
  style={{
    width,
    overflow: 'hidden',
  }}
  horizontal={true}
  pagingEnabled={true}
  calendarWidth={width}
/>

[Jeeva111]

Works Good but i want to display like this

Calendar only!

[damikdk]

Oh, I got it. You want to centred month with paging, but paging or centering doesn't work? Can you give more information (GIF would be nice)

btw, I'm not a contributor in this project, but my experience tells me that if you want exactly the same design (with swipe gestures and fancy animations for both Android/iOS), there is some issues.

[Jeeva111]

Everything works good i want that design means center aligned calendar previous and next months exactly red marked area

Original Gif

[kubanac95]

@Jeeva111 have you managed to accomplish this? I have a similar issue I want to tackle. I need to find a way to sync months header with the calendar swipe