Skip to content

Strip jumping to different years or month on certain devices #388

Description

@kuberdhure

I tested my react native app on different devices , some device will show the month and date properly but on other devices it just randomly skips to other dates eg. feb 2026

Here's my code

<CalendarStrip
              ref={calendarRef}
              scrollable
              // showMonth={false}
              style={{ flex: 1, paddingTop: 10, paddingBottom: 10 }}
              calendarColor={'#3A82F6'}
              calendarHeaderStyle={{
                fontSize: 16,
                fontWeight: 'bold',
                color: 'white',
                textAlign: 'left',
                alignSelf: 'flex-start',
                marginLeft: 10
              }}
              dateNumberStyle={{ color: 'white', fontSize: 12 }}
              dateNameStyle={{ color: 'white', fontSize: 10 }}
              highlightDateNumberStyle={{
                fontSize: 16,
                fontWeight: 'bold',
                color: 'black'
              }}
              highlightDateNameStyle={{
                fontSize: 12,
                fontWeight: 'bold',
                color: 'blue'
              }}
              selectedDate={mode === "single" ? selectedDate : null}
              markedDates={markedDates}
              onDateSelected={(date) => {
                startTransition(() => {
                  if (mode === "range") {
                    setMode("single");
                    setSelectedDate(moment(date));
                    setStartDate(null);
                    setEndDate(null);
                    calendarRef.current.updateWeekView(date);
                  } else {
                    setSelectedDate(moment(date));
                    calendarRef.current.updateWeekView(date);
                  }
                });
              }}
              dayContainerStyle={{ padding: 2, margin: 0 }}
              highlightDateContainerStyle={{
                backgroundColor: 'white',
                borderRadius: 10
              }}
              scrollToOnSetSelectedDate={true}
              scrollerPaging={true}
              customDatesStyles={mode === 'range' ? getCustomDatesStyles : null}
              // startingDate={moment().add(3,"days")}
              // headerText={moment(selectedDate).format("MMMM YYYY")}
              useIsoWeekday={true}
              updateWeek={true}

            />) : null}
          </View>

I am using expo sdk 53

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions