Can't see month/year and next button in the header

[Mobu34]

Hi team,

First of all, thank you for this lib, it is pretty easy to configure and it works well.

However, I faced an issue with my APK build that I could not see using Expo Go.
I can't see month/year and next button that are into the header :

This is the expected behavior :

I can see this issue when I'm building in dev client and I could fix that passing a style into headerWrapperStyle prop but I'm not it's a good practise.
Did you already get this? What should be the best practise to avoid this ?

I fear to face this again when building for production.

This is my component :

<Modal visible={isVisible}>
      <View
        className={`bg-[#161616] flex-1 pt-4`}
        style={{
          paddingTop:
            Platform.OS === "ios" ? Constants.statusBarHeight + 10 : 10,
        }}
      >
        <RNCalendarPicker
          startFromMonday
          allowRangeSelection={allowRangeSelection}
          onDateChange={onDateChange}
          selectedDayStyle={s.bgColor}
          selectedRangeStartStyle={s.bgColor}
          selectedRangeEndStyle={s.bgColor}
          selectedRangeStyle={s.bgColor}
          textStyle={s.textColor}
          nextTitle="Suivant"
          previousTitle="Précédent"
          selectYearTitle="Sélectionnez une année"
          selectMonthTitle="Sélectionnez un mois en "
          months={[
            "Janvier",
            "Février",
            "Mars",
            "Avril",
            "Mai",
            "Juin",
            "Juillet",
            "Août",
            "Septembre",
            "Octobre",
            "Novembre",
            "Décembre",
          ]}
          weekdays={["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"]}
          minDate={minDate}
          maxDate={maxDate}
          disabledDatesTextStyle={{ color: colors.Neutral_Gray_Gray40 }}
          headerWrapperStyle={{
             width: "100%",
             borderWidth: 1,
             borderColor: "transparent",
          }}
        />

        <View className="px-horizontal mt-10 space-y-4">
          {!!error && (
            <CustomText
              className="text-center"
              color="text-semantic/warning-100"
            >
              {error}
            </CustomText>
          )}
          <Button text="Confirmer" onPress={handleConfirm} />
          <Button text="Annuler" onPress={onCancel} type={ButtonType.Blank} />
        </View>
      </View>
    </Modal>

[TanveerMansuri]

Hi @Mobu34 👋,

Thanks for bringing this up — I faced a similar issue with the header (month/year and nav arrows not rendering properly), especially after building the APK or reloading the application, even though everything looked fine in Expo Go.

✅ Solution:

• I was able to fix it by explicitly applying a proper layout to the headerWrapperStyle prop of CalendarPicker. Here's the snippet that worked for me:

• Explicitly setting width: '100%' in headerWrapperStyle solved it. This ensures the header spans the full screen width and its children (like the month/year title and nav buttons) are laid out correctly without going off-screen.

<CalendarPicker
  ...
  headerWrapperStyle={{
    width: '100%', // 🔑 Key fix to make the header display properly
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between', // Proper spacing between month/year and nav buttons
    // 🔧 You can customize padding or styles here as per your UI needs
  }}
  ...
/>

Let me know if you'd like the full working setup — happy to help! 🙌