react-native-calendars ExpandableCalendar 在本机反应中不能与 RTL 一起正常工作

Question

I'm trying to use ExpandableCalendar from https://github.com/wix/react-native-calendars

my App set to RTL ReactNative.I18nManager.allowRTL(true); ReactNative.I18nManager.forceRTL(true); ReactNative.I18nManager.allowRTL(true); ReactNative.I18nManager.forceRTL(true);

when the calendar is expanded and I'm trying to change the month it doesn't show new dates of next month or prev month, it's just showing name of the month that different from the header month.

however setting RTL to false fixes the problem. is there some solution without setting RTL to false?

image after changing month by swiping right/left or by clicking on arrows to change month:

Answer 1

This is a known issue with react-native-calendars . It is not able to render the child components (the dates) properly or is just ignoring it when ReactNative.I18nManager.allowRTL(true);.

For now, the temporary solution is to change the flex-direction to row-reverse and rendering the arrows in the opposite direction:

<Calendar theme={'stylesheet.calendar.main': {
                        week: {
                          marginTop: 7,
                          marginBottom: 7,
                          flexDirection: isRTL ? 'row-reverse' : 'row',
                          justifyContent: 'space-around'
                        }
                       },
                  'stylesheet.calendar.header': {
                        header: {
                           flexDirection: isRTL ? 'row-reverse' : 'row',
                          justifyContent: 'space-between',
                          paddingLeft: 10,
                          paddingRight: 10,
                          alignItems: 'center',
                          height: 45
                        },
                        week: {
                          marginTop: 7,
                           flexDirection: isRTL ? 'row-reverse' : 'row',
                          justifyContent: 'space-around'
                        }}
                      }}
            renderArrow={direction => <Icon type="ionicon"
                                            name={direction === 'left'
                                               ? (isRTL ? 'arrow-forward' : 'arrow-back')
                                               : (isRTL ? 'arrow-back' : 'arrow-forward')}
                                               />}
    />