Calendar looks blank in RTL mode

[fakhergh]

Hi folks,

I'm working on an application that supports i18n, and I tried to implement calendar-kit. It looks fine on LTR but not on RTL.

Here is screenshot for the issue:

Current used libraries:

"react-native": "0.70.6" "react": "18.1.0" "@shopify/flash-list": "^1.4.1" "react-native-reanimated": "^2.14.4" "@howljs/calendar-kit": "^1.13.1" ....

Anyone can help or suggest a solution for me? thanks.

[fakhergh]

@howljs Thank you for this amazing package. I really like it

and could you please help me to solve this issue?

[howljs]

I’m busy with my work at the company right now ☹️ I’ll try to take the time to write this feature later. Sorry

[fakhergh]

Thank you @howljs for your effort.

[FadiAboMsalam]

am facing the same issue @howljs @fakhergh any update on this ?

[Deblancd]

For me what fixed it was using direction: 'ltr' inside the Timeline style for content and container src/components/Timeline/index.tsx

const styles = StyleSheet.create({ container: { flex: 1, direction: 'ltr' }, content: { flexGrow: 1, direction: 'ltr' }, });

[FadiAboMsalam]

@Deblancd i believe that will work on iOS but not android

[derickdecesare]

Yes I am running into this problem as well on android. It seems to work fine on IOS but the schedule does not render properly with RTL on android. Is there any fix to this other than having the user change their system language setting to something that is RTL?

[SwikarBhattarai]

adding disableAutoLayout to AnimatedFlashList as props solved the issue.

[derickdecesare]

I got around this issue by forcing LTR in my whole application, may not be viable solution for every situation.

In App.js:

import { I18nManager } from 'react-native';

const App = () => { I18nManager.forceRTL(false); I18nManager.allowRTL(false);