Scrollable w/ RTL not rendering properly in Android

[anastely]

Hey, I have an issue to render Day names/number in android, It works very well on iOS!

iOS screenshot

Android screenshot

dependencies

"moment": "^2.27.0", "react": "16.13.1", "react-native": "0.63.0", "react-native-calendar-strip": "^2.0.8",

what I tried:

• delete node_modules
• reset cache
• set local as default 'en'
• change styles
• delete the app then reinstall it.

Nothing works! here's my code snippet

CalendarStrip.js

import React from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import CalendarStrip from 'react-native-calendar-strip';
import {locale} from '../utils/local';
import Feather from 'react-native-vector-icons/Feather';

const StripeCalender = (props) => {
  const [dateName, setDateName] = React.useState('');

  const onDateSelected = (date) => {
    setDateName(date.format('D MMMM YYYY'));
  };

  const closeModal = () => {
    props.closeModal();
  };
  return (
    <View style={styles.container}>
      <CalendarStrip
        scrollable={true}
        useNativeDriver
        onDateSelected={onDateSelected}
        style={{height: 250, paddingTop: 50, paddingBottom: 10}}
        calendarColor={'#000'}
        calendarHeaderStyle={{
          color: '#fff',
          fontSize: 22,
        }}
        dateNumberStyle={{fontSize: 17, color: '#fff'}}
        dateNameStyle={{fontSize: 13, color: '#fff'}}
        iconContainer={{flex: 0.1}}
        innerStyle={{
          flexGrow: 1,
          marginTop: 20,
          backgroundColor: '#000',
        }}
        selectedDate={new Date()}
        calendarAnimation={{type: 'sequence', duration: 30}}
        daySelectionAnimation={{
          type: 'background',
          duration: 300,
          highlightColor: '#fff',
        }}
        rightSelector={<Feather name="chevron-left" size={35} color={'#fff'} />}
        leftSelector={<Feather name="chevron-right" size={35} color={'#fff'} />}
        locale={locale}
      />
      <Text style={{fontSize: 24}}>Selected Date: {dateName}</Text>

    </View>
  );
};

export default StripeCalender;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee',
  },
});

index.js

...

import 'moment';
import 'moment/locale/ar';

locale.js

export const locale = {
  name: 'ar',
  config: {
    months: [
      'يناير',
      'فبراير',
      'مارس',
      'أبريل',
      'مايو',
      'يونيو',
      'يوليو',
      'أغسطس',
      'سبتمبر',
      'أكتوبر',
      'نوفمبر',
      'ديسمبر',
    ],
    weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split(''),
    weekdaysShort: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split(
      '_',
    ),
    longDateFormat: {
      LT: 'HH:mm',
      LTS: 'HH:mm:ss',
      L: 'D/\u200FM/\u200FYYYY',
      LL: 'D MMMM YYYY',
      LLL: 'D MMMM YYYY HH:mm',
      LLLL: 'dddd D MMMM YYYY HH:mm',
    },
  },
};

[peacechen]

I tested your code in the example app in this repo. It renders as expected on the Android simulator. It doesn't sound like a locale issue if it's not rendering with the default en locale for you.

Inspect the elements to verify that they're being rendered. Determine whether they're rendered but invisible, or not rendered at all. https://reactnative.dev/docs/debugging#integration-with-react-native-inspector

[anastely]

Hmm, I'm tested in a physical device, And I don't use Expo if u wondering

Yes, i can see it, check here

Edit

I just faced some strange things! When I come back to November 2019 especially I can see the Items "day/number" other way nothing I can see! I don't know if its bug or something Check this video record to understand what I mean! Here

[peacechen]

I've tested CalendarStrip on physical Android devices with and without Expo. There must be a difference in your environment or device setting. Are you using RTL layout? If so, try disabling that temporarily.

[anastely]

Yes you're right, After I disable RTL layout for android in MainApplication.java file it works very well But in my case, my App is fully RTL, How can I solve this issue without disabled RTL?

[peacechen]

Try passing in the React Native RTL style to the CalendarStrip container. Experiment with the various container(s). You may need to set it on all the nested ones til it gets to the day component.

[anastely]

@peacechen TBH I don't understand you well? Do you mean to add some RTL style to CalendarStrip styles like "flexDirection: row / row-reverse' Or something else?

[peacechen]

Bugs have been filed for React Native's ScrollView set to horizontal RTL on Android. https://github.com/facebook/react-native/issues/11960

One of the proposed fixes is to add the style { flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row '} for Android only. RNCS doesn't have a prop that passes through to the inner ScrollView. I will add that, but need your help testing whether row-reverse works.

Edit this line under node_modules/react-native-calendar-strip/src/Scroller.js: https://github.com/BugiDev/react-native-calendar-strip/blob/master/src/Scroller.js#L251

... and add row-reverse to the styles passed to scrollViewProps.

[anastely]

@peacechen Sadly not works, here's what I add " I just add a background to check if the styles applying or not and yeah I can see the background color but flexDirection not works"

...
 scrollViewProps={{
....
            style: { backgroundColor: '#12a19e', flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row'},
           // contentContainerStyle: {flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row', backgroundColor:"#12a19e", paddingRight: this.state.itemWidth /2}, // and add it here but same not work

....
}}
...

I implement a simple app "with RTL" if you want to test it, here's a repo

[peacechen]

Thanks for creating a repo that recreates this behavior. Based on the behavior of the days appearing and disappearing, it could be an issue with RecyclerListView. There is an existing issue for this: https://github.com/Flipkart/recyclerlistview/issues/502

[anastely]

@peacechen Yes I can see, But this issue opened from 3 months ago and not responded 😅 so what should I do in this case, this lib RNCS it's absolutely achieved what I need in my app? No other ways to solve this issue temporarily so I can release my app?

[peacechen]

You would need to debug RecyclerListView and fix the issue if that's the root cause. I'm concerned that it might not be RLV since it's working properly in iOS.

The only other option at this point is to disable scrollable for Android.

[anastely]

Yeah, After disable scrollable it's rendering properly I guess the issue with RecyclerListView itself

[EktaSahuGammastck]

I am also facing same issue when i stop to call onVisibleIndicesChanged method than it's properly but when i scroll the list data goes hide form the list. it is issue of RecyclerListView in RTL in android only

[PrgrmmrOleg]

Is there a some solution for this?

[peacechen]

We may need a new pass-thru prop to send to RecyclerListView's scrollViewProps in Scroller.js. That would allow you to implement work-arounds for RTL ScrollView. https://stackoverflow.com/questions/41036427/scrollview-rtl-in-react-native

Please submit a PR to add this prop

[ahmadfreijeh]

Any update on this issue? Still facing RTL issue in android @peacechen

[omarZaoujal99]

this issue is opened since 2020 with fixes

[ehtshamaziz]

Any Updates? I am still unable to load dates.

[DevSherKhan]

Has anyone discovered the solution?

[ehtshamaziz]

Has anyone discovered the solution?

Nope, made a custom strip calendar using FlatList for this.