Day display label showing with only one digit

[bMoki]

One of the users of the app I'm developing is facing a weird bug, that I could not reproduce.

The day.displayLabel is showing only one digit, see the image below.

Does anyone know what is possibly happening or can reproduce it? I'm using the useCalendar hook to render a custom calendar with NativeBase.

This is my component

const DAY_HEIGHT = 40;
const MONTH_HEADER_HEIGHT = 45;
const MONTH_HEADER_MARGIN_BOTTOM = 8;
const WEEK_DAYS_HEIGHT = 30;

const styles = StyleSheet.create({
  calendarContainer: {
    backgroundColor: "white",
    paddingBottom: 6
  },
  sheetContainer: {
    marginHorizontal: 24,
  },
});

interface CalendarProps extends FlashCalendarProps {
  onPreviousMonthPress: () => void;
  onNextMonthPress: () => void;
  sectionEvents: Section<EventCalendar>[];
  selectedDay: string;
}
export const Calendar = memo((props: CalendarProps) => {
  const { colors } = useTheme()
  const calendarTheme: CalendarTheme = {
    rowMonth: {
      container: {
        backgroundColor: colors.primary[900],
        height: MONTH_HEADER_HEIGHT,
        borderRadius: 8,
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 12,
        },
        shadowOpacity: 0.58,
        shadowRadius: 16.00,

        elevation: 24,
      },
      content: {
        color: colors.gray[50],
        fontSize: 17,
        width: 200,
        textAlign: "center",
      },
    },
    itemWeekName: { content: { color: colors.primary[900] } },
    itemDay: {
      base: () => ({
        container: {
          padding: 0,
          borderRadius: 12,
        },
      }),
      today: () => ({
        container: {
          borderWidth: 2,
          borderColor: colors.orange[500],
        },
      }),
      idle: ({ isDifferentMonth }) => ({
        content: isDifferentMonth
          ? {
            opacity: 0.3
          }
          : undefined,
      }),
      active: ({ isToday }) => ({
        container: {
          backgroundColor: colors.primary[50],
          borderTopLeftRadius: 12,
          borderTopRightRadius: 12,
          borderBottomLeftRadius: 12,
          borderBottomRightRadius: 12,
          borderWidth: isToday ? 2 : 0,
          borderColor: colors.orange[500]
        },
        content: {
          color: colors.gray[900],
        },
      }),
    },
  };

  const { calendarRowMonth, weekDaysList, weeksList } = useCalendar(props);

  const bottomSheetRef = useRef<BottomSheetRef>(null);
  const snapPoints = useMemo(
    () => [MONTH_HEADER_HEIGHT + MONTH_HEADER_MARGIN_BOTTOM, '45%'], []
  )
  const handleOpen = () => bottomSheetRef.current?.expand();

  const updateEventMetadata = (day: CalendarDayMetadata) => {
    if (toDateId(day.date) === props.selectedDay) {
      const dayMetadata: CalendarDayMetadata = {
        ...day,
        state: 'active'
      }
      return dayMetadata
    }
    return day
  }

  return (
    <BottomSheet
      enableOverDrag={false}
      handleComponent={() => <FlashCalendar.HStack
        alignItems="center"
        justifyContent="space-around"
        style={calendarTheme.rowMonth?.container}
        width="100%"
      >
        <ChevronButton onPress={props.onPreviousMonthPress} type="left" />
        <Pressable onPress={handleOpen} style={{ height: '100%', justifyContent: 'center' }}>
          <Text style={calendarTheme.rowMonth?.content}>
            {capitalizeFirstLetter(calendarRowMonth)}
          </Text>
        </Pressable>
        <ChevronButton onPress={props.onNextMonthPress} type="right" />

      </FlashCalendar.HStack>
      }
      snapPoints={snapPoints}
      ref={bottomSheetRef}
      index={0}
      style={styles.sheetContainer}
    >
      <BottomSheetView
        style={{ flex: 1, marginTop: 16, borderRadius: 12 }}>
        <FlashCalendar.Row.Week spacing={4}>
          {weekDaysList.map((day, i) => (
            <FlashCalendar.Item.WeekName
              height={WEEK_DAYS_HEIGHT}
              key={i}
              theme={calendarTheme.itemWeekName}
            >
              {day}
            </FlashCalendar.Item.WeekName>
          ))}
        </FlashCalendar.Row.Week>

        {weeksList.map((week, i) => (
          <FlashCalendar.Row.Week key={i}>
            {week.map((day) => (
              <FlashCalendar.Item.Day.Container
                dayHeight={DAY_HEIGHT}
                daySpacing={4}
                isStartOfWeek={day.isStartOfWeek}
                key={day.id}
              >
                <FlashCalendar.Item.Day
                  height={DAY_HEIGHT}
                  metadata={updateEventMetadata(day)}
                  onPress={props.onCalendarDayPress}
                  theme={calendarTheme.itemDay}
                >
                  {day.displayLabel}

                </FlashCalendar.Item.Day>
              </FlashCalendar.Item.Day.Container>
            ))}
          </FlashCalendar.Row.Week>
        ))}
      </BottomSheetView>
    </BottomSheet>

  );
}); 

And this is me calling it.

<Calendar
        sectionEvents={sectionEvents}
        calendarMonthId={toDateId(currentCalendarMonth)}
        getCalendarWeekDayFormat={format("EEEEEE")}
        onCalendarDayPress={handleDayPress}
        onNextMonthPress={handleNextMonth}
        onPreviousMonthPress={handlePreviousMonth}
        calendarFormatLocale="pt-BR"
        selectedDay={selectedDay}
        calendarColorScheme={'light'}
      />

Below is the information about the system.

Observations

• Some names of the days of the week are wrong too.
• The dayLabel is centered, thats why I don't think is a style issue.
• I know its a complicated issue to reproduce, I just want some insights of what could be happening.

[MarceloPrado]

Can you try passing a getCalendarDayFormat? I believe it'll help.

[mensonones]

Would you have a reproducible example, @bMoki ?

[bMoki]

Would you have a reproducible example, @bMoki ?

No... I don't :(

I'm just waiting to see if @MarceloPrado suggestion works, when I get a response I'll come back.